使用axios进行接口请求和使用Java进行接收

女爷i 2024-03-22 20:37 111阅读 0赞

1、axios普通get请求

//axios普通get请求
    //方法名为test,传入数据value
    function test(value) {
        
      axios({
        
        //请求方式
        method:'get',
        //后端接口路径
        url:'/sys/test',
        //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能和post配合使用
        params: {
        
          //attributeName为属性名，value为属性值
          attributeName:value
        }
      }).then((response) => {
        
        //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
      }).catch((error) => {
        
        //对error进行处理
      })
    }
     
    
    
    //Java后端
     
    //普通get请求时对应的接收
    @GetMapping("/sys/test")
    public void test(@RequestParam(value = "attributeName") String attributeName){
        
        //axios使用params进行传值，而Java就需要用到@RequestParam来接收params的值，value后的值要对应上params里的属性名，即attributeName，若不写，则value默认为String后的attributeName这一属性名，而且一个请求能拥有多个@RequestParam
    }

2、使用restful规范的get请求

注意！！！路径后面有反斜杠/，注意不要写漏了，不然value就会变成路径的一部分，请求路径就会变成/sys/test后面跟上value的值，从而导致404

//axios使用restful规范的get请求
     
    //方法名为test,传入数据value
    function test(value) {
        
      axios({
        
        //请求方式
        method:'get',
        //后端接口路径+属性值;注意！！！路径后面有反斜杠/，注意不要写漏了，不然value就会变成路径的一部分，请求路径就会变成/sys/test后面跟上value的值，从而导致404
        url:'/sys/test/'+value,
      }).then((response) => {
        
        //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
      }).catch((error) => {
        
        //对error进行处理
      })
    }
     
    /Java后端
     
    //使用restful请求时对应的接收
    @GetMapping("/sys/test/{accept}")
    public void test(@PathVariable("accept") String(传进来的数据的类型) attributeName){
        
        //axios使用restful的方式进行传值，而Java就需要用到@PathVariable来接收url后的值，/sys/test/{accept}里的accept必须和@PathVariable("accept")里的accept名字一致，而且一个请求能拥有多个@PathVariable
    }

3、post+params请求(除了method的请求方式和接收请求用@PostMapping，其他都和普通的get请求一致)

//axios使用post+params请求
     
    //方法名为test,传入数据value
    function test(value) {
        
      axios({
        
        //请求方式
        method:'post',
        //后端接口路径
        url:'/sys/test',
        //注意这里使用的是params,该属性负责把属性名和属性值添加到url后面，一般和get配合使用，但也能    和post配合使用
        params: {
        
          //attributeName为属性名，value为属性值
          attributeName:value
        }
      }).then((response) => {
        
        //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
      }).catch((error) => {
        
        //对error进行处理
      })
    }
     
    //Java
     
    //post+params请求时对应的接收
    @PostMapping("/sys/test")
    public void test(@RequestParam(value = "attributeName") String attributeName){
        
        //axios使用params进行传值，而Java就需要用到@RequestParam来接收params的值，value后的值要对应上params里的属性名，即attributeName，若不写，则value默认为String后的attributeName这一属性名，而且一个请求能拥有多个@RequestParam
    }

4、post+data请求

注意！！！ obj对象里的属性名一定得和people实体类里的属性名一模一样，因为obj对象里的属性名与people实体类里的属性名匹配时，大小写敏感，即区分大小写

//axios使用post+data请求
    //方法名为test,传入js对象obj,js对象放属性和属性值,例如obj:{userName:张三，age:18}
    function test(obj) {
        
      axios({
        
        //请求方式
        method:'post',
        //后端接口路径
        url:'/sys/test',
        //注意这里使用的是data,该属性负责把属性名和属性值添加到请求体里面，一般和post配合使用,而且不要yong{}把obj对象包裹起来，不然后端无法解析前端传过来的JSON数据
        data: obj
      }).then((response) => {
        
        //response是一个返回的promise对象，该注释所在的这行一般对该promise对象进行处理从而获取数据
      }).catch((error) => {
        
        //对error进行处理
      })
    }
     
    //Java后端
     
    //post+data请求时对应的接收
    @PostMapping("/sys/test")
    public void test(@RequestBody People people){
        
        //axios使用post+data进行传值，而Java就需要用到@RequestBody来接收data的值，obj里的属性名与people实体类的属性名相同，obj里的属性名和people的属性名就能进行动态绑定从而把obj的属性值set进people实体类里，而一个请求只能拥有一个@RequestBody；注意！！！ obj对象里的属性名一定得和people实体类里的属性名一模一样，因为obj对象里的属性名与people实体类里的属性名匹配时，大小写敏感，即区分大小写
     
    //对应的People实体类
    public class People{
        
     
        private String userName;
        
        private Integer age;
     
        public String getUserName() {
        
            return userName;
        }
     
        public void setUserName(String userName) {
        
            this.userName = userName;
        }
     
        public Integer getAge() {
        
            return age;
        }
     
        public void setAge(Integer age) {
        
            this.age = age;
        }
     
    }