Thymeleaf 的基本用法

屬于個(gè)人整理的文檔，大部分內(nèi)容來(lái)源自網(wǎng)絡(luò)

在這里我們沒(méi)有打算使用SpringMVC進(jìn)行整合使用或者說(shuō)跟Spring Boot 一起使用

我們?cè)谶@里單獨(dú)使用Servelet版本-算是為了給一些初學(xué)者提供部分代碼

Thymeleaf是一款用于渲染XML/XHTML/HTML5內(nèi)容的模板引擎，類(lèi)似JSP，Velocity，F(xiàn)reeMaker等，它也可以輕易的與Spring MVC等Web框架進(jìn)行集成作為Web應(yīng)用的模板引擎。

Thymeleaf最大的特點(diǎn)是能夠直接在瀏覽器中打開(kāi)并正確顯示模板頁(yè)面，而不需要啟動(dòng)整個(gè)Web應(yīng)用，但是總是看到說(shuō)其效率有點(diǎn)低

Thymeleaf 在有網(wǎng)絡(luò)和無(wú)網(wǎng)絡(luò)的環(huán)境下皆可運(yùn)行，即它可以讓美工在瀏覽器查看頁(yè)面的靜態(tài)效果，也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動(dòng)態(tài)頁(yè)面效果。這是由于它支持 html 原型，然后在 html 標(biāo)簽里增加額外的屬性來(lái)達(dá)到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時(shí)會(huì)忽略未定義的標(biāo)簽屬性，所以 thymeleaf 的模板可以靜態(tài)地運(yùn)行；當(dāng)有數(shù)據(jù)返回到頁(yè)面時(shí)，Thymeleaf 標(biāo)簽會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容，使頁(yè)面動(dòng)態(tài)顯示。
Thymeleaf 開(kāi)箱即用的特性。它提供標(biāo)準(zhǔn)和spring標(biāo)準(zhǔn)兩種方言，可以直接套用模板實(shí)現(xiàn)JSTL、 OGNL表達(dá)式效果，避免每天套模板、改jstl、改標(biāo)簽的困擾。同時(shí)開(kāi)發(fā)人員也可以擴(kuò)展和創(chuàng)建自定義的方言。

1.引入提示

在html頁(yè)面中引入thymeleaf命名空間，即，此時(shí)在html模板文件中動(dòng)態(tài)的屬性使用th:命名空間修飾。

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

這樣才可以在其他標(biāo)簽里面使用th:這樣的語(yǔ)法.這是下面語(yǔ)法的前提*.

2.變量表達(dá)式(獲取變量值)

<div th:text="'你是否讀過(guò)，'+${session.book}+'!!'">
    同EL表達(dá)式有些相似的效果，如果有數(shù)據(jù)，被替換
    完成前后端分離效果(美工代碼)
</div>

代碼分析：
1.可以看出獲取變量值用$符號(hào),對(duì)于javaBean的話使用變量名.屬性名方式獲取,這點(diǎn)和EL表達(dá)式一樣
2.它通過(guò)標(biāo)簽中的th:text屬性來(lái)填充該標(biāo)簽的一段內(nèi)容，意思是$表達(dá)式只能寫(xiě)在th標(biāo)簽內(nèi)部,不然不會(huì)生效,上面例子就是使用th:text標(biāo)簽的值替換div標(biāo)簽里面的值,至于div里面的原有的值只是為了給前端開(kāi)發(fā)時(shí)做展示用的.這樣的話很好的做到了前后端分離.意味著div標(biāo)簽中的內(nèi)容會(huì)被表達(dá)式${session.book}的值所替代，無(wú)論模板中它的內(nèi)容是什么，之所以在模板中“多此一舉“地填充它的內(nèi)容，完全是為了它能夠作為原型在瀏覽器中直接顯示出來(lái)。
3.訪問(wèn)spring-mvc中model的屬性，語(yǔ)法格式為“${}”，如${user.id}可以獲取model里的user對(duì)象的id屬性 
4.牛叉的循環(huán)<li th:each="book : ${books}" >

3.URL表達(dá)式(引入U(xiǎn)RL)

