Thymeleaf th:include、th:replace使用

深藏阁楼爱情的钟 2021-10-15 08:55 243阅读 0赞

最近做到页面数据展示分页的功能，由于每个模块都需要分页，所以每个页面都需要将分页的页码选择内容重复的写N遍，如下所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]  
重复的代码带来的就是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>

在其他页面进行引用该公共模块时如下：

注意：第一个pagination为上述公共部分的文件名，第二个pagination为th:fragment的值。这样便可以解决公共部分代码的抽取。

fragment加载语法如下：

templatename::selector：”::”前面是模板文件名，后面是选择器  
::selector：只写选择器，这里指fragment名称，则加载本页面对应的fragment  
templatename：只写模板文件名，则加载整个页面

================== fragment语法 ============================= 
        
        <div th:include="template/footer::copy"></div>
        
        <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  
公共部分如下：

<span th:fragment="pagination"> 
    the public pagination
    </span>

引用时如下：

================= th:include 和 th:replace============================
    
    <div th:include="pagination::pagination">1</div>
    
    <div th:replace="pagination::pagination">2</div>

结果如下：

<div> the public pagination</div>
    
    <span> the public pagination</span>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpa3VucGVuZzY2NTYyMDE_size_16_color_FFFFFF_t_70]: /images/20211015/9c468152b19b4f2bad45b92d17f32adb.png