Thymeleaf th:include、th:replace使用

最近做到頁面數據展示分頁的功能，由于每個模塊都需要分頁，所以每個頁面都需要將分頁的頁碼選擇內容重復的寫N遍，如下所示：

在這里插入圖片描述
重復的代碼帶來的就是Ctrl+C，Ctrl+V ,于是了解了一下thymeleaf的fragment加載語法以及th:include、th:replace的區別，得以解決。

首先在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" οnchange="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：只寫模板文件名，則加載整個頁面

  ================== fragment語法 ============================= <!--  語法說明  "::"前面是模板文件名，后面是選擇器 --><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>

引用時如下：

================= th:include 和 th:replace============================
<!-- 加載模板的內容： 讀取加載節點的內容（不含節點名稱），替換<div>的內容 -->
<div th:include="pagination::pagination">1</div>
<!-- 替換當前標簽為模板中的標簽： 加載的節點會整個替換掉加載他的<div>  -->
<div th:replace="pagination::pagination">2</div>

結果如下：

<!-- 加載模板的內容： 讀取加載節點的內容（不含節點名稱），替換<div>的內容 -->
<div> the public pagination</div>
<!-- 替換當前標簽為模板中的標簽： 加載的節點會整個替換掉加載他的<div>  -->
<span> the public pagination</span>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/250006.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/250006.shtml
英文地址，請注明出處：http://en.pswp.cn/news/250006.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！