1.什么是Thymeleaf

??Spring Boot 主要支持Thymeleaf、Freenrtarker_、Mustache、Groovy Templates 等模板引擎。

目前成都創(chuàng)新互聯(lián)公司已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、沙坡頭網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

??Thymeleaf語(yǔ)法并不會(huì)破壞文檔的結(jié)構(gòu)，所以Thymeleaf模板依然是有效的HTML文檔。模 板還可以被用作工作原型，Thymeleaf會(huì)在運(yùn)行期內(nèi)替換掉靜態(tài)值。它的模板文件能直接在瀏覽器 中打開(kāi)并正確顯示頁(yè)面，而不需要啟動(dòng)整個(gè)Web應(yīng)用程序。

1.1 為什么需要模板引擎

??Thymeleaf解決了前端開(kāi)發(fā)人員要和后端開(kāi)發(fā)人員配置一樣環(huán)境的尷尬和低效。它通過(guò)屬性進(jìn) 行模板渲染，不需要引入不能被瀏覽器識(shí)別的新的標(biāo)簽。頁(yè)面直接作為HTML文件，用瀏覽器打開(kāi)頁(yè)面即可看到最終的效果，可以降低前后端人員的溝通成本。

1.2 使用Thymeleaf

要使用Thymeleaf,首先需要引入依賴。直接在pom.xml文件中加入以下依賴即可。

    org.springframework.boot
    spring-boot-starter-thymeleaf
    2.0.7.RELEASE

在模板文件中加入解析，在html文件中加入命名空間即可。

1.3 配置視圖解析器

??Spring Boot默認(rèn)的頁(yè)面映射路徑(即模板文件存放的位置)為 "classpath: /templates/*.html" 。 靜態(tài)文件路徑為 "classpath:/static/"，其中可以存放層疊樣式表CSS( Cascading Style Sheets )、 JS (JavaScript)等模板共用的靜態(tài)文件。在application.yml文件中，可以配置Thymeleaf模板解析器屬性

spring:
  thymeleaf:
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false

spring.thymeleaf.mode：代表 Thymeleaf 模式。

spring.thymeleaf.encodmg：代表 Thymeleaf 編碼格式。

thymeleaf.content-type：代表文檔類(lèi)型。

thymeleaf.cache:代表是否啟用 Thymeleaf 的緩存。

2.基礎(chǔ)用法

2.1 引用命名空間

??要使用Thymeleaf,則需要先要加入依賴，然后在模板文件中引用命名空間，如下：

??之后，會(huì)進(jìn)行Thymeleaf模板標(biāo)簽的渲染。如果用Spring Security作為安全認(rèn)證，且需要顯示登錄用戶的信息，則可以先在視圖中加入額外的thymeleaf-extras-springsecurity依賴

    org.thymeleaf.extras
    thymeleaf-extras-springsecurity3
    2.1.0.RELEASE

??然后 在模板文件中加入thymeleaf-extras-springsecurity命名空間，具體見(jiàn)以下代碼:

管理員
普通用戶

這里特別要注意查看 spring-boot—starter-thymeleaf 依賴和 thymeleaf-extras- springsecurity依賴的版本是否兼容。如果不兼容，則無(wú)法調(diào)用登錄用戶的信息。

2.2 常用th標(biāo)簽

（1）th:text

它用于顯示控制器傳入的name值。

如果name不存在，要顯示默認(rèn)值，則使用以下代碼：

（2）th:object

它用于接收后臺(tái)傳過(guò)來(lái)的對(duì)象，如以下代碼：

th:object="${user}"

（3）th:action

它用來(lái)指定表單提交地址。

（4）th:value

它用對(duì)象將id的值替換為value的屬性。

（5）th:field

它用來(lái)綁定后臺(tái)對(duì)象和表單數(shù)據(jù)。Thymeleaf里的"th:field"等同于"th:name"和"th: valued"其具體使用方法見(jiàn)以下代碼：

2.3 Thymeleaf 中的 URL 寫(xiě)法

Thymeleaf是通過(guò)語(yǔ)法@{…}來(lái)處理URL的，需要使用"th:href"和"th:src"等屬性，如以下代碼

絕對(duì)路徑
相對(duì)路徑
默認(rèn)訪問(wèn)static下的css文件夾

2.4用Thymeleaf進(jìn)行條件求值

Thymeleaf通過(guò) "th:if" 和 "th:unless" 屬性迸行條件判斷。在下面的例子中，標(biāo)簽只有 在 "th:if" 中的條件成立時(shí)才顯示。

Login

"th:unless" 與 "th:if" 恰好相反，只有當(dāng)表達(dá)式中的條件不成立時(shí)才顯示其內(nèi)容。在下方代碼中，如果用戶session為空，則不顯示登錄(login )鏈接。

Login

2.5 Switch

    
管理員
    
vip會(huì)員
    
普通會(huì)員

上述代碼的意思是：如果用戶角色(role)是admin,則顯示“管理員”；如果用戶角色是vip, 則顯示"vip會(huì)員”；如果都不是，則顯示“普通會(huì)員”，即使用“*”表示默認(rèn)情況。

2.6 Thymeleaf中的字符串替換

有時(shí)需要對(duì)文字中的某一處地方進(jìn)行替換，可以通過(guò)字符串拼接操作完成，如以下代碼：

或者：

