SpringBoot上PageHelper分页的简单使用

迈不过友情╰ 2023-01-01 07:57 211阅读 0赞

### 文章目录 ###

*   *  1.导入pom依赖
     *  2.修改配置文件
     *  3.ProvinceController
     *  4.封装返回结果
     *  5.扩展：自定义分页

[官方文档][Link 1]  
[Spring Boot 集成][Spring Boot]

## 1.导入pom依赖 ##

<dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.2.5</version>
    </dependency>

## 2.修改配置文件 ##

详细的配置文件可以参考下面的官方文档

[点击跳转][Link 2]

application.properties

#pagehelper分页插件配置
    pagehelper.helperDialect=mysql
    pagehelper.reasonable=true
    pagehelper.supportMethodsArguments=true
    pagehelper.params=count=countSql

application.yml

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

这里省略dao service和Dao.xml 里的内容

就是简单的查询全部的sql语句 以List来接收

## 3.ProvinceController ##

@GetMapping("/provinces")
        public List<Province> lists(@RequestParam(defaultValue = "1") int pageNo, @RequestParam(defaultValue = "3") int pageSize) { 
            PageHelper.startPage(pageNo,pageSize);
            return provinceService.findAll();
        }

这里默认当前页`pageNo`为第一页 每页的数量`pageSize`为3条

返回的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]  
但这种方法只是返回了对应的数据 并不是我们真正想要的

## 4.封装返回结果 ##

简单来讲 就两步

1.使用`com.github.pagehelper`包里的`Page`代替List封装返回的结果

public class Page<E> extends ArrayList<E> implements Closeable { 
        private static final long serialVersionUID = 1L;
    
        /** * 页码，从1开始 */
        private int pageNum;
        /** * 页面大小 */
        private int pageSize;
        /** * 起始行 */
        private int startRow;
        /** * 末行 */
        private int endRow;
        /** * 总数 */
        private long total;
        /** * 总页数 */
        private int pages;
    }

2.使用`com.github.pagehelper`的`PageInfo` 并将`Page`传入 以获得更丰富的返回类型

public class PageInfo<T> extends PageSerializable<T> { 
        //当前页
        private int pageNum;
        //每页的数量
        private int pageSize;
        //当前页的数量
        private int size;
    
        //由于startRow和endRow不常用，这里说个具体的用法
        //可以在页面中"显示startRow到endRow 共size条数据"
    
        //当前页面第一个元素在数据库中的行号
        private int startRow;
        //当前页面最后一个元素在数据库中的行号
        private int endRow;
        //总页数
        private int pages;
    
        //前一页
        private int prePage;
        //下一页
        private int nextPage;
    
        //是否为第一页
        private boolean isFirstPage = false;
        //是否为最后一页
        private boolean isLastPage = false;
        //是否有前一页
        private boolean hasPreviousPage = false;
        //是否有下一页
        private boolean hasNextPage = false;
        //导航页码数
        private int navigatePages;
        //所有导航页号
        private int[] navigatepageNums;
        //导航条上的第一页
        private int navigateFirstPage;
        //导航条上的最后一页
        private int navigateLastPage;
    }

dao

public interface ProvinceDAO { 
    
    	 Page<Province> findAll();
    }

service类似 这里省略了

@GetMapping("/provinces")
        public PageInfo<Province> lists(@RequestParam(defaultValue = "1") int pageNo, @RequestParam(defaultValue = "1") int pageSize) { 
            PageHelper.startPage(pageNo,pageSize);
            PageInfo<Province> info = new PageInfo<>(provinceService.findAll());
            return info;
        }

因为数据比较少 每页只展示一条数据

这是返回的数据  
![在这里插入图片描述][20210101123043116.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]  
前端对应不同的参数 就可以写出好看的页面啦

后续可能会更新…

这里模仿下百度贴吧的分页  
![在这里插入图片描述][20210101131221365.png]  
第一页  
![在这里插入图片描述][2021010113120725.png]  
中间页  
![在这里插入图片描述][20210101131244509.png]  
尾页  
![在这里插入图片描述][20210101131422360.png]

