vue开发中使用axios的post方法传递参数springmvc接受不到参数

背景： 前后端分离项目中， 前端vue项目使用axios发起请求。 spring的controller中习惯使用@requestMapping注解，发现使用post请求时，后端接口不使用实体无法接受到参数， 前端参数必须经过处理才能接受到。  get请求在参数格式不对的情况下，也会导致controller无法接受到参数。 

post请求参数需要特殊处理主要和请求头的格式有关， 如：application/x-www-form-urlencoded,application/json

application/json:需要用实体接收

x-www-form-urlencoded： 直接用参数接收

 

解决方案：

1. get请求前后端参数对接

//前端代码
Vue.prototype.$axios=axios; // 全局设置即可
// 方式一：参数格式：{params:{key1:val1, key2:val2}}
this.$axios.get("http://localhost:8080/api/function/login/loginget", 
        {params:{name:"carlget1", password:"password"}})
  .then(function(res){
    console.log( res );
  })
  .catch(function(err){
    console.log( err );
  });

// 后端代码
@RequestMapping("loginget")
public Map<String, Object> login(String name, String password){

	Map<String, Object> retMap = new HashMap<>();
	retMap.put("name", "name-val");
	retMap.put("password", "password-val");
	retMap.put("msg", "登陆成功");
	return retMap;
}

 

2. post请求前后端参数对接， 后端使用实体接受入参

// 前端代码
// 传参格式： {key1:val1, key2:val2}
Vue.prototype.$axios=axios; // 全局设置即可
this.$axios.post("http://localhost:8080/api/function/login/loginpost2", 
                    {"name":"name-val","password":"password-val"})
        .then(res=>{
        console.log( res );
        })
        .catch(err=>{
        console.log( err );
        });

// 后端代码, 使用实体来接受入参
@RequestMapping("loginpost2")
public Map<String, Object> loginPost2(@RequestBody Person person){
    String namePost = person.getName()+"-val";
    String passwordPost = person.getPassword()+"-val";
    Map<String, Object> retMap2 = new HashMap<>();
    retMap2.put("name", namePost );
    retMap2.put("password", passwordPost);
    return retMap2;
}

 

3. post请求， 前后端参数对接，后端接受参数形式同get请求

//前端代码
//参数格式： 将要传递的参数放在URLSearchParams里面， 然后传递给后端
Vue.prototype.$axios=axios; // 全局设置即可
var params = new URLSearchParams();
params.append('namePost','carlpost');
params.append('passwordPost','carlpost');
//方式一： 
this.$axios.post("http://localhost:8080/api/function/login/loginpost", params)
    .then(res=>{
    console.log( res );
    })
    .catch(err=>{
    console.log( err );
    });
// 方式二：如果感觉使用URLSearchParams会有太多的append重复代码， 
// 可以使用transformRequest进行操作. TODO 这个地方如果能设置全局的就好， 暂时没考虑
this.$axios.post("/function/login/loginpost", {"namePost":"carl", "passwordPost":"pwd"},{
    transformRequest:function(data){
        if (data){
            var params = new URLSearchParams();
            for (key in data){
                params.append(key, data[key]);
            }
            return params;
        }
        return data;
    }
})

// 后端代码， 参数的形式列表接受
@RequestMapping("loginpost")
public Map<String, Object> loginPost(String namePost, String passwordPost){

    Map<String, Object> retMap = new HashMap<>();
    retMap.put("namePost", namePost+"-val");
    retMap.put("msg", passwordPost+"-val");
    return retMap;
}