功能实现03

9.功能08-分页显示

9.1需求分析

将查询的数据进行分页显示，要求功能如下：

1. 显示共多少条记录
2. 可以设置每页显示几条
3. 点击第几页，显示对应的数据

9.2思路分析

1. 后端使用MyBatisPlus分页插件完成查询
2. 修改FurnController，增加处理分页显示代码
3. 完成前台代码，加入分页导航，并将分页请求和后台接口结合

9.3代码实现

9.3.1分页插件

创建MyBatisPlusConfig.java，在配置类中引入MyBatis-Plus分页插件

package com.li.furn.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @author 李
 * @version 1.0
 */
@Configuration
public class MybatisPlusConfig {
    /**
     * 思路：
     * 1.注入MyBatisPlusInterceptor对象/bean
     * 2.在注入MyBatisPlusInterceptor对象对象bean中，
     *	 加入分页插件-PaginationInnerInterceptor
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        //分页需要指定数据库类型,因为不同的数据库分页的sql语句不同
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        return interceptor;
    }
}

9.3.2Controller层

修改FurnController.java，增加分页查询处理

/**
 * 分页查询的接口方法
 *
 * @param pageNo   显示第几页，默认为1
 * @param pageSize 每页显示条数，默认为5
 * @return
 */
@GetMapping("/page")
@ResponseBody
public Result listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNo,
                              @RequestParam(defaultValue = "5") Integer pageSize) {
    //通过page方法，返回page对象，给对象封装分页数据
    Page<Furn> page = furnService.page(new Page<>(pageNo, pageSize));
    return Result.success(page);
}

使用postman测试：

测试结果：

后端发出的sql：可以看到实际上mybatis-plus底层发出了两次查询，先查询总记录数，再根据总记录数来分页。

9.3.3前端代码

修改HomeView.vue，完成分页导航显示，分页请求。部分代码：

第一部分：引入组件

<!--引入分页组件-可以根据自己的需要进行定制-->
<div style="margin: 10px 0">
  <el-pagination
      @size-change="handlePageSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>

第二部分：数据池，整个分页导航的功能主要就是依赖于pageSize和total

...
data() {
  return {
    currentPage: 1,//当前页数
    pageSize: 5,//每页显示多少条记录
    total: 10,//数据总记录数
      ...
  }
},
...

第三部分：方法池

...
handlePageSizeChange(pageSize) {//处理pageSizes的修改
  this.pageSize = pageSize;
  //刷新家居列表
  this.list();
},
handleCurrentChange(pageNum) {//修改当前要显示的页数
  this.currentPage = pageNum;
  this.list();
},
list() {//显示所有家居信息,后面再进行分页和考虑检索条件
      // request.get("/api/furns").then(res => {
      //   //将返回的数据和tableData绑定
      //   this.tableData = res.data;
      // })
      request.get("/api/furnsByPage", {
        params: {//params代表请求的数据
          pageNo: this.currentPage,
          pageSize: this.pageSize
        }
      }).then(res => {
        // console.log(res)
        //将返回的数据和tableData绑定
        this.tableData = res.data.records;
        //由返回结果修改对应的total
        this.total = res.data.total;
      })
    },
...

页面结果显示：

10.功能09-带条件查询分页显示列表

10.1需求分析

如果在搜索框中根据名称查询家居，可以返回分页显示的家居列表，并且点击下一页时，显示的依然是符合条件的数据。

10.2思路分析

1. 完成从后端代码从mapper（dao层）-->Service层-->Controller层，并对代码进行测试
2. 完成前端代码，使用axios发送http请求，完成带条件查询分页显示

10.3代码实现

10.3.1Controller