Use axios for interface request and Java for reception

1. axios ordinary get request

//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. Use restful standard get request

Notice! ! ! There is a backslash/ after the path, be careful not to omit it, otherwise the value will become part of the path, and the request path will become /sys/test followed by the value of value, resulting in 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 request (except for the method request method and @PostMapping for receiving requests, the others are the same as ordinary get requests)

//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 request

Notice! ! ! The attribute names in the obj object must be exactly the same as the attribute names in the people entity class, because when the attribute names in the obj object match the attribute names in the people entity class, they are case-sensitive, that is, they are case-sensitive.

//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;
    }
 
}

Guess you like

Origin blog.csdn.net/hmwz0001/article/details/131919201
Recommended