怎么使用Mybatisplus的分页插件来完成分页

前端使用的Elementui

后端

1.在配置里配置数据源

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/vueadmin?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
    username: root
    password: Qq702196
    driver-class-name: com.mysql.cj.jdbc.Driver

2.写一个MybatisplusConfig的类,在里面添加一个分页拦截器

package com.lzy.config;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.autoconfigure.ConfigurationCustomizer;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.BlockAttackInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import com.lzy.common.lang.Result;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;


@Configuration
@MapperScan("com.lzy.mapper")
public class MybatisPlusConfig {

    /**
     * 新的分页插件,一缓和二缓遵循mybatis的规则,
     * 需要设置 MybatisConfiguration#useDeprecatedExecutor = false
     * 避免缓存出现问题(该属性会在旧插件移除后一同移除)
     */
    @Bean
    public MybatisPlusInterceptor mybatisPlusInterceptor() {
        MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
        // 分页插件
        interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
        // 防止全表更新和删除
        interceptor.addInnerInterceptor(new BlockAttackInnerInterceptor());
        return interceptor;
    }

}

3.写在我们所需要的service中

接口中写入

    Map rolePage(Integer currentPage, Integer pageSize);

在对应的类中重写

    @Override
    public Map rolePage(Integer currentPage, Integer pageSize) {

        Page<SysUser> sysUserPage = userMapper.selectPage(new Page<>(currentPage, pageSize), null);
        //当前页数据
        List<SysUser> records = sysUserPage.getRecords();
        //总条数
        long total = sysUserPage.getTotal();
        Map map = new HashMap();
        map.put("total", total);
        map.put("records", records);
        return map;
    }

4.写在所需的Controller中

    @GetMapping("/sys/role/page")
    public Result rolePage(Integer currentPage,Integer pageSize) {
        Map map = sysUserService.rolePage(currentPage, pageSize);
        Long o = (Long) map.get("total");
        return o>0?Result.success(map):Result.fail(null);
    }

前端

1.导入Elementui的分页组件

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

2.在data里写入对应的默认数据

      total: 0,
      pageSize: 10,
      currentPage: 1,

小技巧:

我们使用分页组件时,组件会默认出现在左方,不方便看,这是可以在

 layout="->,total, sizes, prev, pager, next, jumper"

中加上->,就可以直接在右边

3.写一个方法,来对接我们刚才写的接口,并将其引用在created

    getPage() {
      this.$axios.get("/sys/role/page",{
        params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
        }
      }).then(res=>{
        if (res.data.code === 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      })
    },

  created() {
    // this.showRole()
    this.getPage();
  },

这是就会显示我们默认数据的条数

4.再写这两个方法

    handleSizeChange(val) {
      this.pageSize = val;
      this.getPage();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPage();
    },

完成