一般的(de)在開發(fa)前后端分離(li)項目(mu)的(de)時候不可避(bi)免(mian)的(de)要(yao)涉及到(dao)接口調用以及參數傳遞相關的(de)內(nei)容(rong)。我們常見的(de)參數傳遞方式有如下幾種(zhong)

• 查詢參數傳遞

• 路徑參數傳遞

• 請求體參數傳遞

• 表單數據傳遞

下面(mian)我(wo)們就來詳(xiang)細的介(jie)紹一下這幾種參數傳遞的方(fang)式。

查詢參數

當我們(men)在請(qing)求的時候(hou)可能會(hui)需要(yao)將請(qing)求參(can)數(shu)添加到請(qing)求路徑(jing)URL中，這(zhe)個時候(hou)我們(men)就可以通過查詢參(can)數(shu)傳遞的方式(shi)來對參(can)數(shu)進行拼接。

//localhost/getList?pageSize=1&pageNum=23

在上(shang)面(mian)的例子(zi)中，通(tong)過查詢參數拼接。使用Vue中的Axios庫對請求(qiu)進(jin)行(xing)發送內容(rong)如下(xia)

// 使用GET方法const params = {  pageSize: 1  pageNum: 20};
axios.get('//localhost', { params })
  .then(response => {    const data = response.data;
  })
  .catch(error => console.error(error));

通過(guo)使(shi)(shi)用Axios中的get()方法，通過(guo)查詢方式的傳遞(di)將分頁參數(shu)拼(pin)接(jie)到URL上，然后在(zai)后端的Spring Boot框架中使(shi)(shi)用@RequestParam 注解(jie)來(lai)聲明需要被接(jie)收(shou)到參數(shu)。

@GetMapping("/getList")
public ResponseEntity<List<Article>> getList(    @RequestParam("pageSize") int pageSize,    @RequestParam("pageNum") int pageNum) {  
  return ResponseEntity.ok(articles);
}

在整個的(de)例(li)子中(zhong)，使(shi)用(yong)的(de)是(shi)@GetMapping 注(zhu)解來聲明整個方法(fa)是(shi)一個GET請求(qiu)的(de)方法(fa)，并(bing)且其中(zhong)getList指(zhi)定了(le)請求(qiu)的(de)路徑，并(bing)且在方法(fa)參(can)(can)數(shu)中(zhong)使(shi)用(yong)了(le)@RequestParam參(can)(can)數(shu)來接收傳入的(de)參(can)(can)數(shu)，并(bing)且指(zhi)定的(de)名稱必(bi)須與查詢參(can)(can)數(shu)中(zhong)的(de)名稱是(shi)相同(tong)的(de)，然后在實際操作邏輯(ji)中(zhong)就可以使(shi)用(yong)這些參(can)(can)數(shu)了(le)。

路徑參數

所謂的路(lu)(lu)徑參數也是(shi)(shi)一種經(jing)常(chang)被使用的前后(hou)端參數傳遞(di)方式(shi)，是(shi)(shi)用于前端通過URL路(lu)(lu)徑的方式(shi)來講(jiang)參數變(bian)量值傳遞(di)到后(hou)端的一種方式(shi)。代(dai)碼如下

const articleId = 123;
axios.get(`//example.com/articles/${articleId}`)
  .then(response => {    const data = response.data;    // 處理文章數據
  })
  .catch(error => console.error(error));

后端參數接收方式

@GetMapping("/{id}")  public ResponseEntity<Article> getArticle(@PathVariable("id") Long id) {    // 處理文章數據
    Article article = articleService.getArticle(id);    if (article == null) {      // 如果找不到對應的文章，則返回404 Not Found響應      return ResponseEntity.notFound().build();
    } else {      // 返回包含文章數據的200 OK響應      return ResponseEntity.ok(article);
    }
  }

在(zai)上面的(de)例子中，通(tong)過Axios中的(de)get方法發送了一個GET請求，并(bing)且將123作為了參數傳(chuan)遞到了后端(duan)，在(zai)后端(duan)接收參數的(de)時候使用(yong)了@PathVariable 注解來聲明這(zhe)是(shi)一個路徑參數。

