Spring boot整合pagehelper（全网最全，最容易理解，有前端页面）
前言：近日，偶然灵感突发，想写一个论坛项目，之但是在整合后端时，为了写好分页却翻了一天的车，不掌握不理解是真的烦麻烦！之前也学过分页，但是那都是别人写好的，直接复制；虽有人家写好的论坛项目源码，但是分页却是自己写的，看着觉得别扭，我突然想用pagehelper能不能也实现这样的功能呢？于是在自己一番大量翻车的摸索下，终于成功了！
话不多说，spring boot项目（jar包项目）首先要引入相应的dependency：
<!-- 分页插件依赖 -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.0</version>
</dependency>
之后就要配置pagehelper了，网上大概有两种做法：
一种时在application.ym 文件中中配置，一种是用配置类的方法（@Configuration），为了方便用这里我采用第二种方式，上代码：
@Configuration
public class MybatisConfig {
@Bean
public PageHelper pageHelper(){
PageHelper pageHelper = new PageHelper();
Properties p = new Properties();
p.setProperty("offsetAsPageNum","true");
p.setProperty("rowBoundsWithCount","true");
p.setProperty("reasonable","true");
pageHelper.setProperties(p);
return pageHelper;
}
重点来了，底层整合mybatis，在这里就不较多赘述，所以在这里我只在controller层对pagehelper进行应用，并没有对其进行加工或者改写或者以新的方式添加一些元素，原装的pagehelper
controller层：
@Autowired
private DiscussPostService discussPostService;
@Autowired
private UserService userService;
@GetMapping("page")
public String getIndexPage(Model model, @RequestParam(value = "page",defaultValue = "1")int page,
@RequestParam(value = "size",defaultValue = "4")int size){
PageHelper.startPage(page,size);
根据用户userId查询用户所发的帖子，以userId=101举例
List<DiscussPost> list=discussPostService.selectDiscussPosts(101);
User user=userService.selectById(101);
PageInfo<DiscussPost> pageInfo=new PageInfo<>(list);
//以下是对json格式测试时写的,用postman测试请求
// Map data=new HashMap<>();
// data.put("total_size",pageInfo.getTotal());//总条数
// data.put("total_page",pageInfo.getPages());//总页数
// data.put("current_page",page);//当前页
// data.put("data",pageInfo.getList());
// data.put("user",user);
model.addAttribute("pageInfo",pageInfo);
model.addAttribute("user",user);
return "index";
}
这里前后端一般是通过ajax进行交互，但是我完全不太明白，只知道thymleaf模板引擎好用就行，(*^ ▽ ^ *)
不过这里倒是有些需要注意，一定要向前端传递数据， model.addAttribute,其次前端要注意取值，同时网页头部还要引入thymeleaf模板，并改写对应的引用，与超链接
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
重头戏来了，获取后端传来的数据：
一、这里以逐条显示为例：
<ul class="list-unstyled">
<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${pageInfo.list}" >
<a href="site/profile.html">
<img th:src="${user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
a>
<div class="media-body">
<h6 class="mt-0 mb-3">
<a href="#" th:utext="${map.title}" >备战春招，面试刷题跟他复习，一个月全搞定！a>
<span class="badge badge-secondary bg-primary" th:if="${ map.type==1}">置顶span>
<span class="badge badge-secondary bg-danger" th:if="${map.status==1}">精华span>
h6>
<div class="text-muted font-size-12">
<u class="mr-3" th:utext="${user.username}">寒江雪u> 发布于 <b th:text="${
#dates.format(map.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18b>
<ul class="d-inline float-right">
<li class="d-inline ml-2">赞 11li>
<li class="d-inline ml-2">|li>
<li class="d-inline ml-2">回帖 7li>
ul>
div>
div>
li>
这里通过pageInfo.list获取里面封装的数据，通过thymeleaf加载还是蛮方便的，对应的日期格式还可以转换成对应的格式
效果：
那么底下的分页怎么搞呢？这里我参考了pageInfo的源码
public class PageInfo<T> implements Serializable {
private static final long serialVersionUID = 1L;
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//排序
private String orderBy;
//由于startRow和endRow不常用，这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集
private List<T> list;
//第一页
private int firstPage;
//前一页
private int prePage;
//下一页
private int nextPage;
//最后一页
private int lastPage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
所以只要在前端通过传来的值编写分页的逻辑即可，
但是注意：这里所获取的仅仅也只是数字，比如拿
${pageInfo.prePage}
这个获取的也只不过是对应的数字，而每个页面都对应着超链接，还得以请求的方式发回去，怎么办呢？
通过thyme leaf的th:href解决呀
th:href="@{/home/page(page=${pageInfo.prePage})}
具体代码：
<nav class="mt-5" th:if="${pageInfo.total>0}">
<p>当前 <span th:text="${pageInfo.pageNum}">span> 页,总 <span th:text="${pageInfo.pages}">span> 页,共 <span th:text="${pageInfo.total}">span> 条记录p>
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" th:href="@{/home/page(page=${pageInfo.FirstPage})}">首页a>
li>
<li th:class="|page-item ${pageInfo.pageNum==pageInfo.FirstPage ? 'disabled':''}|" >
<a class="page-link" th:href="@{/home/page(page=${pageInfo.prePage})}" >上一页a>
li>
<li th:class="|page-item ${i==pageInfo.pageNum? 'active': ''}| " th:each="i:${#numbers.sequence(pageInfo.FirstPage,
pageInfo.LastPage)}">
<a class="page-link" th:href="@{/home/page(page=${i})}" th:text="${i}">1a>
li>
<li th:class="|page-item ${pageInfo.pageNum==pageInfo.lastPage ? 'disabled':''}|">
<a class="page-link" th:href="@{/home/page(page=${pageInfo.nextPage})}">下一页a>
li>
<li class="page-item">
<a class="page-link" th:href="@{/home/page(page=${pageInfo.lastPage})}">末页a>
li>
ul>
nav>
所以此时controller里面的page就相当重要喽！
再来一遍效果
对应的第二页的链接请求：
http://localhost:8081/home/page?page=2
不过不得不说着前端代码还是写的蛮漂亮的，能指明当前页，而且遇到首页与尾页，首页不能上一页，尾页不能下一页。
写作还尚有不足，项目正在开发，以后也会分享一些开发中遇到问题的解决思路哒！文章还有不足还望大佬不吝赐教，同时有更好能够优化前端代码逻辑，还希望能在评论区留言！