react+springboot+mybatis小demo,遇到的问题
前端和后端连接
在解决分页的时候,需要前端需要传多个参数,假如传一个参数的时候,就是删除的时候,需要传一个id。
删除前端:
//删除学生
const removeStudent = (index) => {
const id = tableData[index].stuId;
request.post(`/student/deleteById?id=${id}`).then(res => {
if(res.data.code === 200){
console.log('删除学生成功');
getStudentList(); // 刷新学生列表
}
})
.catch(error => {
console.error('POST 请求错误:', error);
});
}
后端:
@PostMapping("/deleteById")
public ResponseResult<Integer> deleteById(@RequestParam Integer id){
return ResponseResult.success(iStudentService.deleteById(id));
}
然后就是分页的时候需要传多个参数
这里有两种方法:
方法一
前端:
request.post(`/student/page?pageNum=${currentPage}&pageSize=${pageSize}&stuName=${searchName}`)
.then(res => {
if (res.data.code === 200) {
setTableData(res?.data?.data?.records);
setTotal(res?.data?.data?.total);
}
})
.catch(error => {
console.error('POST 请求错误:', error);
});
后端:
//主页和分页查找
@PostMapping("/page")
public ResponseResult<IPage> findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String stuName) {
QueryWrapper<Student> queryWrapper = new QueryWrapper<>();
if (!"".equals(stuName)) {
queryWrapper.like("stdName", stuName);
}
queryWrapper.orderByDesc("stdId");
IPage page= (IPage) new Page<Student>(pageNum, pageSize);
return ResponseResult.success(iStudentService.page(page,queryWrapper));
}
方法二
前端
//获取全部的学生列表
const getStudentList = () => {
request.post('/student/page',{
pageNum: currentPage,
pageSize: pageSize,
stuName: searchName|| ''
}).then(res => {
if(res.data.code === 200){
setTableData(res?.data?.data?.records||[]); // 根据后端返回的实际字段调整
setTotal(res?.data?.data?.total||0);
}
})
.catch(error => {
console.error('POST 请求错误:', error);
});
}
后端
@PostMapping("/page")
public ResponseResult<IPage> findPage(@RequestBody Map<String, Object> params) {
Integer pageNum = (Integer) params.get("pageNum");
Integer pageSize = (Integer) params.get("pageSize");
String stuName = (String) params.getOrDefault("stuName", "");
QueryWrapper<Student> queryWrapper = new QueryWrapper<>();
if (!"".equals(stuName)) {
queryWrapper.like("stu_name", stuName);
}
queryWrapper.orderByDesc("stu_id");
return ResponseResult.success(iStudentService.page(new Page<>(pageNum, pageSize),queryWrapper));
}
注解 | 支持的类型 | 支持的请求类型 | 支持的Content-Type | 请求示例 |
---|---|---|---|---|
@PathVariable | url | GET | 所有 | /test/ |
@RequestParam | url | GET | 所有 | /test?id=1 |
@RequestBody | Body | POST/PUT/DELETE/PATCH | json | {"id" : 1} |