重點(diǎn)！重點(diǎn)！重點(diǎn)！

引用靜態(tài)資源文件(CSS使用th:href，js使用使用th:src)

href鏈接URL(使用th:href)

代碼分析
1.最終解析的href為：    
  /seconddemo/    
  /seconddemo/usethymeleaf?name=Dear 相對(duì)路徑，帶一個(gè)參數(shù)   
  /seconddemo/usethymeleaf?name=Dear&alis=Dear 相對(duì)路徑，帶多個(gè)參數(shù)
  /seconddemo/usethymeleaf?name=Dear&alis=Dear 相對(duì)路徑，帶多個(gè)參數(shù)
  /seconddemo/usethymeleaf/Dear 相對(duì)路徑，替換URL一個(gè)變量
  /seconddemo/usethymeleaf/Dear/Dear 相對(duì)路徑，替換URL多個(gè)變量
2.URL最后的(name=${name})表示將括號(hào)內(nèi)的內(nèi)容作為URL參數(shù)處理，該語(yǔ)法避免使用字符串拼接，大大提高了可讀性
3.@{/usethymeleaf}是Context相關(guān)的相對(duì)路徑，在渲染時(shí)會(huì)自動(dòng)添加上當(dāng)前Web應(yīng)用的Context名字，假設(shè)context名字為seconddemo，那么結(jié)果應(yīng)該是/seconddemo/usethymeleaf，即URL中以”/“開(kāi)頭的路徑(比如/usethymeleaf將會(huì)加上服務(wù)器地址和域名和應(yīng)用cotextpath，形成完整的URL。
4.th:href屬性修飾符:它將計(jì)算并替換使用href鏈接URL 值，并放入的href屬性中。
5.th:href中可以直接使用靜態(tài)地址

4.選擇或星號(hào)表達(dá)式

表達(dá)式很像變量表達(dá)式，不過(guò)它們用一個(gè)預(yù)先選擇的對(duì)象來(lái)代替上下文變量容器(map)來(lái)執(zhí)行*{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>

//等價(jià)于
<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.如果不考慮上下文的情況下，兩者沒(méi)有區(qū)別；星號(hào)語(yǔ)法評(píng)估在選定對(duì)象上表達(dá)，而不是整個(gè)上下文，什么是選定對(duì)象？就是父標(biāo)簽的值。上面的*{title}表達(dá)式可以理解為${book.title}。(父對(duì)象)  
2.當(dāng)然，美元符號(hào)和星號(hào)語(yǔ)法可以混合使用

小插曲：三和四的變量表達(dá)式、URL表達(dá)式所對(duì)應(yīng)的屬性都可以使用統(tǒng)一的方式：th.attr=“屬性名=屬性值”的方式來(lái)設(shè)置，參考第“七.設(shè)置屬性值”部分

5.文字國(guó)際化表達(dá)式

j簡(jiǎn)單看一下就可以，文字國(guó)際化表達(dá)式允許我們從一個(gè)外部文件獲取區(qū)域文字信息(.properties)，用Key索引Value，還可以提供一組參數(shù)(可選).

#{main.title}    
#{message.entrycreated(${entryId})} 可以在模板文件中找到這樣的表達(dá)式代碼：    
<table>
    <th th:text="#{header.address.city}">
    <th th:text="#{header.address.country}">
</table>

6. 表達(dá)式支持的語(yǔ)法

字面量（Literals）
- 文本文字（Text literals）: 'one text', 'Another one!',…
- 數(shù)字文本（Number literals）: 0, 34, 3.0, 12.3,…
- 布爾文本（Boolean literals）: true, false
- 空（Null literal）: null
- 文字標(biāo)記（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}|">

算術(shù)運(yùn)算（Arithmetic operations）
- 二元運(yùn)算符（Binary operators）: + , - , * , / , %
- 減號(hào)（Minus sign (unary operator)）: -
布爾操作（Boolean operations）
- Binary operators: and , or
- Boolean negation (unary operator): ! , not
比較和等價(jià)(Comparisons and equality)
- Comparators: > , < , >= , <= ( gt , lt , ge , le )
- Equality operators: == , != ( eq , ne )

條件運(yùn)算符（Conditional operators）三元運(yùn)算符

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

image

image

循環(huán)

渲染列表數(shù)據(jù)是一種非常常見(jiàn)的場(chǎng)景，例如現(xiàn)在有n條記錄需要渲染成一個(gè)表格或li列表標(biāo)簽該數(shù)據(jù)集合必須是可以遍歷的，使用th:each標(biāo)簽

image
```
代碼分析：
循環(huán)，在html的標(biāo)簽中，加入th:each=“value:${list}”形式的屬性，如可以迭代prods的數(shù)據(jù) 又如帶狀態(tài)變量的循環(huán)：
```
image

image

? 利用狀態(tài)變量判斷：

image

7.設(shè)置屬性值

1. th:attr 
    任何屬性值，語(yǔ)法格式：th:attr="屬性名=屬性值,[屬性名=屬性值]" 
    屬性值如果是使用表達(dá)式的話：通常有URL表達(dá)式@{}和變量表達(dá)式${}        
    但此標(biāo)簽語(yǔ)法不太優(yōu)雅    
    示例：        
th:attr="action=@{/subscribe}" //當(dāng)然也可以直接使用th:action                 
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" //可直接使用th:src  
th:attr="value=#{subscribe.submit}"http://可直接使用th:value        
<input type="checkbox" name="active" th:attr="checked=${user.active}"/>        
設(shè)置多個(gè)屬性在同一時(shí)間,有兩個(gè)特殊的屬性可以這樣設(shè)置： 
    th:alt-title 和 th:lang-xmllang        
    th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}"      
