关于在mybatis+分页插件的编写

        当后端的表格数据过多时前端的页面会被拉的很长，在前端页面中只有的设计是一种很不美观的设计，相信新手小白肯定也为此苦恼过，为了解决这个问题我们可以引入分页插件来对数据进行处理分页，首先在后端中写好分页插件

举个例子，首先先在后端创建一个common目录，编写 MybatisPlusConfig类，内容如下

package com.example.demo.common;

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

//mybatis-plus 分页插件
@Configuration
@MapperScan("com.example.demo.mapper")
public class MybatisPlusConfig {

//    分页插件
@Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor()
{
    MybatisPlusInterceptor interceptor=new MybatisPlusInterceptor();
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
    return interceptor;
}
}

然后在user控制层中编写方法findPage

 @GetMapping  //分页模糊查询
    public Result<?> findPage(@RequestParam(defaultValue = "1") Integer pageNum, // 默认页数pageNum为1，
                              @RequestParam(defaultValue = "10") Integer pageSize, //默认每页的条数pageSize为10,
                              @RequestParam(defaultValue = "") String search)    //默认（查询关键字search）为空

    {
        System.out.println(search);
        IPage<User> userPage = new Page<>(pageNum, pageSize);
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.like(!"".equals(search), User::getNickName, search);
        //接口复用，动态SQL语句查询，给关键词即为模糊查询，不给即为默认查询全部
        userService.page(userPage, wrapper);
        return Result.success(userPage);
        //eq ，mybatis里相等的意思,eq代码的意思是如果输入的关键字search与用户的昵称相等时


    }

在前端中编写分页组件

 <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 7, 10, 13]"
          :page-size="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

添加属性

 

编写方法

    handleSizeChange(pageSize) {    //改变当前每页的个数触发
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      //改变当前页面触发
      this.currentPage = pageNum
      this.load()
    }

最后在初始化方法体中 赋值

 以上就是分页插件的配置流程了

以上内容仅为学习经验分享，仅供参考，若有错误恳请指正，就酱~