SpringBoot博客系统之分页功能的实现

1. 简介

在博客的文章列表页以及后台的文章管理等地方，并没有把所有文章信息都展示出来，而是通过分页功能按页面展示，分页功能的使用可以提升系统性能，也比较符合用户习惯，符合页面设计

• 减少系统资源的消耗，数据查询出来后是放在内存里的，如果在数据量很大的情况下一次性将所有内容都查询出来，会占用过多的内存，通过分页可以减少这种消耗；

• 提高性能，应用与数据库间通过网络传输数据，一次传输 10 条数据结果集与一次传输 20000 条数据结果集肯定是传输 10 条消耗更少的网络资源；

• 提升访问速度，浏览器与应用间的传输也是通过网络，返回 10 条数据明显那比返回 20000 条数据速度更快，因为数据包的大小有差别；

• 符合用户习惯，比如搜索结果或者商品展示，通常用户可能只看最近前 30 条，将所有数据都查询出来比较浪费；

• 基于展现层面的考虑，由于设备屏幕的大小比较固定，一个屏幕能够展示的信息并不是特别多，如果一次展现太多的数据，不管是排版还是页面美观度都有影响，一个屏幕的范围就是那么大，展示信息条数有限

2. 实现

最原始的做法是手动计算，后端按照前端传输过来的请求将分页所需的数据正确的查询出来并返回给前端，对于后端来说有两个必不可少的参数：

• 页码(需要第几页的数据)
• 每页条数(每次查询多少条数据,一般默认 10 条或者 20 条)
  再通过对应的sql查询语句进行查询

select * from tb_xxxx limit start,end

前端根据后端返回的数据进行展示，为了前端的展示，后端除了返回查询的数据外，还需要返回总页数和当前页码

2.1 使用PageHelper实现分页

SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能
1. 在项目pom.xml中加入pagehelper插件的依赖

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

2. application.yml 进行相应配置（好像不配置也行）

pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true

3. 具体使用
该分页插件的使用需要两个参数，引入该分页插件后紧跟的第一个查询就会被自动转换成一个分页查询

• pageNum：第几页
• pageSize：每页显示多少条,默认查询总数count

① controller层，接收对应的请求后，接收参数（pageNum）并进行相应的判断处理（pageSize写死为10），调用Service层进行分页查询

@GetMapping({"/page/{pageNum}"})
    public String page(HttpServletRequest request, @PathVariable("pageNum") int pageNum) {
        if(pageNum <= 0) {
            pageNum = 1;
        }
        PageResult blogPageResult = blogService.getAll(pageNum, 10);
        if (blogPageResult == null) {
            return "error/404";
        }
        request.setAttribute("blogPageResult", blogPageResult);
        return "blog/index";
    }

② Service层，引用pageHelper插件进行分页查询并把查询的结果和总记录数封装成PageResult 对象用于向前端的返回

@Override
    public PageResult getAll(int pageNum, int pageSize) {
    	//引入分页插件,pageNum是第几页，pageSize是每页显示多少条,默认查询总数count
        PageHelper.startPage(pageNum, pageSize);
        //紧跟的查询就是一个分页查询-必须紧跟.后面的其他查询不会被分页，除非再次调用PageHelper.startPage
        //select * from blog order by blog_id desc
        List<Blog> blogs = blogMapper.findBlogList();
        //select count(*) from blog
        int totalBlogs = blogMapper.getTotalBlogs();
        PageResult pageResult = new PageResult(blogs, totalBlogs, 10, pageNum);
        return pageResult;
    }

③ PageResult
为了前端页面的展示我们不仅仅需要将查询的数据返回，还需要返回当前的页数和总页数

@Data
public class PageResult implements Serializable {
    private int totalCount;//总记录数
    private int pageSize;//每页记录数
    private int totalPage; //总页数
    private int currPage;//当前页数
    private List<?> list;//列表数据
    
    public PageResult(List<?> list, int totalCount, int pageSize, int currPage) {
        this.list = list;
        this.totalCount = totalCount;
        this.pageSize = pageSize;
        this.currPage = currPage;
        this.totalPage = (int) Math.ceil((double) totalCount / pageSize);
    }
}

**④ 前端页面展示（Thymeleaf） **
前端在每一页的底部都应该有一个next和pre按钮，点击跳转到下一页或上一页，但是如果没有下一页或上一页则按钮不显示

这点通过后端向前端传递的PageResult的totalPage总页数和currPage就可以实现，如果当前页数-1大于0则说明有前一页，当前页数+1小于总页数则说明有下一页

<ul class="pagination">
                    <li class="page-item" th:if="${blogPageResult.currPage-1 >=1}">
                        <a class="page-link" href="#"  th:href="@{'/page/' + ${blogPageResult.currPage-1}}"><i class="fa fa-angle-double-left" aria-hidden="true"></i> Pre</a>
                    </li>
                    <li class="page-item" th:if="${blogPageResult.currPage+1 <=blogPageResult.totalPage}">
                        <a class="page-link" href="#"  th:href="@{'/page/' + ${blogPageResult.currPage+1}}">Next <i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
                    </li>
                </ul>

接下来是列表数据的显示

<!-- Single Post -->
<div class="col-12"  th:each="blog: ${blogPageResult.list}">
	<div class="list-blog single-post d-sm-flex wow fadeInUpBig" data-wow-delay=".2s">
		<div class="post-thumb">
			<img src="img/blog-img/6.jpg" th:src="@{${blog.blogCoverImage}}" alt="">
         </div>
         <!-- Post Content -->
         <div class="post-content">
         	<div class="post-meta d-flex">
            	<div class="post-author-date-area d-flex">
                <!-- Post Author -->
                	<div class="post-author">
                    	<a href="#">By Minifull</a>
                    </div>
                    <!-- Post Date -->
                    <div class="post-date">
                    	<a href="#" th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}">May 19, 2017</a>
                    </div>
                  </div>
                  <!-- Post Comment & Share Area -->
                  <div class="post-comment-share-area d-flex">
                  	<!-- Post Favourite -->
                    <div class="post-favourite">
                    	<a href="#" th:text="${blog.blogViews}"><i class="fa fa-heart-o" aria-hidden="true"></i> 10</a>
                    </div>               
                 </div>
              </div>
                 <a href="#" th:href="@{'/blog/' + ${blog.blogId}}">
                    <h4 class="post-headline"  th:text="${blog.blogTitle}">The 10 Best Bars By The Seaside In Blackpool, UK</h4>
                 </a>
				<a href="#"  th:href="@{'/blog/' + ${blog.blogId}}" class="read-more">Continue Reading..</a>
			</div>
		</div>
	</div>
</div>