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

傷城~ 2022-12-10 03:40 111阅读 0赞

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

## 一。后台PageHelper使用 ##

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

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

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

## 三。页面显示效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwOTQ0Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5112a023a1f34936ac144149bcdb672e.png