使用的是vue前后端分离的方式 可能有点繁琐

<div id="pages">
                    <a href="#" v-show="!isFirst" @click="getlist(1)">首页</a>
                    <a href="#" v-show="hasPrev" class="page" @click="getlist(prePage)"><上一页</a>
                    <span v-for='n in nums'><a href="#" class="page" @click="getlist(n)">{
       {n}}</a></span>
                    <a href="#" v-show="hasNext" class="page" @click="getlist(nextPage)">下一页></a>
                    <a href="#" v-show="!isLast" @click="getlist(pages)">尾页</a>
    </div>
    
    
    <script> var app = new Vue({ el: "#wrap", data: { province:{ }, page:"1", size:"1", //这都是默认为第一页 有一堆数据的情况下的默认参数 isFirst:true, isLast:false, hasNext:true, hasPrev:false, prePage:'0', nextPage:'2', pages:'', nums:{ } }, methods: { getlist(no) { var _this = this axios.get("http://localhost:8888/province/findByPager?pageNo="+no+"&pageSize="+this.size) .then(res => { console.log(res.data); _this.province=res.data.data.list //首页和尾页 _this.isFirst=res.data.data.isFirstPage _this.isLast=res.data.data.isLastPage //是否有上一页下一页 _this.hasNext=res.data.data.hasNextPage _this.hasPrev=res.data.data.hasPreviousPage //前一页后后一页 _this.prePage=res.data.data.prePage _this.nextPage=res.data.data.nextPage //最后一页 _this.pages=res.data.data.pages //总的页数数组 _this.nums=res.data.data.navigatepageNums }) }, delpro(id){ var _this = this axios.get("http://localhost:8888/province/delpro?id="+id) .then(res => { console.log(res.data); alert(res.data.msg) location.reload() }) } }, created() { this.getlist(this.page) } }) </script>

大概是这个样子的 试验了下 没多大问题 当页数多的时候 他有个优化的操作 所以不用担心  
![在这里插入图片描述][20210101152836989.png]

## 5.扩展：自定义分页 ##

如果我们对sql查出来的结果进行处理 后再变成分页的形式 那么上面的就无法满足我们的条件了

我们需要自己定义下分页 写了一个小工具 简单介绍下

因为一般返回的结果是list类型 所以直接传list就可以了

public static PageInfo pageInfo(int pageNo,int pageSize,List list) { 
       		//传入页数 一页有几条
            Page page = new Page<>(pageNo, pageSize);
            //设置总条数
            int total = list.size();
            //设置开始的索引
            int startIndex = (pageNo - 1) * pageSize;
            //设置结束的索引
            int endIndex = Math.min(startIndex + pageSize,total);
            page.setTotal(total);
            //最终根据开始索引和结束索引截取对应的分页内容
            //注意 sublist 截取包含开始位置 不包含结束位置 这个样子的哦 [)
            page.addAll(list.subList(startIndex, endIndex));
            return new PageInfo<>(page);
        }

最终返回的PageInfo对象就是我们需要的分页 放入Result 统一结果返回类即可

[Link 1]: https://github.com/pagehelper/Mybatis-PageHelper/blob/master/README_zh.md
[Spring Boot]: https://github.com/abel533/MyBatis-Spring-Boot
[Link 2]: https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: /images/20221120/89c9a3e9c9684bd0ae92757b9822f89d.png
[20210101123043116.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: /images/20221120/0335a806406e48cdb4a00d90650a3b1f.png
[20210101131221365.png]: /images/20221120/f27af5f6b6d14c719a07752edaf8c37b.png
[2021010113120725.png]: /images/20221120/a8d1eff6e6c1498ca41c2e8306528db6.png
[20210101131244509.png]: /images/20221120/450d682c40ed41828ae7ba4876b72786.png
[20210101131422360.png]: /images/20221120/6447c0ec7fb848f09c14e3883c9c2036.png
[20210101152836989.png]: /images/20221120/478c01a3693c485b95c480939aab3b7e.png