前后端分離開發的場景下，開發人員的作業內容更加專注與專業，但是也產生了一些額外的溝通成本，比如：本文中為大家說明的前后端引數傳遞與接受方法，本文主要是面對前端使用axios，后端使用Spring進行引數接受的情況進行說明，在使用spring的時候，與前端配合開發，容易出現傳參歧義的2個注解是
@RequestParam注解，默認接收Content-Type: application/x-www-form-urlencoded編碼格式的資料@RequestBody注解，默認接收JSON型別格式的資料，
很多的文章列舉出引數傳遞失敗的問題解決方案，在我看來都不夠全面，在此我給大家總結一下
一、@RequestParam注解對應的axios傳參方法
以下面的這段Spring java代碼為例，介面使用POST協議，需要接受的引數分別是tsCode、indexCols、table，針對這個Spring的HTTP介面，axios該如何傳參？有幾種方法？我們來一一介紹，
@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestParam String tsCode,
@RequestParam String indexCols,
@RequestParam String table){
1.1.params傳參(推薦)
使用axios實體的params進行傳參，就會將params引數格式化為x-www-form-urlencoded的格式，與后端引數一一對應即可傳參成功，這也是我向大家推薦的傳參方法！
return request({
url: '/chart/line',
method: 'post',
params: { //注意這里的key是params
tsCode,
indexCols,
table
}
})
1.2.FormData傳參
還可以使用js的FormData物件進行引數格式化，同樣可以在Spring后端正確的使用@RequestParam注解進行引數接收，
let params = new FormData();
params.append('tsCode', tsCode);
params.append('indexCols', indexCols);
params.append('table', table);
return request({
url: '/chart/line',
method: 'post',
data: params //注意這里的key是data
})
1.3.qs.stringfy傳參
還可以使用qs.stringfy進行引數格式化，同樣可以在Spring后端正確的使用@RequestParam注解進行引數接收，
import qs from "qs";
return request({
url: '/chart/line',
method: 'post',
data: qs.stringify({ //注意這里的key是data
tsCode,
indexCols,
table
})
})
需要注意的是使用這種方法，需要手動設定header(Content-Type)
const service = axios.create({
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
二、@RequestBody的axios傳參方法
java代碼部分如下所示，DemoModel類是一個物體類，包含名稱tsCode,indexCols,table三個字串成員變數，接收到的JSON格式引數會自動為demo物件的成員變數賦值，
@PostMapping("/line")
public List<? extends BaseEntity> commonEChart(@RequestBody DemoModel demo){
@RequestBody注解，默認接收JSON型別格式的資料，在axios中默認data傳參就會默認使用JSON資料格式，所以不用額外的特殊處理，
return request({
url: '/chart/line',
method: 'post',
data: { //注意這里的key是data
tsCode,
indexCols,
table
}
})
字母哥博客：zimug.com
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/500705.html
標籤：其他
上一篇：Python基礎-23列舉
下一篇：Codeforces CodeTON Round 2 (Div. 1 + Div. 2, Rated, Prizes!) A-D 題解