專案問題合集 org.springframework.boot spring-boot-starter-thyme
阿新 • • 發佈：2019-01-08
首先在pom.xml引入thymeleaf的依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
將上述的重複資訊抽取出來存為pagination.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <body> <div class="panelBar" th:fragment="pagination"> <!--以下為公共部分--> <div class="pages"> <span>顯示</span> <select class="combox" name="numPerPage" onchange="navTabPageBreak({numPerPage:this.value})"> <option value="1" th:selected="${pages.numPerPage}==1">1</option> <option value="3" th:selected="${pages.numPerPage}==3">3</option> <option value="5" th:selected="${pages.numPerPage}==5">5</option> <option value="10" th:selected="${pages.numPerPage}==10">10</option> <option value="100" th:selected="${pages.numPerPage}==100">100</option> <option value="150" th:selected="${pages.numPerPage}==150">150</option> <option value="200" th:selected="${pages.numPerPage}==200">200</option> <option value="250" th:selected="${pages.numPerPage}==250">250</option> </select> <span id="fleeceRecordCounts" th:text="'共有'+${pages.totalCount}+'條'"></span> </div> <div id="fleece_page" class="pagination" th:attr="targetType=${pages.targetType},totalCount=${pages.totalCount},numPerPage=${pages.numPerPage},pageNumShown=${pages.pageNumShown},currentPage=${pages.currentPage}"></div> </div> </body> </html>
在其他頁面進行引用該公共模組時如下：
<div class="panelBar" th:replace="pagination::pagination"></div>
注意：第一個pagination為上述公共部分的檔名，第二個pagination為th:fragment的值。這樣便可以解決公共部分程式碼的抽取。
fragment載入語法如下：
- templatename::selector：”::”前面是模板檔名，後面是選擇器
- ::selector：只寫選擇器，這裡指fragment名稱，則載入本頁面對應的fragment
- templatename：只寫模板檔名，則載入整個頁面
<!-- 語法說明 "::"前面是模板檔名，後面是選擇器 --> <div th:include="template/footer::copy"></div> <!-- 只寫選擇器，這裡指fragment名稱，則載入本頁面對應的fragment --> <div th:include="::#thispage"></div> <!-- 只寫模板檔名，則載入整個頁面 --> <div th:include="template/footer"></div> <span id="thispage"> div in this page. </span>
th:include 和 th:replace都是載入程式碼塊內容，但是還是有所不同
- th:include：載入模板的內容： 讀取載入節點的內容（不含節點名稱），替換div內容
- th:replace：替換當前標籤為模板中的標籤，載入的節點會整個替換掉載入他的div
公共部分如下：
<!-- th:fragment 定義用於載入的塊 -->
<span th:fragment="pagination">
the public pagination
</span>
呼叫
<!-- 載入模板的內容： 讀取載入節點的內容（不含節點名稱），替換<div>的內容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替換當前標籤為模板中的標籤： 載入的節點會整個替換掉載入他的<div> -->
<div th:replace="pagination::pagination">2</div>