Thymeleaf使用詳解

JavaScript Spring JSP · 發表 2018-12-01 15:36:36

摘要： Thymeleaf介紹簡單說，Thymeleaf是一個跟Velocity、FreeMarker類似的模板引擎，他可以完全替代JSP。相較與其他的模板引擎，他有如下三個及吸引人的特點： Thymeleaf在有網路和無網路的環境下皆可執行，即他可以讓美工在瀏覽器檢視頁面的靜態效...

Thymeleaf介紹

簡單說，Thymeleaf是一個跟Velocity、FreeMarker類似的模板引擎，他可以完全替代JSP。相較與其他的模板引擎，他有如下三個及吸引人的特點：

Thymeleaf在有網路和無網路的環境下皆可執行，即他可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式員在伺服器檢視資料的動態頁面效果。這是由於它支援HTML原型，然後在HTML標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋HTML時會忽略未定義的標籤屬性，所以Thymeleaf的模板可以靜態地執行；當有資料返回頁面時，Thymeleaf標籤會動態地替換掉靜態內容，使頁面動態顯示
Thymeleaf開箱即用的特性。它提供標準和Spring標準兩種方言，可以直接套用模板實現STL/">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、賦值、字串拼接

<pth: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 迴圈

<trth: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';