thymeleaf布局 · SpringBoot不明覺厲手冊

# 概述在web開發中，我們經常會將公共頭，公共尾，菜單等部分提取成模板供其它頁面使用。在thymeleaf中，通過th:fragment、th:include、th:replace、參數化模板配置、css選擇器加載代碼塊等實現。下文通過例子來說明用法: fragment語法 ~~~ 通過 th:fragment 和 css選擇器加載代碼塊 th:include 和 th:replace 參數化模板配置 ~~~ 這應該是Thymeleaf系列的最后一篇，不容易啊！夸夸一下自己，呵呵！注意 ` spring boot 1.5.4 默認使用的 thymeleaf 2，這里只演示thymeleaf 2語法` ## 定義模板在Thymeleaf 中，我們可以使用th:fragment屬性來定義一個模板。我們可以新建一個簡單的頁尾模板，如：/resoures/templates/footer.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 th:fragment="copyright"> ? 2016 xxx </div> </body> </html> ~~~ 上面定義了一個叫做copyright的片段，接著我們可以使用th:include或者th:replace屬性來使用它： ~~~ <body> ... <div th:include="footer :: copyright"></div> </body> ~~~ 其中th:include中的參數格式為`templatename::[domselector]`, 其中templatename是模板名（如footer），domselector是可選的dom選擇器。如果只寫templatename，不寫domselector，則會加載整個模板。當然，這里我們也可以寫表達式： `<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>` 模板片段可以被包含在任意`th:*`屬性中，并且可以使用目標頁面中的上下文變量。不通過th:fragment引用模板通過強大的dom選擇器，我們可以在不添加任何Thymeleaf屬性的情況下定義模板： ~~~ ... <div id="copy-section"> © xxxxxx </div> ... ~~~ 通過dom選擇器來加載模板，如id為copy-section ~~~ <body> ... <div th:include="footer :: #copy-section"> </div> </body> ~~~ ## 公共頁 /templates/template/footer.html 此頁面定義待加載的模板頁面 ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <meta charset="UTF-8" /> <body>  <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span> <span id="copy-section"> 2017 hry loaded by id=copy-section</span>  <span th:fragment="frag(month, date) "> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span> </body> </html> ``` ## fragment語法 /templates/template/footer.html：定義要加載代碼塊copy ~~~  <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span> ~~~ /templates/template/template.html：通過th:include在本頁中加載以上的代碼塊copy，fragment加載語法如下： ``` templatename::selector：”::”前面是模板文件名，后面是選擇器 ::selector：只寫選擇器，這里指fragment名稱，則加載本頁面對應的fragment templatename：只寫模板文件名，則加載整個頁面 ================== fragment語法 ============================= <br />  <div th:include="template/footer::copy"></div>  <div th:include="::#thispage"></div>  <div th:include="template/footer"></div> ================= 加載塊 ============================ <br /> <span id="thispage"> div in this page. </span> ``` 運行結果輸出： ``` ================== fragment語法 ============================= <br />  <div> 2017 hry loaded by fragment=copy</div>  <div> div in this page. </div>  <div> <html> <meta charset="UTF-8" /> <body>  <span> 2017 hry loaded by fragment=copy</span> <span id="copy-section"> 2017 hry loaded by id=copy-section</span>  <span> <span>welcome hry come in 6-19</span></span> </body> </html> </div> ``` ## 通過 th:fragment 和 css選擇器加載代碼塊 /templates/template/footer.html：除了th:fragment外，還可以css選擇器加載代碼塊。下文定義th:fragment=”copy”和id=”copy-section”。 ```  <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span> <span id="copy-section"> 2017 hry loaded by id=copy-section</span> ``` /templates/template/template.html：通過 th:fragment 加載代碼塊通過css選擇器加載代碼塊 ``` ================= 通過 th:fragment 和 css選擇器加載代碼塊 =================  <div th:include="template/footer::copy"></div>  <div th:include="template/footer::#copy-section"></div> ``` 運行結果輸出： ``` ================= 通過 th:fragment 和 css選擇器加載代碼塊 =================  <div> 2017 hry loaded by fragment=copy</div>  <div> 2017 hry loaded by id=copy-section</div> ``` ## th:include 和 th:replace th:include 和 th:replace都是加載代碼塊內容，但是還是有所不同，下面會展示兩者不同。 /templates/template/footer.html： ~~~  <span th:fragment="copy"> 2017 hry loaded by fragment=copy</span> ~~~ /templates/template/template.html： th:include：加載模板的內容：讀取加載節點的內容（不含節點名稱），替換div內容 th:replace：替換當前標簽為模板中的標簽，加載的節點會整個替換掉加載他的div ~~~ ================= th:include 和 th:replace============================  <div th:include="template/footer::copy">1</div>  <div th:replace="template/footer::copy">2</div> ~~~ 運行結果輸出： ~~~  <div> 2017 hry loaded by fragment=copy</div>  <span> 2017 hry loaded by fragment=copy</span> ~~~ ## 參數化模板配置 th:fragment定義模板的時候可以定義參數： ~~~ <div th:fragment="frag (onevar,twovar)"> <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> ~~~ 在 th:include 和 th:replace中我們可以這樣傳參： ~~~ <div th:include="::frag (${value1},${value2})">...</div> <div th:include="::frag (onevar=${value1},twovar=${value2})">...</div> ~~~ 此外，定義模板的時候簽名也可以不包括參數：`<div th:fragment="frag">`，我們任然可以通過`<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div>`這種方式調用模板。這其實和<div th:include="::frag" th:with="onevar=${value1},twovar=${value2}">起到一樣的效果 ## th:assert 斷言我們可以通過th:assert來方便的驗證模板參數 `<header th:fragment="contentheader(title)" th:assert="${!#strings.isEmpty(title)}">...</header>` th:remove 刪除代碼假設我們有一個產品列表模板： ~~~ <table> <tr> <th>NAME</th> <th>PRICE</th> <th>IN STOCK</th> <th>COMMENTS</th> </tr> <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'"> <td th:text="${prod.name}">Onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> <td> <span th:text="${#lists.size(prod.comments)}">2</span> comment/s <a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a> </td> </tr> </table> ~~~ ## th:remove屬性通過`th:remove`屬性，可以刪除模板里的一些代碼，讓前端的多余的演示代碼消失。 ~~~ <table> <tr> <th>NAME</th> <th>PRICE</th> <th>IN STOCK</th> <th>COMMENTS</th> </tr> <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'"> <td th:text="${prod.name}">Onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> <td> <span th:text="${#lists.size(prod.comments)}">2</span> comment/s <a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a> </td> </tr> <tr class="odd" th:remove="all"> <td>Blue Lettuce</td> <td>9.55</td> <td>no</td> <td> <span>0</span> comment/s </td> </tr> <tr th:remove="all"> <td>Mild Cinnamon</td> <td>1.99</td> <td>yes</td> <td> <span>3</span> comment/s <a href="comments.html">view</a> </td> </tr> </table> ~~~ 其中th:remove的參數有如下幾種： ~~~ all 刪除當前標簽和其內容和子標簽 body 不刪除當前標簽，但是刪除其內容和子標簽 tag 刪除當前標簽，但不刪除子標簽 all-but-first 刪除除第一個子標簽外的其他子標簽 none 啥也不干 ~~~ 當然，我們也可以通過表達式來傳參， `<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>`