这一篇是原生vuepost请求使用form表单格式发送数据,里面还掺杂了一些关于算签名业务。可能看起来比较繁琐,不过注释还写的挺全的,可以供大家参考。
html:

<div id="app">
    用户名:<input type="text" style="width: 200px" name="username" v-model="user.username"/>
    密  码:<input type="password" style="width: 200px" name="password" v-model="user.password"/>
    <!--<input type="submit" name="submit" value="登录"/>-->
    <button style="width: 50px;height: 30px;" @click="login()">登录</button>
</div>

js:

new Vue({
    el: '#app',
    data: {
        user: {},
        result: {}
    },
    // 发送post请求时,不能发送 Content-Type: application/json;charset=UTF-8 这个格式,因为后台过滤器要进行处理签名
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',   // 设置请求头为form表单格式
        // 'Content-Type': 'application/json;charset=UTF-8'
    },
    methods: {
        login: function () {
            var _this = this;
            axios({
                method: 'post',
                url: '/noauth/login' + getSign("username=" + _this.user.username + "&password=" + _this.user.password),
                data: {
                    username: _this.user.username,
                    password: _this.user.password
                },
                transformRequest: [function (data) {  // 将{username:111,password:111} 转成 username=111&password=111
                    var ret = '';
                    for (var it in data) {
                        // 如果要发送中文 编码
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    }
                    return ret.substring(0,ret.length-1)
                }],
            }).then(function (response) {
             	// 拿到data
                _this.result = response.data;
                console.info(_this.result.message);
				// 将验证信息放入缓存                
				localStorage.setItem("sbkjauth",response.headers["sbkjauth"]);
                if (_this.result.status == "0201") {
                    var url = "/html/index.html";
                    axios({
                        method:"get",
                        url:url+getSign(),
                        headers:{
                            "sbkjauth":localStorage.getItem("sbkjauth")
                        },
                    }).then(function (resp) {
                        console.info(resp.data);
                    })
                }
            }).catch(function (reason) {
                console.error(reason)
            })
        },
    created: function () {  
        console.info("页面尚未加载完成!")
    }
});

其中里面的getSign(“username=” + _this.user.username + “&password=” + _this.user.password),代表的是算签名,会在下一篇博文讲。
如果发现什么问题请留言,毕竟代码都是人写的难免会出错。

Logo

前往低代码交流专区

更多推荐