Spring Boot和Thymeleaf整合，结合JPA实现分页效果

在项目里，我须要作一个Spring Boot结合Thymeleaf前端模版，结合JPA实现分页的演示效果。作的时候发现有些问题，也查了现有网上的很多文档，发现能全栈实现的很少，因此这里我就把个人作法，所有代码和步骤贴出来供你们参考。

一、建立项目，用pom.xml引入依赖

这里将建立名为ThymeleafWithDB的Maven，在pom.xml里引入以下的依赖包。

而在此项目里，对应的Stock库存表以下所示。

字段名	类型	说明
id	int	主键
name	varchar	库存货物名
num	int	库存数量
description	varchar	库存货物的描述

二、编写启动类

这个类是中规中矩的，代码以下。

三、在控制器类里，添加支持分页的方法

在第2行和第3行定义该方法的参数时，因为表示当前页的pageNum和每页数据个数的pageSize参数都是从url请求里以get参数的形式获得，因此在以前要加@RequestParam注解，不然的话就没法从请求里获得这两个参数。

在该方法的第4行里，调用了stockService对象的getStockListByPage方法，在传入分页参数的状况下，获得了当前页面中的数据。同时为了调试，还在第5行和第6行里，输出了当前页和每页个数的信息。

在拿到当前页面的数据后，该方法时经过第9行的方法，把它加到modelAndView对象里，并在第10行里，经过该对象，向listByPage视图返回数据。

四、编写业务逻辑方法

在这个方法的第2行里，首先经过Sort对象，定义了“按ID进行升序排列”的排序方式，随后经过第3行的PageRequest对象，定义的分页的方式，这里表示起始数据的pageNum和每页展现数据的pageSize值，都是来自于外部传入的参数。

在肯定好排序和分页的方式后，本方法在第4行里，经过调用PagingAndSortingRepository类型对象stockRepo的findAll方法，根据在参数pageable里封装好的分页和排序的方式，向MySQL的stock数据表里请求数据，并把获得的数据经过第5行的return语句返回。

五、编写Repo类

从第6行的代码里你们能看到，该Repo类实现（ implements）了JPA里包含分页和排序功能的PagingAndSortingRepository接口，因为在StockService里调用的findAll方法已经封装在该JPA接口里了，因此这里在StockRepo类里，甚至不须要再写代码。

六、在application.yml文件里编写JPA和Thymeleaf的配置参数    

其中在第1行到第10行的代码里，给出了JPA和MySQL的相关定义，而在第11行到第17行的代码里，给出了Thymeleaf模板的参数。

这里用到的配置参数，其实在前文里都已经说明过，不过请注意第2行和第11行的缩进，根据yml配置文件的缩进格式，第11行的thymeleaf实际上是和第2行的jpa同级，它们均属于第1行的spring的子级配置。

七、添加listByPage.html页面，实现分页的效果

根据配置，该文件是须要放在resources/templates目录里，具体代码以下。

在第22行到第37行的<div>属性元素里，加入了分页的效果，具体说明以下。

1. 在第25行的代码，经过th:href="'/listByPage?pageNum=0'"代码，以url参数的形式，向控制器类的listByPage方法，传递了pageNum为0的参数，以展现首页数据。
2. 在显示“上一页”的效果前，先须要经过第27行的th:if代码判断stocks对象里是否包含了上一页的数据，若是是，则经过第28行的代码展现“上一页”连接，请注意这里“上一页”连接所对应的参数，这样就能经过该连接，获得上一页的数据。
3. 展现“下一页”的方法和展现“上一页”的很类似，都是先经过th:if判断是否有下一页数据，而后再经过连接获得下一页的数据。
4. 在第34行的代码里，经过th:href="'/listByPage?pageNum=' + ${stocks.getTotalPages() - 1}"的代码获得了尾页的数据，请注意这里是用url中pageNum的参数值，获得尾页的数据。

八、观察效果

编写完成后，启动该项目，此时若是在浏览器里输入http://localhost:8080/listByPage，就能看到以下图所示的效果。

从中你们能看到，上图里每页的数据是3条，并且在数据下方展现了对应的分页连接，因为是第一页，因此没有包含“上一页”的连接。若是点击上图里的“下一页”连接，就能看到页面跳转的效果，以下图所示。

从中你们不只能看到页面上的数据变化，并且还能看到在url里，经过携带pageNum参数的方式，取到了下一页数据。而且，因为参数stocks里已经包含了“上一页”的数据，因此还能看到对应的连接。一样地，你们还能自行点击“首页”、“下一页”和“尾页”等连接，以观察对应的效果。