Thymeleaf 模板的使用

時間 2019-12-08

標籤 thymeleaf 模板使用简体版

原文原文鏈接

Thymeleaf是現代化服務器端的Java模板引擎，不一樣與JSP和FreeMarker，Thymeleaf的語法更加接近HTML，而且也有不錯的擴展性。詳細資料能夠瀏覽官網。本文主要介紹Thymeleaf模板的使用說明。html

模板（template fragments）

定義和引用模板瀏覽器

平常開發中，咱們常常會將導航欄，頁尾，菜單等部分提取成模板供其它頁面使用。ruby

在Thymeleaf 中，咱們可使用th:fragment屬性來定義一個模板。服務器

咱們能夠新建一個簡單的頁尾模板，如：/WEB-INF/templates/footer.html，內容以下：less

<!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屬性來使用它：dom

<body> ... <div th:include="footer :: copyright"></div> </body>

其中th:include中的參數格式爲templatename::[domselector],
其中templatename是模板名（如footer），domselector是可選的dom選擇器。若是隻寫templatename，不寫domselector，則會加載整個模板。spa

固然，這裏咱們也能夠寫表達式：code

<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

模板片斷能夠被包含在任意th:*屬性中，而且可使用目標頁面中的上下文變量。regexp

不經過th:fragment引用模板orm

經過強大的dom選擇器，咱們能夠在不添加任何Thymeleaf屬性的狀況下定義模板：

...
<div id="copy-section"> &copy; xxxxxx </div> ...

經過dom選擇器來加載模板，如id爲copy-section

<body> ... <div th:include="footer :: #copy-section"> </div> </body>

th:include 和 th:replace區別

th:include 是加載模板的內容，而th:replace則會替換當前標籤爲模板中的標籤

例如以下模板：

<footer th:fragment="copy"> &copy; 2016 </footer>

咱們經過th:include 和 th:replace來加載模板

<body> <div th:include="footer :: copy"></div> <div th:replace="footer :: copy"></div> </body>

返回的HTML以下：

<body> <div> &copy; 2016 </div> <footer>&copy; 2016 </footer> </body>

模板參數配置

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>

這時一個很常規的模板，可是，當咱們直接在瀏覽器裏面打開它（不（不使用Thymeleaf ），它實在不是一個很好的原型。由於它的表格中只有一行，而咱們的原型須要更飽滿的表格。

若是咱們直接添加了多行，原型是沒有問題了，但經過Thymeleaf輸出的HTML又包含了這些事例行。

這時經過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>