thymeleaf模板引擎


thymeleaf模板引擎

  thymeleaf是現代化服務器端的Java模板引擎,不同於JSP和FreeMarker,Thymeleaf的語法更加接近HTML,並且也有不錯的擴展性。詳細資料可以瀏覽官網

本文主要介紹Thymeleaf模板的使用說明。thymeleaf模板等同於freemarker和Velocity。

1、定義和引用模板

  日常開發中,我們經常會將導航欄、頁尾、菜單等部分提取成模板供其它頁面使用。

在Thymeleaf 中,我們可以使用th:fragment屬性來定義一個模板。

我們可以新建一個簡單的頁尾模板,如:/WEB-INF/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:*屬性中,並且可以使用目標頁面中的上下文變量。

2、不通過th:fragment引用模板

通過強大的dom選擇器,我們可以在不添加任何Thymeleaf屬性的情況下定義模板:

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

通過dom選擇器來加載模板,如id為copy-section

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

3、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>

4、模板參數配置

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}">起到一樣的效果

5、th:assert 斷言

我們可以通過th:assert來方便的驗證模板參數

 

<header th:fragment="contentheader(title)" th:assert="${!#strings.isEmpty(title)}">...</header>

6、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>

其中th:remove的參數有如下幾種:

  • all 刪除當前標簽和其內容和子標簽
  • body 不刪除當前標簽,但是刪除其內容和子標簽
  • tag 刪除當前標簽,但不刪除子標簽
  • all-but-first 刪除除第一個子標簽外的其他子標簽
  • none 啥也不干

當然,我們也可以通過表達式來傳參,

<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>
以上為Thymeleaf中模板的一些用法,各位看官請點贊。
 
6、常見的異常:
Whitelabel Error Page

This application has no explicit mapping for /error, so you are seeing this as a fallback.
Tue Jan 16 00:42:03 CST 2018
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/index]")

異常原因是:模板路徑解析錯誤

解決辦法:添加如下配置

#設置前綴和后綴
spring.thymeleaf.mode=HTML spring.thymeleaf.suffix=.html spring.thymeleaf.prefix=classpath:/templates/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM