Thymeleaf使用詳解

CQRMars發表於2018-12-01

Thymeleaf介紹

簡單說，Thymeleaf是一個跟Velocity、FreeMarker類似的模板引擎，他可以完全替代JSP。相較與其他的模板引擎，他有如下三個及吸引人的特點：
  • Thymeleaf在有網路和無網路的環境下皆可執行，即他可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式設計師在伺服器檢視資料的動態頁面效果。這是由於它支援HTML原型，然後在HTML標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋HTML時會忽略未定義的標籤屬性，所以Thymeleaf的模板可以靜態地執行；當有資料返回頁面時，Thymeleaf標籤會動態地替換掉靜態內容，使頁面動態顯示
  • Thymeleaf開箱即用的特性。它提供標準和Spring標準兩種方言，可以直接套用模板實現JSTL、OGNL表示式的效果，避免每天套模板、改JSTL、改標籤的困擾，同時開發人員可以擴充套件和建立自定義的方言
  • Thymeleaf提供Spring標準方言和另一個SpringMVC完美整合的可選模組，可以快速的實現表單繫結、屬性編輯器、國際化等功能


標準表示式語法

它們分為四類：
1.變數表示式
2.選擇或星號表示式
3.文字國際化表示式
4.URL表示式

變數表示式

變數表示式即OGNL表示式或Spring EL表示式(在Spring術語中也叫model attributes)。如下所示：
${session.user.name}
它們將以HTML標籤的一個屬性來表示：

<span th:text="${book.author.name}">
<li th:each="book : ${books}">複製程式碼

  選擇(星號)表示式

選擇表示式很像變數表示式，不過它們用一個預先選擇的物件來代替上下文變數容器(map)來執行，如下：
 *{customer.name} 
 被指定的object由th:object屬性定義：

 <div th:object="${book}">
        ...
        <span th:text="*{title}">...</span>
        ...
 </div>  複製程式碼

文字國際化表示式

文字國際化表示式允許我們從一個外部檔案獲取區域文字資訊(.properties)，用Key索引Value，還可以提供一組引數(可選).

#{main.title}
#{message.entrycreated(${entryId})}複製程式碼
 可以在模板檔案中找到這樣的表示式程式碼：

 <table>
        ...
        <th th:text="#{header.address.city}">...</th>
        <th th:text="#{header.address.country}">...</th>
        ...
 </table>  複製程式碼

URL表示式

URL表示式指的是把一個有用的上下文或回話資訊新增到URL，這個過程經常被叫做URL重寫：
 @{/order/list} 
URL還可以設定引數：
 @{/order/details(id=${orderId})}  
相對路徑：
 @{../documents/report} 
讓我們看這些表示式：

 <form th:action="@{/createOrder}">
 <a href="main.html" th:href="@{/main}">複製程式碼

變數表示式和星號表達的區別

如果不考慮上下文的情況下，兩者沒有區別；星號語法評估在選定物件上表達，而不是整個上下文

什麼是選定物件？就是父標籤的值，如下：

  <div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
  </div>複製程式碼

 這是完全等價於：

 <div th:object="${session.user}">
	  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
	  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
	  <p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
 </div>複製程式碼
當然，美元符號和星號語法可以混合使用：

<div th:object="${session.user}">
	  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  	  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
      <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>複製程式碼

常用th標籤

關鍵字
功能介紹
案例
th:id
替換id
<input th:id="'xxx' + ${collect.id}"/>
th:text
文字替換
<p th:text="${collect.description}">description</p>
th:utext
支援html的文字替換
<p th:utext="${htmlcontent}">conten</p>
th:object
替換物件
<div th:object="${session.user}">
th:value
屬性賦值
<input th:value="${user.name}" />
th:with
變數賦值運算
<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style
設定樣式
th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"
th:onclick
點選事件
th:onclick="'getCollect()'"
th:each
屬性迴圈賦值
tr th:each="user,userStat:${users}">
th:if
判斷條件
<a th:if="${userId == collect.userId}" >
th:unless
和th:if判斷相反
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:href
連結地址
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />
th:switch
多路選擇 配合th:case 使用
<div th:switch="${user.role}">
th:case
th:switch的一個分支
<p th:case="'admin'">User is an administrator</p>
th:fragment
佈局標籤，定義一個程式碼片段，方便其它地方引用
<div th:fragment="alert">
th:include
佈局標籤，替換內容到引入的檔案
<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />
th:replace
佈局標籤，替換整個標籤到引入的檔案
<div th:replace="fragments/header :: title"></div>
th:selected
selected選擇框
選中 th:selected="(${xxx.id} == ${configObj.dd})"
th:src
圖片類地址引入
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline
定義js指令碼可以使用變數
<script type="text/javascript" th:inline="javascript">
th:action
表單提交的地址
<form action="subscribe.html" th:action="@{/subscribe}">
th:remove
刪除某個屬性
<tr th:remove="all"> 1.all:刪除包含標籤和所有的孩子。2.body:不包含標記刪除,但刪除其所有的孩子。3.tag:包含標記的刪除,但不刪除它的孩子。4.all-but-first:刪除所有包含標籤的孩子,除了第一個。5.none:什麼也不做。這個值是有用的動態評估。
th:attr
設定標籤屬性，多個屬性可以用逗號分隔
比如 th:attr="src=@{/image/aa.jpg},title=#{logo}"，此標籤不太優雅，一般用的比較少。
還有非常多的標籤，這裡只列出最常用的幾個,由於一個標籤內可以包含多個th:x屬性，其生效的優先順序順序為: include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove

幾種常用的使用方法

1、賦值、字串拼接

 <p  th:text="${collect.description}">description</p>
 <span th:text="'Welcome to our application, ' + ${user.name} + '!'">複製程式碼
字串拼接還有另外一種簡潔的寫法：
<span th:text="|Welcome to our application, ${user.name}!|">

2、條件判斷 If/Unless

Thymeleaf中使用th:if和th:unless屬性進行條件判斷，下面的例子中，<a>標籤只有在th:if中條件成立時才顯示：

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>複製程式碼
th:unless於th:if恰好相反，只有表示式中的條件不成立，才會顯示其內容。
也可以使用 (if) ? (then) : (else) 這種語法來判斷顯示的內容

3、for 迴圈

 <tr  th:each="collect,iterStat : ${collects}">
      <th scope="row" th:text="${collect.id}">1</th>
     <td >
        <img th:src="${collect.webLogo}"/>
     </td>
     <td th:text="${collect.url}">Mark</td>
     <td th:text="${collect.title}">Otto</td>
     <td th:text="${collect.description}">@mdo</td>
     <td th:text="${terStat.index}">index</td>
 </tr>複製程式碼
iterStat稱作狀態變數，屬性有：
  • index:當前迭代物件的index（從0開始計算）
  • count: 當前迭代物件的index(從1開始計算)
  • size:被迭代物件的大小
  • current:當前迭代變數
  • even/odd:布林值，當前迴圈是否是偶數/奇數（從0開始計算）
  • first:布林值，當前迴圈是否是第一個
  • last:布林值，當前迴圈是否是最後一個

4、內聯js

內聯文字：[[…]]內聯文字的表示方式，使用時，必須先用th:inline=”text/javascript/none”啟用，th:inline可以在父級標籤內使用，甚至作為body的標籤。內聯文字儘管比th:text的程式碼少，不利於原型顯示

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>複製程式碼
js附加程式碼：
var msg = 'This is a working application';
js移除程式碼：
var msg = 'This is a non-working template';


相關文章