axios传递参数的使用
今天在学习elasticsearch时，遇到一个问题：项目中前端采用的是Vue2+axios，后端的接口采用Restful风格来接收：
关于Resultful风格：
1. GET（SELECT）：从服务器取出资源（一项或多项）；
2. POST（CREATE）：在服务器新建一个资源；
3. PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）；
4. PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）；
5. DELETE（DELETE）：从服务器删除资源；
6. HEAD：获取资源的元数据；
7. OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。
前端代码
//axios.post("/hotel/list", params)//这是采用的post方式(刚开始是这样的，我将post改为get后，便会报错)
axios.get("/hotel/list",{//这是采用get方式，这两种方式最后结果都正确，后面会说具体怎么做的
params:params
})
.then(resp => {
this.hotels = resp.data.hotels;
this.total = resp.data.total;
this.totalPage = Math.floor((this.total + 5 - 1) / 5);
if (location) {
this.setMapCenter(location);
} else if(this.hotels && this.hotels.length > 0){
this.setMapCenter(this.hotels[0].location);
}
this.initMarker();
})
.catch(err => {
console.log(err)
this.hotels = []
})
可以看到一般要查询数据时是采用GetMapping接收，但是在学习的源码中发现，查询时向后端的请求时POST方式，后端也是PostMapping接收参数，当我将POST方法改为GET方法时又会报空指针的错误（前端传递的参数后端没有接收到）为什么改个传递方式后，结果就传不进去了？随后我便查找了axios的官网
请求方式别名 为了方便起见，已经为所有支持的请求方法提供了别名。 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
可以看到，axios.post("/hotel/list", params)，Post方法是可以直接传参的，但是Get方法却不能直接传参，需要在配置中（config）配置。
具体的传递参数方法案例如下：
一、Get请求
1.1基础类型接收，名字对应就可以
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
}
// 后台
@GetMapping("/test")
public Result test(Long id, String name) {
return Res.ok();
}
1.2使用Map接收，需要添加 RequestParam 注解
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
}
// 后台
@GetMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
return Res.ok();
}
1.3实体类接收
// 实体类
@Data
public class TestEntity {
Long id;
String name;
}
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'GET',
params: params
})
}
// 后台
@GetMapping("/test")
public Result test(TestEntity testEntity) {
return Res.ok();
}
二、Post请求
2.1基础类型接收，名称对应即可
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
}
// 后台
@PostMapping("/test")
public Result test(Long id, String name) {
return Res.ok();
}
2.2使用map接收
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
}
// 后台
@PostMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {
return Res.ok();
}
2.3使用实体类接收（params传递参数）
// 实体类
@Data
public class TestEntity {
Long id;
String name;
}
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'POST',
params: params
})
}
// 后台
@PostMapping("/test")
public Result test(TestEntity testEntity) {
return Res.ok();
}
2.4实体类接收（data传递参数）
// 实体类
@Data
public class TestEntity {
Long id;
String name;
}
// method
const params = {
id: '123456789',
name: '张三'
}
test(params)
// api
export function test (params) {
return axios({
url: url,
method: 'POST',
data: params
})
}
@PostMapping("/test")
public Result test(@RequestBody TestEntity testEntity) {
return Res.ok();
}
总结
总体来说，只要使用 params get与post请求基本是一样使用的，如果参数名与传递名称不一致，需要使用@RequestParam修饰.
若使用Map接收参数，必须使用@RequestParam修饰。但是如果想传list类型的数据，需要使用单独的方法处理。
若使用data传递参数，必须使用一个实体类接收参数，而且需要添加注解@RequestBody进行修饰
