vue开发中使用axios的post方法传递参数springmvc接受不到参数
背景: 前后端分离项目中, 前端vue项目使用axios发起请求。 spring的controller中习惯使用@requestMapping注解,发现使用post请求时,后端接口不使用实体无法接受到参数, 前端参数必须经过处理才能接受到。 get请求在参数格式不对的情况下,也会导致controller无法接受到参数。post请求参数需要特殊处理主要和请求头的格式有关, 如:applica...
·
背景: 前后端分离项目中, 前端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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)