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));
    }

image

注解 支持的类型 支持的请求类型 支持的Content-Type 请求示例
@PathVariable url GET 所有 /test/
@RequestParam url GET 所有 /test?id=1
@RequestBody Body POST/PUT/DELETE/PATCH json {"id" : 1}
posted @ 2024-12-20 11:16  lipu123  阅读(35)  评论(0)    收藏  举报