Vue.js + axios发post请求时后端接收不到参数解决办法

前天，我用axios发送post请求的时候，后台一直接收不到我的值，于是我上网找了几种解决方法，在这里记录一下，当我们进行post 请求的时候，axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据 

一、URLSearchParams构造方法（推荐）

register() {
            if (!this.form.peopleName) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.peoplePassword) {
				this.$message.error('请输入密码');
				return false;
			};
            if (!this.form.checkpass) {
				this.$message.error('请再次输入密码');
				return false;
			};
            if (this.form.checkpass!==this.form.peoplePassword) {
				this.$message.error('两次输入密码不一致!');
				return false;
			};
            console.log(5633333)
            var params = new URLSearchParams();
            params.append('peopleName', this.form.peopleName);       //你要传给后台的参数值 key/value
            params.append('peoplePassword', this.form.peoplePassword);
            this.$axios({
                method:"post",
                // method:"get",
                url:'http://172.16.105.11:8080/tdt-xz/addUser.go',
                data:params,
                
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success('注册成功,请登录')
                    // this.$router.go(-1);//返回上一层级的路由
                    this.jumplogin();
                }
                else{
                    this.$message.error("用户名已经存在,重新注册")
                }

            })
        },

他给后台传入的值我觉得更规范，是如下图所示的样子 

 

 二、 transformRequest: [function (data) {   
                        let ret = ''
                        for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],

// `transformRequest`允许在请求数据发送到服务器之前对其进行更改

// 这只适用于请求方法'PUT'，'POST'和'PATCH'

// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream

 getfwlist(){
                this.$axios({
                    method:"post",
                    url:"http://www.baidu.gov.cn/queryServlet",
                    // url:"http://tdt-xz.geo-compass.com/fwzy/queryServlet",
                    headers:{
                        'Content-type': 'application/x-www-form-urlencoded'
                    },
                    data:{
                        mn: 'GetServerListByPage',
                        keywords: this.fwlx,
                        pageNum: this.page.pageNo,
                        pageSize: this.page.pageSize,
                        keyname: "pageview",
                        sort: 'desc',
                        searchText: this.namekey,
                        state: 1,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then((res)=>{
                    
                })
        },

 

这种传入的方式有些后台就能收到，有些就不行

三、qs

首先引入 npm install qs --save

然后在main文件中引用下面的话

import qs from 'qs';

Vue.prototype.$qs = qs

userLogin() {
            if (!this.form.username) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.password) {
				this.$message.error('请输入密码');
				return false;
			};
            if (this.form.code.toUpperCase() !== this.yzmz.toUpperCase()) {
				this.$message.error('验证码错误，请重新输入');
				return false;
			};


            let data = this.$qs.stringify({
                username:this.form.username,
                password:this.form.password,
                code:this.form.code,
            });
            this.$axios({
                method: 'post',
                url:' http://172.16.105.11:8080/tdt-xz/login.go',
                data:data
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success("登录成功")  
                    this.jumphome();
                }
                else{
                    this.$message.error("用户名或密码错误")

                }
            });
        },

如果这样不行就加上header

userLogin() {
            if (!this.form.username) {
				this.$message.error('请输入用户名');
				return false;
			};
            if (!this.form.password) {
				this.$message.error('请输入密码');
				return false;
			};
            if (this.form.code.toUpperCase() !== this.yzmz.toUpperCase()) {
				this.$message.error('验证码错误，请重新输入');
				return false;
			};


            let data = this.$qs.stringify({
                username:this.form.username,
                password:this.form.password,
                code:this.form.code,
            });
            this.$axios({
                method: 'post',
                url:' http://172.16.105.11:8080/tdt-xz/login.go',
                headers:{
                    'Content-type': 'application/x-www-form-urlencoded'
                },
                data:data
            }).then((res)=>{
                console.log(res,333)
                if(res.data.status==0){
                    this.$message.success("登录成功")  
                    this.jumphome();
                }
                else{
                    this.$message.error("用户名或密码错误")

                }
            });
        },

 下图是发送参数的格式，是不是和第一种一样呢（推荐）

 

前后台的配合不可缺少，所有后台的配置，请参考这篇：https://segmentfault.com/a/1190000011811117