請求體參數

請求(qiu)體參(can)數(shu)(shu)通常是用(yong)來(lai)傳遞一些比(bi)較復雜(za)的(de)參(can)數(shu)(shu)，例(li)如提交、修(xiu)改(gai)等操作(zuo)。這(zhe)種類型的(de)參(can)數(shu)(shu)，通常使(shi)用(yong)了POST或者PUT請求(qiu)來(lai)發送到服務(wu)端，并且使(shi)用(yong)了Request Body 將數(shu)(shu)據作(zuo)為JSON格式的(de)數(shu)(shu)據或者使(shi)用(yong)表單數(shu)(shu)據進行了傳輸(shu)。

// 使用POST方法提交表單數據const formData = {  title: '標題',  content: '正文內容',
};
axios.post('//example.com/articles', formData)
  .then(response => {    const data = response.data;    // 處理服務器返回的響應
  })
  .catch(error => console.error(error));

在上面的例子中(zhong)，通過post方法來發送POST請(qing)(qing)求(qiu)，并且請(qing)(qing)求(qiu)體使用了formData對象作(zuo)為參數(shu)(shu)，也就是(shi)說這個請(qing)(qing)求(qiu)是(shi)一(yi)個表(biao)單(dan)數(shu)(shu)據，包含了標(biao)題(ti)和(he)正文兩個內(nei)容。

@PostMapping("/articles")public ResponseEntity<Article> createArticle(@RequestBody ArticleRequest request) {  // 從請求體參數中獲取文章標題和內容
  String title = request.getTitle();
  String content = request.getContent();  // 創建文章并保存到數據庫中
  Article article = articleService.createArticle(title, content);  // 創建成功后返回一個包含文章數據的響應  return ResponseEntity.ok(article);
}

在后端接收參(can)數的時候，使用了@RequestBody 來將(jiang)參(can)數映射(she)到(dao)一個請求對象(xiang)中。然后進行(xing)使用。

表單數據參數

上面我們介紹了在Content-Type為application/json格式數據下的傳遞方式，當然了在我們進行POST或者是PUT請求參數傳遞的時候還有一種Content-Type為
application/x-www-form-urlencoded的情況，也(ye)就是說明傳遞的參數是一個表單參數。如下(xia)所示(shi)。

// 使用 POST 方法向服務器提交表單數據const formData = new FormData();
formData.append('username', 'admin');
formData.append('password', '123456');
axios.post('//example.com/login', formData, {  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
  .then(response => {    const data = response.data;    // 處理響應數據
  })
  .catch(error => console.error(error));

在這個例子中，使用了post()方法發送了一個POST請求，并且將用戶名和密碼作為表單的數據傳遞到服務器中，并且這里所指定的Content-Type 就是
application/x-www-form-urlencoded類(lei)型。接(jie)下來我們看(kan)看(kan)在后端如何接(jie)收這(zhe)些(xie)參數

@PostMapping("/login")
public ResponseEntity<String> login(@RequestParam("username") String username, @RequestParam("password") String password) {  // 處理登錄邏輯  if (username.equals("admin") && password.equals("123456")) {    return ResponseEntity.ok("登錄成功");
  } else {    return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("用戶名或密碼錯誤");
  }
}

通過(guo)@PostMapping注(zhu)(zhu)解聲明了一個POST請(qing)求(qiu)處理方(fang)法，并且將請(qing)求(qiu)路徑設為/login使(shi)用了@RequestParam 注(zhu)(zhu)解將表單數據中(zhong)(zhong)的參(can)數 映(ying)射到了方(fang)法參(can)數中(zhong)(zhong)，這(zhe)(zhe)樣就可(ke)以很方(fang)便的獲(huo)取到這(zhe)(zhe)些(xie)參(can)數值。

總結

上面(mian)我(wo)們(men)介紹了幾種(zhong)參(can)數傳遞的方(fang)式，也是在(zai)實際開發中最(zui)為常用的幾種(zhong)參(can)數傳遞的方(fang)式。希望能(neng)夠(gou)對(dui)大家有所幫助。