背景： 前后端分离项目中， 前端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;}
如果觉得《vue开发中使用axios的post方法传递参数springmvc接受不到参数》对你有帮助，请点赞、收藏，并留下你的观点哦！
