【金秋打卡】第11天 单表管理功能前后端开发

课程名称：Spring Cloud+ Vue前后端分离开发企业级在线视频系统

课程章节：第5章 单表管理功能前后端开发

讲师姓名：甲蛙老师

课程内容：

①分页功能的开发：集成分页插件pagehelper，注意页码从1开始，分页参数前后端交互，并增加刷新功能

②前端分页组件的使用：增加分页组件pagination.vue并在大章管理页面使用该分页组件，可自定义初始每页5条，最多显示8个按钮

课程收获：

使用分页插件首先要引入依赖：

<!-- mybatis分页插件pagehelper -->
<dependency>
     <groupId>com.github.pagehelper</groupId>
     <artifactId>pagehelper-spring-boot-starter</artifactId>
     <version>1.2.10</version>
 </dependency>

使用方法也很简单

PageHelper.startPage(1, 1);

（在这句代码下的第一个操作mapper的SQL语句之后添加LIMIT）

分页参数前后端交互：

list(page) {
   let _this = this;
_this.$axios.get('http://127.0.0.1:9000/business/admin/chapter/list', {
     params: {
       page: page,
       size: _this.$refs.pagination.size
     }
   }).then((response) => {
     console.log("查询大章列表结果：", response);
     _this.chapters = response.data.list;
     _this.$refs.pagination.render(page, response.data.total);
   })
 }

新建PageDto，由前端传入当前页码与每条页数，由分页插件控制总条数和页内容。

分页组件代码

<template>
   <div class="pagination" role="group" aria-label="分页">
     <button type="button" class="btn btn-default btn-white btn-round"
             v-bind:disabled="page === 1"
             v-on:click="selectPage(1)">
       1
     </button>
     <button type="button" class="btn btn-default btn-white btn-round"
             v-bind:disabled="page === 1"
             v-on:click="selectPage(page - 1)">
       上一页
     </button>
     <button v-for="p in pages" v-bind:id="'page-' + p"
             type="button" class="btn btn-default btn-white btn-round"
             v-bind:class="{'btn-primary active':page == p}"
             v-on:click="selectPage(p)">
       {{ p }}
     </button>
     <button type="button" class="btn btn-default btn-white btn-round"
             v-bind:disabled="page === pageTotal"
             v-on:click="selectPage(page + 1)">
       下一页
     </button>
     <button type="button" class="btn btn-default btn-white btn-round"
             v-bind:disabled="page === pageTotal"
             v-on:click="selectPage(pageTotal)">
       {{ pageTotal || 1 }}
     </button>
     &nbsp;
     <span class="m--padding-10">
         每页
         <select v-model="size">
             <option value="1">1</option>
             <option value="5">5</option>
             <option value="10">10</option>
             <option value="20">20</option>
             <option value="50">50</option>
             <option value="100">100</option>
         </select>
         条，共【{{ total }}】条
     </span>
   </div>
 </template>

 <script>
export default {
   name: 'pagination',
   props: {
     list: {
       type: Function,
       default: null
     },
     itemCount: Number // 显示的页码数，比如总共有100页，只显示10页，其它用省略号表示
   },
   data: function () {
     return {
       total: 0, // 总行数
       size: 10, // 每页条数
       page: 0, // 当前页码
       pageTotal: 0, // 总页数
       pages: [], // 显示的页码数组
     }
   },
   methods: {
     /**
      * 渲染分页组件
      * @param page
      * @param total
      */
     render(page, total) {
       let _this = this;
       _this.page = page;
       _this.total = total;
       _this.pageTotal = Math.ceil(total / _this.size);
       _this.pages = _this.getPageItems(_this.pageTotal, page, _this.itemCount || 5);
     },

     /**
      * 查询某一页
      * @param page
      */
     selectPage(page) {
       let _this = this;
       if (page < 1) {
         page = 1;
       }
       if (page > _this.pageTotal) {
         page = _this.pageTotal;
       }
       if (this.page !== page) {
         _this.page = page;
         if (_this.list) {
           _this.list(page);
         }
       }
     },

     /**
      * 当前要显示在页面上的页码
      * @param total
      * @param current
      * @param length
      * @returns {Array}
      */
     getPageItems(total, current, length) {
       let items = [];
       if (length >= total) {
         for (let i = 1; i <= total; i++) {
           items.push(i);
         }
       } else {
         let base = 0;
         // 前移
         if (current - 0 > Math.floor((length - 1) / 2)) {
           // 后移
           base = Math.min(total, current - 0 + Math.ceil((length - 1) / 2)) - length;
         }
         for (let i = 1; i <= length; i++) {
           items.push(base + i);
         }
       }
       return items;
     }
   }
 }
 </script>

 <style scoped>
 .pagination {
   vertical-align: middle !important;
   font-size: 16px;
   margin-top: 0;
   margin-bottom: 10px;
 }

 .pagination button {
   margin-right: 5px;
 }

 .btn-primary.active {
   background-color: #2f7bba !important;
   border-color: #27689d !important;
   color: white !important;
   font-weight: 600;
 }

/*.pagination select {*/
 /*vertical-align: middle !important;*/
 /*font-size: 16px;*/
 /*margin-top: 0;*/
 /*}*/
</style>