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裏已經包含了「上一頁」的數據，因此還能看到對應的連接。一樣地，你們還能自行點擊「首頁」、「下一頁」和「尾頁」等連接，以觀察對應的效果。