一、分页功能

具体可以查看第02讲：uni-pagination实现表格分页查询_萧篱衣的博客-CSDN博客

1. 页面使用el分页组件添加分页功能

<!--分页组件-->
    <div class="pagination-container">
         <el-pagination
             class="pagiantion"
             @current-change="handleCurrentChange"
             :current-page="pagination.currentPage"
             :page-size="pagination.pageSize"
             layout="total, prev, pager, next, jumper"
             :total="pagination.total">
         </el-pagination>
    </div>

2. 定义分页组件需要使用的数据并将数据绑定到分页组件

        data:{
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:8,//每页显示的记录数
                total:0,//总记录数
            }
        },

3. 替换查询全部功能为分页功能

            //分页查询
            getAll() {
                axios.get("/books/" + this.pagination.currentPage + "/" + this.pagination.pageSize + paramStr).then(res => {
                });
            },

4. 分页查询

 @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
        IPage<Book> pageBook = bookService.getPage(currentPage,pageSize);
        return new R(null != pageBook,pageBook);
    }

5. 加载分页数据

//分页查询
getAll() {
   axios.get("/books/" + this.pagination.currentPage + "/" + this.pagination.pageSize + paramStr).then(res => {
    // console.log(res.data);
    this.pagination.currentPage = res.data.data.current;
    this.pagination.pageSize = res.data.data.size;
    this.pagination.total = res.data.data.total;
    this.dataList = res.data.data.records;
   });
 },

6. 分页页码值切换

            //切换页码
            handleCurrentChange(currentPage) {
                // 修改页码值为当前选中的页码值
                this.pagination.currentPage = currentPage;
                // 执行查询
                this.getAll();
            },

7. bug

对查询结果进行校验，如果当前页码值大于总页码值，使用最大页码值作为当前页码值重新查询。这是一种补救方法。

    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize){
        IPage<Book> pageBook = bookService.getPage(currentPage,pageSize);
        //如果当前页码值大于总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
        if (currentPage > pageBook.getPages()){
            pageBook = bookService.getPage((int) pageBook.getPages(),pageSize);
        }
        return new R(true,pageBook);
    }

8. 测试

二、查询功能

1. 查询条件数据封装

pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:8,//每页显示的记录数
                total:0,//总记录数
                type: "",
                name: "",
                description: ""
            }

2. 页面数据模型绑定

<div class="filter-container">
    <el-input v-model="pagination.type" placeholder="图书类别" style="width: 200px;" class="filter-item"></el-input>
    <el-input v-model="pagination.name" placeholder="图书名称" style="width: 200px;" class="filter-item"></el-input>
    <el-input v-model="pagination.description" placeholder="图书描述" style="width: 200px;" class="filter-item"></el-input>
    <el-button @click="getAll()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>
</div>

3. 组织数据成为get请求发送的数据

getAll() {
    // 组织参数，拼接url请求地址
    var paramStr = "?name=" + this.pagination.name
                   + "&type=" + this.pagination.type
                   + "&description=" + this.pagination.description;
    console.log(paramStr);
    axios.get("/books/" + this.pagination.currentPage + "/" + this.pagination.pageSize + paramStr).then(res => {
     // console.log(res.data);
        this.pagination.currentPage = res.data.data.current;
        this.pagination.pageSize = res.data.data.size;
        this.pagination.total = res.data.data.total;
        this.dataList = res.data.data.records;
    });
},

4. controller接收参数

    @GetMapping("{currentPage}/{pageSize}")
    public R getPage(@PathVariable int currentPage,@PathVariable int pageSize,Book book){

        IPage<Book> pageBook = bookService.getPage(currentPage,pageSize,book);
        //如果当前页码值大于总页码值，那么重新执行查询操作，使用最大页码值作为当前页码值
        if (currentPage > pageBook.getPages()){
            pageBook = bookService.getPage((int) pageBook.getPages(),pageSize,book);
        }
        return new R(true,pageBook);
    }

5. 业务层接口功能开发

IPage<Book> getPage(int currentPage, int pageSize, Book book);

@Override
public IPage<Book> getPage(int currentPage, int pageSize, Book book) {
LambdaQueryWrapper<Book> lambdaQueryWrapper = new LambdaQueryWrapper<Book>();
lambdaQueryWrapper.like(Strings.isNotEmpty(book.getType()),Book::getType,book.getType());
lambdaQueryWrapper.like(Strings.isNotEmpty(book.getName()),Book::getName,book.getName());
lambdaQueryWrapper.like(Strings.isNotEmpty(book.getDescription()),Book::getDescription,book.getDescription());

        IPage page = new Page(currentPage,pageSize);
        baseMapper.selectPage(page,lambdaQueryWrapper);
        return page;
}