PageHelper + Mybatis 实现分页

PageHelper + Mybatis 搭配Vue-Element-UI 

前端：使用分页组件<el-pagination>

<template>         
 <el-table v-loading="loading" :data="tableData" highlight-current-row size="small" style="width: 100%;">
            <el-table-column :label="$t('table.id')" type="index" min-width="5%" align="center" v-if="false"/>
            <el-table-column width="120px" prop="subTime" label="统计日期" align="center"/>

            <el-table-column v-for="item in columnOptions" :label="item.value" :key="item.id" :property="item.id"
                             align="center" width="65">
              <el-table-column min-width="10%" v-for="ccitem in ccOptions" :label="ccitem.value"
                               :key="ccitem.id" :property="ccitem.id" align="center">
                <template slot-scope="scope">
                  <span>{
   
   { scope.row["data"][item.id][scope.column.property] }}</span>
                </template>
              </el-table-column>

            </el-table-column>

          </el-table>
          <!--分页组件-->
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryParams.total">
          </el-pagination>
</template>
<script>
    export default {
        data() {
            return {
                loading: false,
                queryParams: {
                    groupCode: this.groupCode,
                    costDate: null,
                    groupId: this.groupId,
                    applicationCode: null,
                    startTime: null,
                    endTime: null,
                    pageNum: 0,
                    pageSize: 10,
                    total:null,
                },
                tableData: []}
},
        created() {
            this.$nextTick(() => {
            })
        },
        computed: {
        },
        watch: {
            //延时查询
            'queryParams.groupCode': debounce(function () {
                //以下两行解决结果表格数据不被刷新
                this.columnOptions = []
                this.tableData = []
                this.init();
            }, 500)},
        methods: {
            getData() {
                this.loading = true
                groupApi.getCost(this.queryParams).then(res => {
                    this.tableData = res.result.list
                    //设置total 确保分页插件<el-pagination>能正确更新
                    this.queryParams.total = Number(res.result.total)
                    this.loading = false
                }).catch(err => {
                    this.loading = false
                })
            },
            //分页
            handleSizeChange(val) {
                this.queryParams.pageSize = val;
                this.getData();
            },
            handlePageChange(val) {
                this.queryParams.pageNum = val;
                this.getData();
            }

}


}
</script>

后端：使用PageHelper + Mybatis做分页查询与封装

单独使用Mybatis分页则查询结果为全部List以及详细的分页信息，

PageHelper + Mybatis搭配使用则只返回对应分页区间段的数据以及详细分页信息

package com.example.demo.controller;

import com.example.demo.common.utils.PublicUtil;
import com.example.demo.common.wrapper.WrapMapper;
import com.example.demo.common.wrapper.Wrapper;
import com.example.demo.model.domain.AccountExpendDo;
import com.example.demo.model.dto.AccountExpendDto;
import com.example.demo.model.vo.AccountExpendVo;
import com.example.demo.service.AccountExpendService;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.google.common.base.Preconditions;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
import java.util.List;

/**
 * @Description  账户支出
 * @Author Zxl
 * @Date 2019/9/16
 * @Version 1.0
 **/
@RestController
@RequestMapping(value = "/accountExpend", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public class AccountExpendController {
    @Resource
    private AccountExpendService accountExpendService;

    /**
     * 查询单个.
     *
     * @param accountExpendDto
     * @return 单个DO(领域对象 ， 在此也即为持久化对象原型)
     */
    @PostMapping(value = "/queryOne")
    public Wrapper queryOne(@RequestBody AccountExpendDto accountExpendDto) {
        Preconditions.checkArgument(PublicUtil.isNotEmpty(accountExpendDto.getOpenId()), "openId不能为空");
        AccountExpendDo accountExpendDo = accountExpendService.selectOne(accountExpendDto);
        return WrapMapper.ok(accountExpendDo);
    }

    /**
     * 查询多个.(Page分页封装)
     *
     * @param accountExpendDto
     * @return 多个VO(针对页面的特殊封装格式)
     */
    @PostMapping(value = "/queryList")
    public Wrapper queryList(@RequestBody AccountExpendDto accountExpendDto) {

        PageHelper + Mybatis实现分页（如要取消分页返回全部数据，请删除当前PageHelper设置，同时把查询参数的pageNum和pageSize属性置为null）
        //PageHelper分页:将作用于下面紧跟的第一条sql查询语句
        PageHelper.startPage(accountExpendDto.getPageNum(), accountExpendDto.getPageSize());
        //Mybatis分页：AccountExpendDto由于继承了BaseQuery而含有了pageNum和pageSize属性，拥有这两个属性后在Mybatis分页插件作用下将返回分页信息（如果查询操作之前不设置PageHelper分页，则查询结果包括全部List以及分页所需的total,pageNum，pageSize，startRow,endRow等等信息,也就是说返回的数据是完整的，只不过另外包含了详细的分页信息，然后根据分页信息就可以灵活取用对应的数据），若查询操作之前设置了PageHelper则只返回对应区间段的数据（不返回全部数据请注意，另外也不用担心分页信息，会自动设置）
        List<AccountExpendVo> list = accountExpendService.queryList(accountExpendDto);
        PageInfo<AccountExpendVo> pageInfo = new PageInfo<>(list);
        return WrapMapper.ok(pageInfo);
    }

    /**
     * 插入.
     *
     * @param accountExpendDto
     * @return
     */
    @PostMapping(value = "/save")
    public Wrapper save(@RequestBody AccountExpendDto accountExpendDto) {
        int state = accountExpendService.save(accountExpendDto);
        return WrapMapper.ok(state);
    }
}