uni-app进阶之https请求方式/状态管理【day11】

uni-app进阶之https请求方式

传统HTTP存在安全问题：
1.如果明文用于通信，则内容可能被窃听；
2.如果未验证通信方的身份，通信方的身份可能被伪装；
3.无法证明消息的完整性，消息可能被篡改。
为了解决安全通信问题，HTTPS应运而生。事实上，HTTPS并不是一种新的协议。相反，它站在HTTP的肩膀上，让HTTP首先与SSL（安全套接字层）通信，然后与SSL和TCP通信。也就是说，HTTPS使用隧道进行通信。通过使用SSL，HTTPS具有加密（防窃听）、身份验证（防欺骗）和完整性保护（防篡改）。

HTTP plus加密、身份验证机制和完整性保护是HTTPS。
重要的是要知道HTTPS不是应用层的新协议。只有HTTP通信接口部分被SSL或TLS协议替换。换句话说，所谓的HTTPS实际上是SSL协议外壳中的HTTP。

非对称密钥加密

每个人都可以获得公钥。通信发送方获得接收方的公钥后，可以使用该公钥进行加密。接收方接收到通信内容后，可以使用私钥进行解密。除了加密之外，还可以使用非对称密钥进行签名。由于私钥无法被他人获取，通信发送方使用其私钥进行签名，通信接收方使用发送方的公钥对签名进行解密，从而可以判断签名是否正确。

SSL为完整性保护提供消息摘要功能。HTTP还提供MD5消息摘要功能，但不安全。例如，如果消息内容被篡改，同时重新计算MD5值，则通信接收方不知道该篡改。
HTTPS的消息摘要功能是安全的，因为它结合了加密和身份验证。想象一下，在加密的消息被篡改后，很难重新计算消息摘要，因为无法轻松获取明文。

条件编译的代码块源码

"#ifdef": {
        "body": [
            "<!-- #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",
            "$0",
            "<!-- #endif -->"
        ],
        "prefix": "ifdef",
        "project": "uni-app",
        "scope": "source.vue.html"
    },
    "#ifndef": {
        "body": [
            "<!-- #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",
            "$0",
            "<!-- #endif -->"
        ],
        "prefix": "ifndef",
        "project": "uni-app",
        "scope": "source.vue.html"
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

系统帮助我们预设四个代码块文件。单击菜单栏-工具-代码块设置查看它们：HTML代码块（HTML.json）、CSS代码块（CSS.json）、JavaScript代码块（JavaScript.json）和Vue代码块（Vue.json）。

添加状态管理vuex

下拉刷新

数据请求完成之后停止下拉刷新

export default {
    data: {
        text: 'uni-app'
    },
    onShow: function (options) {
      this.loadData();
    },
    onPullDownRefresh() {
      this.loadData()
    }
   methods:{
       loadData() {
                this.$http('/data', {}, 'get').then((res) => {
                    uni.stopPullDownRefresh();
                    if (res.status) {
                        this.activityList = res.data
                    }
                })
            }
      }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21