Vue+axios的四种异步请求，参数的携带以及接收

Vue中axios发送GET, POST, DELETE, PUT四种异步请求，参数携带和接收问题

web.xml配置如下

---

1、GET请求

发送GET请求：

<!--params是关键字，说明所携带的参数,json格式参数-->
axios.get('/edit.do', {params: {id: value}})
    .then((response) => {
    //TODO
    })

Controller接收GET请求：

@GetMapping("/edit")
public Result edit(Integer id){
    //TODO
}

---

2、POST请求

发送POST请求：

var params = {
    currentPage: this.pagination.currentPage,    //当前页码
    pageSize: this.pagination.pageSize,          //页面大小
    queryString: this.pagination.queryString     //搜索条件
}
<!--POST请求第二个参数，可直接携带json格式的参数-->
axios.post('/findPage.do', params)
    .then(response => {
        //TODO
    })

Controller接收POST请求：

public class QueryPageBean implements Serializable {
    private Integer currentPage;//页码
    private Integer pageSize;//每页记录数
    private String queryString;//查询条件
}

@PostMapping("/findPage")
public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
    //TODO
}

---

3、DELETE请求

发送DELETE请求：

<!--DELETE请求第二个参数，可携带多个json格式的参数，但需要params作为json参数的关键字-->
axios.delete('/delete.do', {params: {id: value}})
    .then((response) => {
        //TODO
    })

Controller接收DELETE请求：

@DeleteMapping("/delete")
public Result delete(Integer id){
    //TODO
}

---

4、PUT请求

发送PUT请求：

<!--PUT请求第二个参数，可直接携带json格式的参数-->
axios.put('/update.do', {name:userName,age:userAge,address:userAddress})
    .then((response) => {
        //TODO
    })

Controller接收PUT请求：

public class User implements Serializable {
    private String name;
    private Integer age;
    private String address;
}

@PutMapping("/update")
public Result update(@RequestBody User user){
    //TODO
}