vue使用axios中post/get请求params/data总结

目录

小结：

代码实例：

 controller后端：

vue前端：

---

早期笔记，放上来备份~

小结：

1、使用params传参，都是在 GET 请求的情况下，参数会拼接在接口地址的 ? 后面，后端接收不需要带有注解;

1、@RequestParam的最大作用就是：明确地告诉controller，这两个参数是从请求参数中获取，一旦没有获取，则报错;

3、get一般使用params，通常不使用data, 基础类型接收，名字对应即可

4、使用Map接收，需要添加 RequestParam 注解

5、post一般使用data，也可以使用params, post使用params方法和get相似，改 method: 'post' 即可。

代码实例：

 controller后端：

    /**
     *  Get
     *  传递对象参数
     **/
    @GetMapping("/test1")
    public void test1(UserPhoto data) {
        data.setName("es");
        System.out.println(data);
    }
 
    /**
     *  Get
     *  传递 变量参数1,2
     **/
    @GetMapping("/test2")
    public void test2(String name,String number) {
        System.out.println(name+ " " + number);
    }
 
    /**
     *  Get
     *  传递 变量参数1
     **/
    @GetMapping("/test3")
    public void test3(String name) {
        System.out.println(name);
    }
 
    /**
     *  Get
     *  传递 集合参数
     *  加@RequestParam
     **/
    @GetMapping("/test4")
    public void test4(@RequestParam Map<String, Object> map) {
        System.out.println(map);
    }
 
    /**
     *  Get
     *  路径传递 变量参数1，2
     **/
    @GetMapping("/test5/{name}/{number}")
    public void test5(@NotNull(message = "name不能为空")
                          @PathVariable String name,@PathVariable String number) {
        System.out.println(name+ " " + number);
    }
 
    /**
     *  Post
     *  传递 变量参数1
     **/
    @PostMapping("/test6")
    public void test6(String name) {
        System.out.println(name);
    }
 
 
    /**
     *  Post
     *  传递 变量参数1
     **/
    @PostMapping("/test7")
    public void test7(UserPhoto photo) {
        System.out.println(photo);
    }
 
 
    /**
     *  Post
     *  传递 对象参数
     **/
    @PostMapping("/test8")
    public void test8(@RequestBody UserPhoto photo) {
        System.out.println(photo);
    }
 
    /**
     *  Post
     *  传递 对象数组参数
     **/
    @PostMapping("/test9")
    public void test9(@RequestBody List<UserPhoto> photo) {
        System.out.println(photo);
    }
 
    /**
     *  Post
     *  传递 对象数组和变量参数
     **/
    @PostMapping("/test10")
    public void test10(@RequestBody List<UserPhoto> photo, String id) {
        System.out.println(photo);
        System.out.println(id);
    }
 
    /**
     *  Post
     *  传递 对象数组和变量参数
     **/
    @PostMapping("/test11/{id}")
    public void test11(@RequestBody List<UserPhoto> photo, @PathVariable String id) {
        System.out.println(photo);
        System.out.println(id);
    }

 类：

@Data
@EqualsAndHashCode(callSuper = true)
public class UserPhoto extends BaseEntity {
 
    private String number;
 
    private String name;
 
    private byte[] img;
 
    private String nOssId;
 
    private String status;
 
}

vue前端：

 
// method
      getApiTest1() {
          const obj={number:"23q32",nOssId:"234545"}
          test1(obj).then(res => {
              
        });
      },
      getApiTest2() {
        const obj={number:"23q32",name:"234545"}
        test2(obj).then(res => {
            
        });
      },
      getApiTest3() {
        const obj={name:"234545"}
        test3(obj).then(res => {
            
        });
      },
      getApiTest4() {
        const obj={number:"23q32",name:"234545"}
        test4(obj).then(res => {
            
        });
      },
      getApiTest5() {
        let name="dd";
        let number="33";
        test5(name,number).then(res => {
            
        });
      },
      getApiTest6() {
        const obj={name:"234545"}
        test6(obj).then(res => {
            
        });
      },
      getApiTest7() {
        const obj={name:"234545",number:"23q32"}
        test7(obj);
      },
      getApiTest8() {
        const obj={name:"234545",number:"23q32"}
        test8(obj);
      },
      getApiTest9() {
        const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"}]
        test9(obj);
      },
      getApiTest10() {
        const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"} ]
        let id = { id:"23" }
        test10(obj,id);
      },
      getApiTest11() {
        const obj=[{name:"234545",number:"23q32"},{name:"238885",number:"238882"} ]
        let id = "23"
        test11(obj,id);
      }

// api
export function test1(data) {
  return request({
    url: '/User/test1',
    method: "get",
    params:data
  })
}
 
export function test2(query) {
  return request({
    url: '/User/test2',
    method: "get",
    params:query
  })
}
 
export function test3(query) {
  return request({
    url: '/User/test3',
    method: "get",
    params:query
  })
}
 
export function test4(query) {
  return request({
    url: '/User/test4',
    method: "get",
    params:query
  })
}
 
export function test5(name,number) {
  return request({
    url: '/User/test5/'+name+"/"+number,
    method: "get"
  })
}
 
export function test6(name) {
  return request({
    url: '/User/test6',
    method: "post",
    params:name
  })
}
 
export function test7(a) {
  return request({
    url: '/User/test7',
    method: "post",
    params:a
  })
}
 
export function test8(a) {
  return request({
    url: '/User/test8',
    method: "post",
    data:a
  })
}
 
export function test9(a) {
  return request({
    url: '/User/test9',
    method: "post",
    data:a
  })
}
 
export function test10(a,id) {
  return request({
    url: '/User/test10',
    method: "post",
    data:a,
    params:id
  })
}
 
export function test11(obj,id) {
  return request({
    url: '/User/test11/' + id,
    method: "post",
    data:obj,
  })
}