分页功能的实现，结合MyBatis-Plus&Vue

分页功能的实现

下面将给出一个示例，这个示例演示了前后端分页的实现方式，集成了MyBatis-Plus以在服务器端进行员工信息的分页，并利用Vue.js结合Element UI分页组件在客户端进行分页。前端和后端之间的通信通过Axios处理异步请求。

• MybatisPlusConfig配置类：

  /**
   * 配置MP的分页插件
   */
  @Configuration
  public class MybatisPlusConfig {
          @Bean
          public MybatisPlusInterceptor mybatisPlusInterceptor() {
              MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();
              mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());
              return mybatisPlusInterceptor;
          }
  }
  

  该配置类配置了MyBatis Plus的分页插件，使用PaginationInnerInterceptor作为分页的内部拦截器。

  该函数的功能和实现过程：

  • @Configuration: 这个注解表明这是一个配置类，Spring Boot 在应用启动时会加载它，用于配置一些相关的 bean。

  • @Bean: 这个注解用于声明一个 bean，该方法返回的对象将被 Spring 容器管理。

  • public MybatisPlusInterceptor mybatisPlusInterceptor(): 这个方法，返回一个 MybatisPlusInterceptor 对象。该对象是 MyBatis-Plus 提供的分页插件的核心配置类。

  • MybatisPlusInterceptor mybatisPlusInterceptor = new MybatisPlusInterceptor();: 创建一个 MybatisPlusInterceptor 对象。

  • mybatisPlusInterceptor.addInnerInterceptor(new PaginationInnerInterceptor());: 向 MybatisPlusInterceptor 对象中添加一个内部拦截器，这里使用的是 PaginationInnerInterceptor。这个内部拦截器是 MyBatis-Plus 分页插件的具体实现，它会拦截 SQL 查询，并在查询中添加分页的相关逻辑。

  • return mybatisPlusInterceptor;: 将配置好的 MybatisPlusInterceptor 对象返回，以便被 Spring 容器管理。

• 前端Vue组件：

  <el-pagination
          class="pageList"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          :current-page.sync="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
  

  前端使用Element UI的el-pagination组件进行分页展示，通过page-size、counts、page等属性来控制分页状态，同时监听size-change和current-change事件来处理分页大小和当前页码的变化。

• 前端事件处理方法：

   handleSizeChange (val) {
              this.pageSize = val
              this.init()
            },
  handleCurrentChange (val) {
              this.page = val
              this.init()
            }
  

  前端定义了处理分页大小变化和当前页码变化的事件方法，分别调用init方法进行数据重新加载。

• 前端数据初始化方法：

  async init () {
              const params = {
                page: this.page,
                pageSize: this.pageSize,
                name: this.input ? this.input : undefined
              }
              await getMemberList(params).then(res => {
                if (String(res.code) === '1') {
                  this.tableData = res.data.records || []
                  this.counts = res.data.total
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            }
  

  init方法负责调用后端接口获取分页数据，并更新前端展示的数据和分页信息。

  这个函数的功能是通过调用 getMemberList 函数获取成员列表的数据，并根据响应结果更新组件的状态，包括 this.tableData 和 this.counts。如果请求出错，会显示错误消息。这样的初始化函数通常用于在组件加载时获取初始数据。

• 前端异步请求函数

  function getMemberList (params) {
    return $axios({
      url: '/employee/page',
      method: 'get',
      params
    })
  }
  

  用于向后端请求员工信息的分页数据。该函数使用axios库发送HTTP GET请求到指定的后端接口/employee/page，并携带了前端传递的参数params，包括page（当前页码）、pageSize（每页数据量）和name（可能的员工姓名过滤条件）。

• 后端Spring Boot Controller方法：

  /**
       * 员工信息分页查询
       * @param page
       * @param pageSize
       * @param name
       * @return
       */
      @GetMapping("/page")
      public R<Page>  page(int page, int pageSize, String name){     //Page是MP封装好的类
          log.info("page = {}, pageSize = {}, name = {}", page, pageSize, name);
  
          //构造分页构造器
          Page pageInfo = new Page<>(page, pageSize);
  
          //构造条件构造器
          LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();
          //添加过滤条件
          queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name);
          //添加排序条件
          queryWrapper.orderByDesc(Employee::getUpdateTime);
  
          //执行查询
          employeeService.page(pageInfo, queryWrapper);
  
          return R.success(pageInfo);
      }
  

  后端Controller定义了一个分页查询接口，接收前端传递的分页参数和查询条件，构造MyBatis Plus的Page对象和LambdaQueryWrapper条件构造器，然后调用Service层的page方法执行查询，并将查询结果返回给前端。

  该函数的功能和实现过程：

  • @GetMapping("/page"): 这是一个处理 HTTP GET 请求的注解，映射到路径 “/page”。表示该方法用于处理获取分页数据的请求。

  • public R<Page> page(int page, int pageSize, String name): 方法声明，接受三个参数，分别是页码 page、每页大小 pageSize 和员工名字 name。返回类型是一个泛型 R，其中包装了一个 Page 对象。R 可能是一个自定义的响应类，用于封装接口返回结果。

  • Page pageInfo = new Page<>(page, pageSize): 创建一个 MyBatis-Plus 提供的 Page 对象，用于封装分页信息，包括页码和每页大小。

  • LambdaQueryWrapper<Employee> queryWrapper = new LambdaQueryWrapper();: 创建一个 MyBatis-Plus 提供的 LambdaQueryWrapper 对象，用于构造查询条件。

  • queryWrapper.like(StringUtils.isNotEmpty(name), Employee::getName, name): 添加一个条件，如果员工名字不为空，则添加一个模糊查询条件，根据名字过滤员工信息。

  • queryWrapper.orderByDesc(Employee::getUpdateTime): 添加排序条件，按照员工信息的更新时间降序排序。

  • employeeService.page(pageInfo, queryWrapper): 调用 employeeService 的 page 方法执行分页查询，将查询结果封装到 pageInfo 对象中。