6.pagehelper+el-pagination

因为在项目中有很多视频展示模块,都会用到分页查询,所以使用pageHelper和el-pagination进行实现,参考博客

• 后端部分,以分页查看BATB视频为例

  • 添加pom依赖

    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.10</version>
    </dependency>
    

  • Controller部分

    @Controller
    @RequestMapping("/batb")
    public class BatbController {
    
        @Resource
        private BatbService batbService;
    
        @RequestMapping(value = "/batbInfo.do", method = RequestMethod.GET)
        @ResponseBody
        @CrossOrigin
        public PageInfo<Batb> batbInfoService(int pageNum, int pageSize) {
    
            // 1.通过调用 PageHelper 的静态方法开始获取分页数据
            //指定当前第几页以及每页显示的条数
            PageHelper.startPage(pageNum, pageSize);
    
            // 2. 获得所有的商品记录
            List<Batb> list = batbService.getBatbInfo();
    
            // 3.获得当前分页对象
            PageInfo<Batb> pageInfo = new PageInfo<>(list);
    
            return pageInfo;
    
        }
    
    }
    

  • 实体类

    package com.zhl.entity;
    
    public class Batb {
    
        private Integer id;
        private String name;
        private String videoUrl;
        private String postUrl;
    
        public Integer getId() {
            return id;
        }
    
        public void setId(Integer id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getVideoUrl() {
            return videoUrl;
        }
    
        public void setVideoUrl(String videoUrl) {
            this.videoUrl = videoUrl;
        }
    
        public String getPostUrl() {
            return postUrl;
        }
    
        public void setPostUrl(String postUrl) {
            this.postUrl = postUrl;
        }
    
        @Override
        public String toString() {
            return "Batb{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", videoUrl='" + videoUrl + '\'' +
                    ", postUrl='" + postUrl + '\'' +
                    '}';
        }
    }
    

  • 最终查出来的数据的格式为

    {
    "total": 11,
    "list": [
        {
            "id": 1,
            "name": "xxx",
           	"videoUrl": "xxx",
           	"postUrl": "xxx"
        },
        {
            "id": 2,
            ...
        },
        {
            "id": 3,
            ...
        },
        {
            "id": 4,
            ...
        },
        {
            "id": 5,
            ...
        }
    ],
    "pageNum": 1,
    "pageSize": 4,
    "size": 4,
    "startRow": 1,
    "endRow": 5,
    "pages": 3,
    "prePage": 0,
    "nextPage": 2,
    "isFirstPage": true,
    "isLastPage": false,
    "hasPreviousPage": false,
    "hasNextPage": true,
    "navigatePages": 8,
    "navigatepageNums": [1,2,3],
    "navigateFirstPage": 1,
    "navigateLastPage": 3
    }
    

  • 持久层就正常查询即可

    <mapper namespace="com.zhl.dao.BatbDao">
    
        <!--select|insert|update|delete语句-->
    
        <select id="findBatbInfo" resultType="com.zhl.entity.Batb">
            select * from batb
        </select>
    
    </mapper>
    

• 前端部分,

<!-- batb视频展示页面 -->
<template>
 <div>
 
    <!-- 分页按钮 -->
    <el-pagination
      id="pagination" 
      background
      layout="pager"
      :total="total"
      v-show="total > 0"
      :current-page.sync="currentPage"
      :page-size="pageSize"
      @current-change="getList"
    >
    </el-pagination>

  
  </div>
</template>

<script>

export default {
  data() {
    return {
    
      // 当前页的视频数据
      list: [],

      total: 0,
      pageSize: 4,
      currentPage: 1,


    };
  },

  methods: {

    getList() {

      //得到一个PageInfo对象
      var that = this;
      this.$http.get(
        'http://localhost:8080/back/batb/batbInfo.do',
        {params: {pageNum: that.currentPage, pageSize: that.pageSize}}
      ).then(function(resp) {

        //得到一个PageInfo对象
        //将PageInfo中的total赋值给当前的total
        that.total = resp.data.total;
        //当前页显示的所有数据
        that.list = resp.data.list;
      }, function(err) {
        console.log(err);
      })
    }
  },


  created() {

    this.getList();

  }, 

};
</script>