axios&spring前後端分離傳參規範總結
前後端分離開發的場景下,開發人員的工作內容更加專註與專業,但是也產生了一些額外的溝通成本。比如:本文中為大家說明的前後端參數傳遞與接受方法。本文主要是面對前端使用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