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

本文主要是介绍怎么使用Mybatisplus的分页插件来完成分页，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端使用的Elementui

后端

1.在配置里配置数据源

spring:datasource:url: jdbc:mysql://localhost:3306/vueadmin?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTCusername: rootpassword: Qq702196driver-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* 避免缓存出现问题(该属性会在旧插件移除后一同移除)*/@Beanpublic 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);

在对应的类中重写

    @Overridepublic 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();},

完成

这篇关于怎么使用Mybatisplus的分页插件来完成分页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---