springboot和axios表单数据配置与接收问题处理

前端传过来的表单数据,内含有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
    }