Vue axios向服务器端发起携带参数的post请求，后端接收不到数据，并报错Required String parameter 'id' is not present 问题的解决

Vue中利用axios向服务器端（Java实现）发起携带参数的post请求，vue代码如下：

this.$axios.post('http://localhost:8081/myblog/user/login',
	{
	    id:this.loginForm.username,
	    password:this.loginForm.password,
	},
	{
	    headers: {
		'Content-Type':'application/x-www-form-urlencoded;charset=utf-8'
	    }
	    }).then(res=>{ 
		console.log(res.data)  
		},err =>{
		console.log(err)
		})
	}

然后发起请求，结果看返回状态码为400，并提示“Required String parameter 'id' is not present”。查阅资料，原来需要把请求数据先处理一下：

1.在webpack中运行下边脚本，安装qs：

cnpm install  qs -S

2.在该组件下script标签中引入qs：

import qs from 'qs'

3.在发起请求前，先把请求参数处理一下：

let userMsg  = qs.stringify({
		id:this.loginForm.username,
		password:this.loginForm.password,
		})

4.然后再用axios发起post请求，代码如下：

submitClick(){
		let userMsg  = qs.stringify({
			id:this.loginForm.username,
			password:this.loginForm.password,
		})
		this.$axios.post('http://localhost:8081/myblog/user/login', userMsg)
				.then(res=> {
					console.log(res)
				})
				.catch(function(err) {
					console.log(err)
				})
			}

5.点击相应组件发起post请求，打开F12看到浏览器返回信息：

Object { data: "", status: 200, statusText: "", headers: {}, config: {…}, request: XMLHttpRequest }

证明请求发送成功，请求参数为：

那么服务器端是怎么接收的呢？这里有三种方法：

方法1：直接用参数接收:

 @PostMapping("/login")
    @ResponseBody
    public void userLogin(@RequestParam(value="id") String userName,@RequestParam(value="password") String passWord){
        System.out.println(userName+passWord);
    }

 注意这里的value值要与前端请求的参数一样，@RequestParam 一定不能忘了。

方法2:用实体接收：

  @PostMapping("/login")
    @ResponseBody
    public void userLogin(User user){
        System.out.println(user);
    }

这种方法需要注意实体中的属性名要与前端传过来的值的键名一样，这样实体才能封装成功，不然一样接收不到参数！

方法3：用map接收：

 @PostMapping("/login")
    @ResponseBody
    public void userLogin(@RequestParam HashMap<String,String> userMap){
        System.out.println(userMap.toString());
    }

注意这里同样不能忘了@RequestParam，不然也一样接收不到数据。

好了，问题解决！