Mybatis分页插件PageHelper结合前端Element中el-pagination标签实现前后台分页

前言：本篇博客主要是说明如何在后台使用Mybatis分页插件PageHelper进行数据分页，结合Element中el-pagination标签实现前台数据动态分页显示。

一。后台PageHelper使用

1.实现思路：首先在pom.xml文件导入相关依赖，然后在application.yml文件中进行相关参数配置，最后在service层调用startPage()方法进行分页处理。该PageHelper分页插件实际是一个物理分页的功能，是放在对数据库进行操作之前操作的，属于先分页再查询。

2.pom.xml文件导入依赖：

<!-- Spring Boot pagehelper 依赖 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

3.application.yml配置：

pagehelper:
  helperDialect:  mysql  
  reasonable: true  
  supportMethodsArguments:  true 
  params: count=countSql 

参数说明：

1. helperDialect: 连接数据的类型。
2. reasonable: 分页合理化参数，默认值为 false 。当该参数设置为 true 时， pageNum<=0 时会查询第一页， pageNum>pages （超过总数时），会查询最后一页。默认 false 时，直接根据参数进行查询。
3. supportMethodsArguments: 支持通过 Mapper 接口参数来传递分页参数，默认值 false ，分页插件会从查询方法的参数值中，自动根据上面 params 配置的字段中取值，查找到合适的值时就会自动分页。
4. params: 为了支持 startPage(Object params) 方法，增加了该参数来配置参数映射，用于从对象中根据属性名取值。

4.Service层：

/**
 * @author: zks
 * @create: 2020-08-12
 **/
public interface IDiscussService {

    /**
     * 根据课程科目ID，获取讨论区信息。分页处理。
     * @param courseId
     * @return
     */
    List<Map<String, Object>> listByCourseId(Integer courseId, Integer page, Integer limit, String sort, String order);


    /**
     * 获取讨论问题的数目
     * @return
     */
    long count(Integer courseId);

}

@Service
public class DiscussServiceImpl implements IDiscussService {

    private Column[] column = {Column.id, Column.title, Column.addTime};

    @Resource
    private DiscussMapper discussMapper;
    @Resource
    private CustomDiscussMapper customDiscussMapper;

    @Override
    public List<Map<String, Object>> listByCourseId(Integer courseId, Integer page, Integer limit, String sort, String order) {
        PageHelper.startPage(page, limit);
        return customDiscussMapper.queryByCourseId(courseId, sort, order);
    }

    @Override
    public long count(Integer courseId) {
        DiscussExample example = new DiscussExample();
        example.or().andCourseIdEqualTo(courseId).andLogicalDeleted(false);
        return discussMapper.countByExample(example);
    }

}

二。前台el-pagination标签使用

1.实现思路：首先我们需要拿到后台查询返回的总条数，之后设置el-pagination标签的一些属性值，比如每页显示条数，当前显示页，总条数等。再将页码数以及每页显示数当做参数传入接口进行调用，最后将接口返回数据进行页面渲染。

2.页面控件

<div class="ques-item" v-for="(question,index) in this.questionList" :key="index">
                <div class="ques-left">
                    <div class="user-box">
                        <img :src="question.userinfo.userFace" class="user-img" alt="">
                        <p class="user">{{question.userinfo.name}}</p>
                    </div>
                </div>
                <div class="ques-right">
                    <h5 class="question">{{question.title}}</h5>
                    <span class="question-con">{{question.content}}</span>
                    <div class="fix-box">
                        <div class="answer-left">
                            <span class="q-tip">回复({{question.has_replies}})</span>
                            <span class="q-tip">采纳({{question.has_adopts}})</span>
                            <span class="reply" @click="toDiscussCourseDetail(question.id,courseId)">查看全文</span>
                        </div>
                        <div class="answer-right">
                            <span class="time-tip">{{question.add_time}}</span>
                        </div>
                    </div>
                </div>
            </div>
    <el-pagination 
           background 
           layout="prev, pager, next, total" 
           :page-size="pageSize" 
           :total="countAllQuestion"
           :current-page="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
            ></el-pagination>

属性说明：

1. page-size：每页显示数。
2. total：总条数。
3. current-page：当前显示页。
4. @size-change：page-size改变时会触发的事件。
5. @current-change：current-page改变时会触发的事件。

3.data

data(){
	return{
	       countAllQuestion:0,  //某一课程下所有问题的数量
           pageSize: 3,      //每页显示数
           currentPage: 1,   //当前页
	 }
}

4.methods

methods: {
    
           // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (pagesize) {
                this.pagesize = pagesize;
                this.listByCourseId();
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                this.listByCourseId();
            },

            //分页查看某一课程下问题列表
            listByCourseId(page) {
				let params = {
					courseId: this.courseId,
                    page: this.currentPage,
                    pageSize: this.pageSize
                }
				api.listByCourseId(params).then(respond => {
					if (respond.status == 200) {
                        let respondData = respond.data;
                        this.questionList = respondData.data;
                    }
				})
            },

            //计算某一课程下所有问题的数量
            countCouserAllQuestion() {
				let params = {
					courseId: this.courseId,
				}
				api.countCouserAllQuestion(params).then(respond => {
					if (respond.status == 200) {
                        let respondData = respond.data;
                        this.countAllQuestion = respondData.data;
					}
				})
            },

}

5.created

created(){
            this.countCouserAllQuestion();
            this.listByCourseId();
            this.handleSizeChange();
            this.handleCurrentChange();
        },

三。页面显示效果