2.前置和后置添加屬性值  
    th:attrappend 和 th:attrprepend        
    主要對(duì)class和style兩個(gè)屬性        
    class="btn" th:attrappend="class=${' ' + cssStyle}"        
    轉(zhuǎn)換后：class="btn warning"      
3.還有兩個(gè)特定的添加屬性 
    th:classappend 和 th:styleappend        
    與上面的attrappend功能一樣        
    class="row" th:classappend="${prodStat.odd}? 'odd'"          
    轉(zhuǎn)換后：奇數(shù)行class="row odd"，偶數(shù)行class="row"

8.內(nèi)嵌變量Utilities

為了模板更加易用，Thymeleaf還提供了一系列Utility對(duì)象（內(nèi)置于Context中），可以通過(guò)#直接訪問(wèn)。

dates ： java.util.Date的功能方法類(lèi)    
calendars : 類(lèi)似#dates，面向java.util.Calendar    
numbers : 格式化數(shù)字的功能方法類(lèi)    
strings : 字符串對(duì)象的功能類(lèi)，contains,startWiths,prepending/appending等等    
objects: 對(duì)objects的功能類(lèi)操作    
bools: 對(duì)布爾值求值的功能方法    
arrays：對(duì)數(shù)組的功能類(lèi)方法    
lists: 對(duì)lists功能類(lèi)方法    
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)}//產(chǎn)生隨機(jī)字符串

9.thymeleaf布局

image

10.附錄

image

thymeleaf_3.0.5_中文參考手冊(cè) 提取碼：emk0

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Thymeleaf的基本語(yǔ)法

Thymeleaf的基本語(yǔ)法

Thymeleaf 的基本用法

1.引入提示

2.變量表達(dá)式(獲取變量值)

3.URL表達(dá)式(引入U(xiǎn)RL)

4.選擇或星號(hào)表達(dá)式

5.文字國(guó)際化表達(dá)式

6. 表達(dá)式支持的語(yǔ)法

7.設(shè)置屬性值

8.內(nèi)嵌變量Utilities

9.thymeleaf布局

10.附錄

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Thymeleaf的基本語(yǔ)法

Thymeleaf 的基本用法

1.引入提示

2.變量表達(dá)式(獲取變量值)

3.URL表達(dá)式(引入U(xiǎn)RL)

4.選擇或星號(hào)表達(dá)式

5.文字國(guó)際化表達(dá)式

6. 表達(dá)式支持的語(yǔ)法

7.設(shè)置屬性值

8.內(nèi)嵌變量Utilities

9.thymeleaf布局

10.附錄

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av