Thymeleaf 的基本用法
屬於個人整理的文件，大部分內容來源自網路
在這裡我們沒有打算使用SpringMVC進行整合使用或者說跟Spring Boot 一起使用
我們在這裡單獨使用Servelet版本-算是為了給一些初學者提供部分程式碼
Thymeleaf是一款用於渲染XML/XHTML/HTML5內容的模板引擎，類似JSP，Velocity，FreeMaker等，它也可以輕易的與Spring MVC等Web框架進行整合作為Web應用的模板引擎。
Thymeleaf最大的特點是能夠直接在瀏覽器中開啟並正確顯示模板頁面，而不需要啟動整個Web應用，但是總是看到說其效率有點低
Thymeleaf 在有網路和無網路的環境下皆可執行，即它可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式設計師在伺服器檢視帶資料的動態頁面效果。這是由於它支援 html 原型，然後在 html 標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地執行；當有資料返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表示式效果，避免每天套模板、改jstl、改標籤的困擾。同時開發人員也可以擴充套件和建立自定義的方言。
複製程式碼1.引入提示
在html頁面中引入thymeleaf名稱空間，即，此時在html模板檔案中動態的屬性使用th:名稱空間修飾 。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
複製程式碼這樣才可以在其他標籤裡面使用th:*這樣的語法.這是下面語法的前提.
2.變數表示式(獲取變數值)
<div th:text="'你是否讀過，'+${session.book}+'!!'">
同EL表示式有些相似的效果，如果有資料，被替換
完成前後端分離效果(美工程式碼)
</div>
複製程式碼程式碼分析：
1.可以看出獲取變數值用$符號,對於javaBean的話使用變數名.屬性名方式獲取,這點和EL表示式一樣
2.它通過標籤中的th:text屬性來填充該標籤的一段內容，意思是$表示式只能寫在th標籤內部,不然不會生效,上面例子就是使用th:text標籤的值替換div標籤裡面的值,至於div裡面的原有的值只是為了給前端開發時做展示用的.這樣的話很好的做到了前後端分離.意味著div標籤中的內容會被表示式${session.book}的值所替代，無論模板中它的內容是什麼，之所以在模板中“多此一舉“地填充它的內容，完全是為了它能夠作為原型在瀏覽器中直接顯示出來。
3.訪問spring-mvc中model的屬性，語法格式為“${}”，如${user.id}可以獲取model裡的user物件的id屬性
4.牛叉的迴圈<li th:each="book : ${books}" >
複製程式碼3.URL表示式(引入URL)
重點！重點！重點！
-
引用靜態資原始檔(CSS使用th:href，js使用使用th:src)
-
href連結URL(使用th:href)
程式碼分析 1.最終解析的href為： /seconddemo/ /seconddemo/usethymeleaf?name=Dear 相對路徑，帶一個引數 /seconddemo/usethymeleaf?name=Dear&alis=Dear 相對路徑，帶多個引數 /seconddemo/usethymeleaf?name=Dear&alis=Dear 相對路徑，帶多個引數 /seconddemo/usethymeleaf/Dear 相對路徑，替換URL一個變數 /seconddemo/usethymeleaf/Dear/Dear 相對路徑，替換URL多個變數 2.URL最後的(name=${name})表示將括號內的內容作為URL引數處理，該語法避免使用字串拼接，大大提高了可讀性 3.@{/usethymeleaf}是Context相關的相對路徑，在渲染時會自動新增上當前Web應用的Context名字，假設context名字為seconddemo，那麼結果應該是/seconddemo/usethymeleaf，即URL中以”/“開頭的路徑(比如/usethymeleaf將會加上伺服器地址和域名和應用cotextpath，形成完整的URL。 4.th:href屬性修飾符:它將計算並替換使用href連結URL 值，並放入的href屬性中。 5.th:href中可以直接使用靜態地址 複製程式碼
4.選擇或星號表示式
表示式很像變數表示式，不過它們用一個預先選擇的物件來代替上下文變數容器(map)來執行*{customer.name}
<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>
<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>
複製程式碼1.如果不考慮上下文的情況下，兩者沒有區別；星號語法評估在選定物件上表達，而不是整個上下文，什麼是選定物件？就是父標籤的值。上面的*{title}表示式可以理解為${book.title}。(父物件)
2.當然，美元符號和星號語法可以混合使用
複製程式碼小插曲：三和四的變數表示式、URL表示式所對應的屬性都可以使用統一的方式：th.attr=“屬性名=屬性值”的方式來設定，參考第“七.設定屬性值”部分
5.文字國際化表示式
j簡單看一下就可以，文字國際化表示式允許我們從一個外部檔案獲取區域文字資訊(.properties)，用Key索引Value，還可以提供一組引數(可選).
#{main.title}
#{message.entrycreated(${entryId})} 可以在模板檔案中找到這樣的表示式程式碼：
<table>
<th th:text="#{header.address.city}">
<th th:text="#{header.address.country}">
</table>
複製程式碼6. 表示式支援的語法
-
字面量（Literals）
- 文字文字（Text literals）: 'one text', 'Another one!',…
- 數字文字（Number literals）: 0, 34, 3.0, 12.3,…
- 布林文字（Boolean literals）: true, false
- 空（Null literal）: null
- 文字標記（Literal tokens）: one , sometext
-
文字操作（Text operations）
-
字串連線（String concatenation）:
+ -
文字替換（Literal substitutions）:
|The name is ${name}|<div th:class="'content'">...</div> <span th:text="|Welcome to our application, ${user.name}!|"> //Which is equivalent to: <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> <span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|"> 複製程式碼
-
-
算術運算（Arithmetic operations）
- 二元運算子（Binary operators）: + , - , * , / , %
- 減號（Minus sign (unary operator)）: -
-
布林操作（Boolean operations）
- Binary operators: and , or
- Boolean negation (unary operator): ! , not
-
比較和等價(Comparisons and equality)
- Comparators: > , < , >= , <= ( gt , lt , ge , le )
- Equality operators: == , != ( eq , ne )
-
條件運算子（Conditional operators）三元運算子
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
示例一： <h2 th:text="${expression} ? 'Hello' : 'Something else'"></h2> 示例二： <!-- IF CUSTOMER IS ANONYMOUS --> <div th:if="${customer.anonymous}"> <div>Welcome, Gues!</div> </div> <!-- ELSE --> <div th:unless="${customer.anonymous}"> <div th:text=" 'Hi,' + ${customer.name}">Hi, User</div> </div> 複製程式碼 -
Special tokens:
- No-Operation: _
-
switch
-
迴圈
渲染列表資料是一種非常常見的場景，例如現在有n條記錄需要渲染成一個表格或li列表標籤該資料集合必須是可以遍歷的，使用
th:each標籤程式碼分析： 迴圈，在html的標籤中，加入th:each=“value:${list}”形式的屬性，如可以迭代prods的資料 又如帶狀態變數的迴圈： 複製程式碼
利用狀態變數判斷：
7.設定屬性值
1. th:attr
任何屬性值，語法格式：th:attr="屬性名=屬性值,[屬性名=屬性值]"
屬性值如果是使用表示式的話：通常有URL表示式@{}和變數表示式${}
但此標籤語法不太優雅
示例：
th:attr="action=@{/subscribe}" //當然也可以直接使用th:action
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" //可直接使用th:src
th:attr="value=#{subscribe.submit}"//可直接使用th:value
<input type="checkbox" name="active" th:attr="checked=${user.active}"/>
設定多個屬性在同一時間,有兩個特殊的屬性可以這樣設定：
th:alt-title 和 th:lang-xmllang
th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}"
2.前置和後置新增屬性值
th:attrappend 和 th:attrprepend
主要對class和style兩個屬性
class="btn" th:attrappend="class=${' ' + cssStyle}"
轉換後：class="btn warning"
3.還有兩個特定的新增屬性
th:classappend 和 th:styleappend
與上面的attrappend功能一樣
class="row" th:classappend="${prodStat.odd}? 'odd'"
轉換後：奇數行class="row odd"，偶數行class="row"
複製程式碼8.內嵌變數Utilities
為了模板更加易用，Thymeleaf還提供了一系列Utility物件（內建於Context中），可以通過#直接訪問。
dates ： java.util.Date的功能方法類
calendars : 類似#dates，面向java.util.Calendar
numbers : 格式化數字的功能方法類
strings : 字串物件的功能類，contains,startWiths,prepending/appending等等
objects: 對objects的功能類操作
bools: 對布林值求值的功能方法
arrays：對陣列的功能類方法
lists: 對lists功能類方法
sets
maps
複製程式碼程式碼示例：
${#dates.format(dateVar, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
${#dates.createNow()}
${#dates.createToday()}
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
${#strings.startsWith(name,'Don')}
// also array*, list* and set*
${#strings.endsWith(name,endingFragment)}
// also array*, list* and set*
${#strings.length(str)}
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
${#strings.randomAlphanumeric(count)}//產生隨機字串
複製程式碼