Implementation of Paging in SpringBoot Blog System

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

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 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.5</version> </dependency>

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

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

@GetMapping({"/page/"}) 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

@Override 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.

@Data 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> <li th:if="$"> <a href="#" th:href="@{'/page/' + $}"><i aria-hidden="true"></i> Pre</a> </li> <li th:if="$"> <a href="#" th:href="@{'/page/' + $}">Next <i aria-hidden="true"></i></a> </li> </ul>

Next comes the display of the list data

<!-- Single Post --> <div th:each="blog: $"> <div data-wow-delay=".2s"> <div> <img src="img/blog-img/6.jpg" th:src="@{$}" alt=""> </div> <!-- Post Content --> <div> <div> <div> <!-- Post Author --> <div> <a href="#">By Minifull</a> </div> <!-- Post Date --> <div> <a href="#" th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}">May 19, 2017</a> </div> </div> <!-- Post Comment & Share Area --> <div> <!-- Post Favourite --> <div> <a href="#" th:text="$"><i aria-hidden="true"></i> 10</a> </div> </div> </div> <a href="#" th:href="@{'/blog/' + $}"> <h4 th:text="$">The 10 Best Bars By The Seaside In Blackpool, UK</h4> </a> <a href="#" th:href="@{'/blog/' + $}">Continue Reading..</a> </div> </div> </div> </div>

• Give the thumbs-up
• Collection
• share
• • Article Report