提供幾種典型的前后端交互數據示例： 前端如何組織數據，以及后端如何接收數據。

1. POST請求+后端實體類接收

這是一個常見形式，常用于新增、編輯數據。

前端js

function sendPostAxios(){const formData = {name: 'Ayaki',age: 25,grade: 75.2,codeList: ['code01','code02','code520']}http.post("/test/insertTestOjb", formData).then(res => {console.log(res)}).catch(err => {console.log(err)})
}

后端接收

@Slf4j
@RestController
@RequestMapping("/test")
@Tag(name = "TestController", description = "測試controller")
public class TestController {@PostMapping("/insertTestOjb")public Object insertTestOjb(@RequestBody TestObj testObj) {log.info(testObj.toString());return BaseResult.successWithMessage("新增成功！");}
} 

結果查看

可以看到，后端獲取到了數據

2. GET請求+后端實體類接收

常用于list查詢頁面，前端組織查詢條件后，后端返回分頁/不分頁的列表結果

實體類中如果包含數組List，需要使用qs進行序列化

前端js

function sendGetAxios() {const formData = {name: 'Ayaki',age: 25,grade: 75.2,codeList: ['code01', 'code02', 'code520']}http.get("/test/searchList", {params: formData,paramsSerializer: params => {return qs.stringify(params, {indices: false})},}).then(res => {if (res.data.code === 200) {message.success(res.data.message);}}).catch(err => {console.log(err)})
}

后端接收

    @GetMapping("/searchList")public Object searchList(TestObj testObj) {log.info(testObj.toString());return BaseResult.successWithMessage("查詢成功！");}

結果查看

3. GET請求+后端基本類型接收

常用于查詢明細、刪除功能，傳遞一個業務主鍵值

前端js

兩種方式都可以

function sendDeleteAxios() {const formData = {bizId: 'Code00001'}http.get("/test/deleteById", {params: formData,}).then(res => {if (res.data.code === 200) {message.success(res.data.message);}}).catch(err => {console.log(err)})
}function sendDeleteAxios2() {const formData = {bizId: 'Code00001'}http.get("/test/deleteById?bizId=" + formData.bizId, {params: {},}).then(res => {if (res.data.code === 200) {message.success(res.data.message);}}).catch(err => {console.log(err)})
}

后端接收

    @GetMapping("/deleteById")public Object deleteById(String bizId) {log.info(bizId);return BaseResult.successWithMessage("查詢成功！");}

結果查看