典型的前后端交互数据示例

提供几种典型的前后端交互数据示例： 前端如何组织数据，以及后端如何接收数据。

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("查询成功！");}

结果查看