Thymeleaf的基本語法

時間 2019-11-06

標籤 thymeleaf 基本語法简体版

原文原文鏈接

Thymeleaf 的基本用法

屬於我的整理的文檔，大部份內容來源自網絡css

在這裏咱們沒有打算使用SpringMVC進行整合使用或者說跟Spring Boot 一塊兒使用html

咱們在這裏單獨使用Servelet版本-算是爲了給一些初學者提供部分代碼前端

Thymeleaf是一款用於渲染XML/XHTML/HTML5內容的模板引擎，相似JSP，Velocity，FreeMaker等，它也能夠輕易的與Spring MVC等Web框架進行集成做爲Web應用的模板引擎。java

Thymeleaf最大的特色是可以直接在瀏覽器中打開並正確顯示模板頁面，而不須要啓動整個Web應用，可是老是看到說其效率有點低程序員

Thymeleaf 在有網絡和無網絡的環境下皆可運行，即它可讓美工在瀏覽器查看頁面的靜態效果，也可讓程序員在服務器查看帶數據的動態頁面效果。這是因爲它支持 html 原型，而後在 html 標籤裏增長額外的屬性來達到模板+數據的展現方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，因此 thymeleaf 的模板能夠靜態地運行；當有數據返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，能夠直接套用模板實現JSTL、 OGNL表達式效果，避免天天套模板、改jstl、改標籤的困擾。同時開發人員也能夠擴展和建立自定義的方言。
複製代碼

1.引入提示

在html頁面中引入thymeleaf命名空間，即，此時在html模板文件中動態的屬性使用th:命名空間修飾。spring

<html lang="en" xmlns:th="http://www.thymeleaf.org">
複製代碼

這樣才能夠在其餘標籤裏面使用th:*這樣的語法.這是下面語法的前提.express

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)}//產生隨機字符串
複製代碼