axios传参总结

总体结构：
axios.get(url[, config])

axios.delete(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]]

1.get传参

axios中常见的get/delete请求，也称作query请求：

前台传参代码

this.$http.get("test/user/login",{
    params:{
    username:this.loginForm.username,
    pwd:this.loginForm.pwd}
    })

参数形式：

注: params参数必写 , 如果没有参数传{ }也可以

后端接参代码：

 @GetMapping("/user/login")
    public ResponseEntity<User> login(@RequestParam("username") String username,@RequestParam("pwd") String pwd)
    {

        User user=new User();
        user.setUsername(username);
        user.setPwd(pwd);
        //User user1=new User();
        if(username.equals("123456")&&pwd.equals("123456"))
        {

            return ResponseEntity.ok(user);
        }

        return ResponseEntity.notFound().build();
    }

2.post请求

前端代码：

this.$http.post("test/user/login2",this.$qs.stringify(this.loginForm))

传参形式：


后台接参代码：

@PostMapping("/user/login2")
    public ResponseEntity<User> login2(@RequestParam("username") String username,@RequestParam("pwd") String pwd)
    {

        User user=new User();
        user.setUsername(username);
        user.setPwd(pwd);
        //User user1=new User();
        if(username.equals("123456")&&pwd.equals("123456"))
        {

            return ResponseEntity.ok(user);
        }

        return ResponseEntity.notFound().build();
    }

3.对于post/put传递方式总结

(1) 传参格式为 formData

（全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’）

（request的Header:‘Content-Type’= ‘multipart/form-data’）

前台传参：

  var formData=new FormData();
  formData.append('username',this.loginForm.username);
  formData.append('pwd',this.loginForm.pwd);
  this.$http.post("test/user/login2",formData)

参数形式：

后台传参：

@PostMapping("/user/login2")
    public ResponseEntity<User> login2(@RequestParam("username") String username,@RequestParam("pwd") String pwd)
    {

        User user=new User();
        user.setUsername(username);
        user.setPwd(pwd);
        //User user1=new User();
        if(username.equals("123456")&&pwd.equals("123456"))
        {

            return ResponseEntity.ok(user);
        }

        return ResponseEntity.notFound().build();
    }

(2) 传参格式为 query 形式

（全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’）

（request的Header:‘Content-Type’= ‘application/x-www-form-urlencoded’）

第一种情况：使用$qs.stringify

上面已经叙述过，此处不再赘述。。。。。。。。。。

(3) 传参格式为 raw (JSON格式)
第一种情况： axios将JavaScript对象序列化为JSON

（全局请求头:‘Content-Type’= ‘application/x-www-form-urlencoded’）

（request的Header:‘Content-Type’= ‘application/json;charset=UTF-8’）

前端代码：

 this.$http.post("test/user/login3",this.loginForm)

参数形式：


后端接参代码：

@PostMapping("/user/login3")
    public ResponseEntity<User> login3(@RequestBody User user)    {


        //User user1=new User();
        if(user.getUsername().equals("123456")&&user.getPwd().equals("123456"))
        {

            return ResponseEntity.ok(user);
        }

        return ResponseEntity.notFound().build();
    }

注：前台传过来的是一个JSON对象，所以后台我用对象接受，springmvc提供@Requestbody此注解接收json对象

注： this.$qs.stringfy()----->这个是搜索参数字符串 ？a=10&&b=20
JSON.stringfy()-------->这个是json字符串

{“username”:“123456”,“pwd”:“123456”} login.vue?8d26:70
{“a”:“123”,“b”:“456”}

这是json对象：

{username: “123456”, pwd: “123456”}

然后一般是将JSON字符串转换成JSON对象再向后台传
JSON.parse()----------------------------本人这样认为，不妥自己拿捏