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

青旅半醒 2022-02-13 08:37 414阅读 0赞

背景： 前后端分离项目中， 前端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;
    }