2021-11-23_学习B站Spring Boot+vue项目step007

继续昨天进行前后台交互。

改vue工程的配置文件后，需要重启。

后端成功进入断点，JSON对象发送给后台了，数据没问题，完成存入数据库。

4.2 查询

条件构造器API调用。

后端代码：

　　/**
     * 分页查询
     * @param pageNum 当前页
     * @param pageSize 每页多少条
     * @param search 前台搜索框中输入的内容
     */
    @GetMapping
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum,
                              @RequestParam(defaultValue = "10") Integer pageSize,
                              @RequestParam(defaultValue = "") String search){
        // com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper
        // com.baomidou.mybatisplus.core.toolkit.Wrappers
        LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();
        // cn.hutool.core.util.StrUtil hutool工具类
        if (StrUtil.isNotBlank(search)) {
            wrapper.like(User::getNickName, search);
        }
        // com.baomidou.mybatisplus.extension.plugins.pagination.Page
        Page<User> userPage = userService.page(new Page<>(pageNum, pageSize), wrapper);
        return Result.success(userPage);
    }

浏览器里直接访问

http://localhost:9090/user?pageNum=1&pageSize=10&search=

页面显示结果：

{
    "code": "0",
    "msg": "成功",
    "data": {
        "records": [{
            "id": 1,
            "username": "1",
            "password": null,
            "nickName": null,
            "age": 1,
            "sex": "男",
            "address": "1"
        }, {
            "id": 2,
            "username": "2",
            "password": null,
            "nickName": "2",
            "age": 2,
            "sex": "女",
            "address": "2"
        }],
        "total": 2,
        "size": 10,
        "current": 1,
        "orders": [],
        "optimizeCountSql": true,
        "searchCount": true,
        "countId": null,
        "maxLimit": null,
        "pages": 1
    }
}

如上图，查询方法后端调通了。

 下一步要进行的是前端数据渲染，进行到视频P3的32:51。