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進行修飾