element-ui+mybatis-plus+springboot解决IPage分页问题

简介

本文应用于ssm框架，解决controller接口返回mybatis-plus封装的IPage类型与Vue.element-ui前端的接收与分页

mybatis-plus中的IPage与Page类

首先上源码(部分)
接口Ipage类型：
Ipage部分源码
IPage的实现类Page:

源码可见Page是IPage的实现类，可见想使用mybatis-plus的封装分页则要明白Page类的属性
Page类的属性介绍：
records 用来存放查询出来的数据
total 返回记录的总数
size 每页显示条数，默认 10
current 当前页,默认1
orders 排序字段信息
optimizeCountSql 自动优化 COUNT SQL,默认true
isSearchCount 是否进行 count 查询,默认true
hitCount 是否命中count缓存,默认false

实战实现

后端接口：

@GetMapping("/getOtherWorkList")
    public IPage<Work> getOtherWorkByParam(@RequestParam long size, @RequestParam long current, HttpServletRequest request, WorkParam workParam) throws Exception {
        TokenUtil tokenUtil = new TokenUtil();
        String userId = tokenUtil.getRequestToken(request, redisService);
        Page<Work> page = new Page<>();
        page.setCurrent(current);
        page.setSize(size);
        Page<Work> workPage = workService.page(page,Wrappers.<Work>lambdaQuery()
                .eq(!workParam.getTitle().isEmpty() && !workParam.getTitle().equals(""), Work::getTitle, workParam.getTitle())
                .eq(workParam.getStatus()!=null, Work::getStatus, workParam.getStatus())
                .eq(workParam.getType() != null, Work::getType, workParam.getType())
                .ne(userId!=null, Work::getUserId, userId)
                .between(workParam.getStartDate() != null && workParam.getStartDate().before(workParam.getEndDate()), Work::getCreateDate, workParam.getStartDate(), workParam.getEndDate()));
        return workPage;
    }

形参中size和current分别代表每页容量、当前页与Page类中属性名对应，形参能使用参数Page page更好，request用户获取请求头token验证登录用户，workParm为查询条件为前端table传来的检索条件

方便理解可以简化成以下代码

@GetMapping("/getOtherWorkList")
    public IPage<Work> getOtherWorkByParam(Page<Work> page){
        Page<Work> workPage = workService.page(page);
        return workPage;
    }

前端请求发送与数据分页

前端分页

分页组件：

<div class="pagination">
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
    </el-pagination>
</div>

table组件与处理数据分页:
注意：

1	:data="records.slice((page.current-1)page.size,page.currentpage.size)"

请务必加上，page.current和page.size取决于你自己vue定义的数据属性

<el-table
               :data="records.slice((page.current-1)*page.size,page.current*page.size)"
               border
               class="table"
               ref="multipleTable"
               header-cell-class-name="table-header"
               @selection-change="handleSelectionChange"
           >

Vue定义绑定数据:
注意：Page数据在records中，注意看Page源码属性类型介绍

data() {
        return {
            tableData: [],
            records: [],
            multipleSelection: [],
            page: {
                size: 1,
                current: 1
            },
            workParam: {},
        };

Vue请求发送与接收数据:

created() {
       this.getData();
   },
   methods: {
       // 获取 easy-mock 的模拟数据
       async getData() {
           this.$http
           .get(`/api/work/getOtherWorkList`, {
           params: {
               size: this.page.size,
               current: this.page.current
           },
           headers: {
           token: this.token,
           },
           })
           .then((response) => {
               this.records = response.data.records;
               console.log(this.records);
               this.pageTotal = response.data.total;
               console.log(this.pageTotal);
           })
       },

选择页面size事件方法

handleSizeChange(newSize){
    console.log(newSize)
    this.page.size = newSize;
    console.log(`目前页面容量`+this.query.pageSize)
    this.getData()
},

选择页码事件方法

handleCurrentChange(newPage){
    console.log(newPage)
    this.page.current = newPage;
    this.getData()
},

实现效果展示

分页1
分页2
分页3

后端分页

数据量较大每次由后端分页并发送给前端

后端分页代码发送前端数据代码

/*
** PageUtil.listToPage()方法作用为将list转化为Page类对象
*/
@GetMapping("/noParams/getTableDataChartData")
public Page<BidInfor> getTableData(){
    EchartsVo echartsVo = new EchartsVo();
    // 查看redis缓存
    if (redisService.get(Constant.REDIS_CACHE_SYS_NO_PARAMS_TABLE_CHARTS) != null) {
        String echartsVojSON = redisService.get(Constant.REDIS_CACHE_SYS_NO_PARAMS_TABLE_CHARTS).toString();
        echartsVo = JSONObject.parseObject(echartsVojSON, EchartsVo.class);
        List<BidInfor> bidInforList = echartsVo.getTableData();
        return PageUtil.listToPage(bidInforList, 1, 100);
    }
    List<BidInfor> bidInforList = bidInforService.tableDataOrderByAmount();
    echartsVo.setTableData(bidInforList);
    redisService.set(Constant.REDIS_CACHE_SYS_NO_PARAMS_TABLE_CHARTS, echartsVo);
    return PageUtil.listToPage(bidInforList, 1, 100);
}

/*
** 简化代码
*/
@GetMapping("/noParams/getTableDataChartData")
public Page<BidInfor> getTableData(){
    List<BidInfor> bidInforList = bidInforService.tableDataOrderByAmount();
    return PageUtil.listToPage(bidInforList, 1, 100);

前端部分

      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[100, 500, 1000]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
        >
        </el-pagination>
      </div>



data() {
  return {
        records: [],
        pageTotal: null,
        total: null,
        page: {
          size: 100,
          current: 1
        }
    }
}

methods: {
    handleCurrentChange(newPage) {
    console.log(newPage)
    this.page.current = newPage
    this.likeSearch()
  }

    likeSearch() {
    this.$axios
      .post('/xxxxx, {
        frontParamVo: this.frontParamVo,
        current: this.page.current,
        size: this.page.size,
        dataType: 'json',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      })
      .then(res => {
        res = res.data
        this.records = []
        this.records = res.records
        this.pageTotal = res.total
      })
      .catch(error => {
        console.log(error)
      })
  },
}

This is copyright.

...

00:00

element-ui+mybatis-plus+springboot解决IPage分页问题