上面的第2種形式限制比較多，|...|中只能包含變量表達(dá)式${...},不能包含其他常量、條件表達(dá)式等。

2.7 Thymeleaf的運(yùn)算符

1.算數(shù)運(yùn)算符。

????如果要在模板中進(jìn)行算數(shù)運(yùn)算，則可以用下面的寫(xiě)法。以下代碼表示求加和取余運(yùn)算。

??
??

2.條件運(yùn)算符

????下方代碼演示了 if判斷，表示：如果從控制器傳來(lái)的role值等于“admin”，則顯示 "歡迎您, 管理員"；如果role值等于 "vip"，則顯示 "歡迎您，vip會(huì)員"

    歡迎您，管理員


    歡迎您，vip

eq是判斷表達(dá)式，代表等于。其他的判斷表達(dá)式如下。

gt：大于。

ge：大于或等于。

eq：等于。

It：小于。

?? le：小于或等于。

ne：不等于。

3.判斷空值

可以使用if來(lái)判斷值是否為空，如以下代碼：

不為空
?為空

2.8 Thymeleaf公用對(duì)象

Thymeleaf還提供了一系列公用(utility)對(duì)象，可以通過(guò)"#"直接訪問(wèn)，如以下用法

格式化時(shí)間：

格式化時(shí)間

判斷是不是空字符串：

空

是否包含(分大小寫(xiě))：

包含

3. 處理循環(huán)遍歷

3.1 遍歷對(duì)象(object)

在開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到遍歷對(duì)象的情況，可以通過(guò) th:each="Object:$(Objects}"標(biāo)簽來(lái)處理。以下代碼是遍歷從控制器中傳來(lái)的書(shū)籍對(duì)象。

    
姓名
    
密碼

3.2 遍歷分頁(yè)(page)

分頁(yè)也是極為常見(jiàn)的開(kāi)發(fā)需求。在Thymeleaf中,可以通過(guò) th:each="item : ${page.content}"標(biāo)簽來(lái)處理page對(duì)象。如以下代碼

    
id
    
title

3.3 遍歷列表(list)

要處理list,也使用 th:each="item:${list}"標(biāo)簽來(lái)實(shí)現(xiàn)。

    
id
    
title

3.4 遍歷數(shù)組(array)

使用 th:each="item:${arrays}"標(biāo)簽來(lái)遍歷數(shù)組，如以下代碼：

    
id

3.5 遍歷集合(map)

集合通過(guò) th:text="${item.key}"顯示集合的 key,通過(guò) th:text="${item.value}" 顯示集合的值，如以下代碼：

4. 處理公共代碼塊

??一個(gè)網(wǎng)頁(yè)的結(jié)構(gòu)基本可以分為上(header )、中(body )、下(footer)三個(gè)部分。在一般情況 下，header和footer的信息在各個(gè)頁(yè)面都會(huì)重復(fù)顯示，如果每個(gè)頁(yè)面都復(fù)制一份代碼則太麻煩了。設(shè)計(jì)Thymeleaf的團(tuán)隊(duì)也考慮到代碼復(fù)用的問(wèn)題，提供了 "th:fragment" "th:include" 和 "th:replace"標(biāo)簽用來(lái)處理重復(fù)的代碼塊。具體用法如下。

4.1 用fragment標(biāo)記重復(fù)代碼塊

可以通過(guò)"th:fragment="header" 標(biāo)簽來(lái)標(biāo)記重復(fù)代碼塊，如以下代碼

    公共header


    公共footer

4.2 調(diào)用重復(fù)代碼塊

在需要調(diào)用的地方，用"th:include"或"th:replace"標(biāo)簽根據(jù)fragment值來(lái)調(diào)用，如以下代碼：

其中~{html文件名:: 通過(guò)fragment起的別名}

"th:include"和 "th:replace" 標(biāo)簽都可以調(diào)用公共代碼。它們的區(qū)別如下。

• th:replace：替換當(dāng)前標(biāo)簽為模板中的標(biāo)簽。比如上面用replace標(biāo)簽，則代碼替換為：

• th:include：只加載模板的內(nèi)容。比如上面用include標(biāo)簽，則代碼替換為：

5. 處理分頁(yè)

在MVC開(kāi)發(fā)過(guò)程中，分頁(yè)也是常用的功能。Thymeleaf可以處理由控制器傳入的分頁(yè)參數(shù)。

1.用控制器傳入page對(duì)象

Pageable pageable = PageRequest.of(start,limit,sort);
Page page = articleRepository.findAll(pageable);
ModelAndView modelAndView = new ModelAndView("/index");
modelAndView.addObject("page",page);
return modelAndView;

2.用Thymeleaf接收page對(duì)象并處理

    [首頁(yè)]
    [上頁(yè)]
    [上頁(yè)]
    [末頁(yè)]

6. 驗(yàn)證和提示錯(cuò)誤消息

大多數(shù)表單信息都需要逬行字符串的驗(yàn)證，以及提供錯(cuò)誤消息反饋。Thymeleaf提供了幾種提示錯(cuò)誤信息的方法。

6.1字段錯(cuò)誤信息提示

	email：
	
	郵箱錯(cuò)誤

6.2 提示所有錯(cuò)誤

	
郵箱錯(cuò)誤

當(dāng)前題目：視圖技術(shù)Thymeleaf-SpringBoot（4）
網(wǎng)頁(yè)URL：http://weahome.cn/article/dsojspp.html