前端传过来的表单
数据,内含有userName、password等数据,后端有两种注解可以接收这些数据
login:{
userName:'',
password:''
}
使用@RequestBody接收
第一种写法是@RequestBody User user
这种注入对象的写法
@ResponseBody
@PostMapping("login")
public Result login(@RequestBody User user){
//toDo
}
第二种是使用Map写法,两种写法axios配置一致,代码如下
前端axios
写法,传递的json
数据到后端
const request=axios.create({
baseURL:"http://localhost:9090"
})
this.request.post("/user/login", this.login).then(res => {
//ToDo
}).catch(()=>{
//ToDo
})
后端使用map
接收
@ResponseBody
@PostMapping("login")
public Result login(@RequestBody Map<String,String> map){
String userName=map.get("userName");
String password=map.get("password");
//ToDo
}
使用@RequestParam接收
导入JavaScript的qs库
,并配置请求头
axios
默认使用'Content-type':'application/json;charset=UTF-8
格式提交数据,
'Content-type':'application/x-www-form-urlencoded'
格式提交的数据是以key=value&key=value
形式传输
qs.stringify
是把一个参数对象格式化为key=value&key=value
格式的字符串
this.request.post("/user/login", qs.stringify(this.login),{
headers:{
'Content-type':'application/x-www-form-urlencoded'
}
}).then(res => {
//ToDo
}).catch(()=>{
//ToDo
})
后端写法
public Result login(@RequestParam(value = "userName",required = true)String userName,
@RequestParam(value = "password",required = true)String password){
//ToDo
}