Implementation of Paging in SpringBoot Blog System

1. Introduction

In blog article list pages and background article management, not all article information is displayed, but by page through paging function, the use of paging function can improve system performance, more in line with user habits, page design

  • Reduce the consumption of system resources, data is queried out in memory, if all the contents are queried out at once in a large amount of data, it will consume too much memory, and paging can reduce this consumption;

  • To improve performance, 10 data result sets at a time and 20,000 data result sets at a time between applications and databases are definitely 10 less consuming network resources for transmission.

  • Enhance access speed, browsers and applications also transfer through the network, returning 10 pieces of data is significantly faster than returning 20,000 pieces of data, because the size of the data package is different;

  • In line with user habits, such as search results or display of goods, users may only look at the last 30 items and query all the data is wasteful.

  • On the display level, because the screen size of the device is fixed, a screen can not display much information. If too much data is displayed at one time, whether it is layout or page aesthetics, the range of a screen is so large, and the number of display information bars is limited.

2. Implementation

The original practice is to compute manually, and the back end correctly queries the data needed for paging and returns it to the front end following the requests that the front end transmits. There are two essential parameters for the back end:

  • Page number (which page of data is required)
  • Number of bars per page (how many pieces of data are queried at a time, typically 10 or 20 by default)
    Then query through the corresponding sql query statement
select * from tb_xxxx limit start,end

The front end displays data returned by the back end. In order to display the front end, the back end returns not only the queried data, but also the total number of pages and the current page number.

2.1 Paging using PageHelper

SpringBoot+PageHelper+Bootstrap+Thymeleaf for Paging
1. Adding the dependency of the pagehelper plug-in to the project pom.xml

<!--pagehelper jPaginate -->

2. application.yml is configured accordingly (as if not)

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

3. Use Specifically
The use of the paging plugin requires two parameters, and the first query immediately following the introduction of the paging plugin is automatically converted to a paging query

  • pageNum: Which page
  • pageSize: how many pages are displayed per page, default total number of queries count

(1) controller layer, after receiving the corresponding request, receives the parameter (pageNum) and makes the corresponding judgment processing (pageSize write-to-death is 10), calls Service layer for paging query

    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";

(2) Service layer, referencing the pageHelper plug-in for paging queries and encapsulating the results and total records of the queries as PageResult objects for forward returns

    public PageResult getAll(int pageNum, int pageSize) {
    	//Introduce paging plug-in, pageNum is the number of pages, pageSize is how many pages are displayed, default total number of queries count
        PageHelper.startPage(pageNum, pageSize);
        //The query that follows is a paging query - it must follow immediately. Other queries that follow will not be paging unless PageHelper.startPage is called again
        //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
For front-end page display, we need to return not only the data queried, but also the current number of pages and the total number of pages.

public class PageResult implements Serializable {
    private int totalCount;//Total Records
    private int pageSize;//Number of records per page
    private int totalPage; //PageCount
    private int currPage;//page
    private List<?> list;//List data
    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);

**4 Front End Page Display (Thymeleaf)**
The front end should have a next and prebutton at the bottom of each page, Click to jump to the next or previous page, but the button will not display if there is no next or previous page

This is achieved by the total Page number and currPage of the PageResult passed from the back end to the front end, where the current number of pages - 1 is greater than 0 indicating the previous page and the current number of pages + 1 is less than the total number of pages indicating the next page

<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 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>

Next comes the display of the list data

<!-- 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="">
         <!-- 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>
                    <!-- Post Date -->
                    <div class="post-date">
                    	<a href="#" th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}">May 19, 2017</a>
                  <!-- 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>
                 <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 href="#"  th:href="@{'/blog/' + ${blog.blogId}}" class="read-more">Continue Reading..</a>
72 original articles published. 0% praised. 1684 visits
Private letter follow

Tags: less network Thymeleaf SQL

Posted on Tue, 04 Feb 2020 22:23:32 -0500 by mapunk