這篇文章將更加全面詳細(xì)的介紹thymeleaf的使用。thymeleaf 是新一代的模板引擎，在spring4.0中推薦使用thymeleaf來(lái)做前端模版引擎。
創(chuàng)新互聯(lián)是一家專業(yè)提供且末企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為且末眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。
thymeleaf介紹
簡(jiǎn)單說(shuō)， Thymeleaf 是一個(gè)跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較與其他的模板引擎，它有如下三個(gè)極吸引人的特點(diǎn)：
1.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)顯示。
2.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)建自定義的方言。
3.Thymeleaf 提供spring標(biāo)準(zhǔn)方言和一個(gè)與 SpringMVC 完美集成的可選模塊，可以快速的實(shí)現(xiàn)表單綁定、屬性編輯器、國(guó)際化等功能。
標(biāo)準(zhǔn)表達(dá)式語(yǔ)法
它們分為四類：
1.變量表達(dá)式
2.選擇或星號(hào)表達(dá)式
3.文字國(guó)際化表達(dá)式
4.URL表達(dá)式
變量表達(dá)式
變量表達(dá)式即OGNL表達(dá)式或Spring EL表達(dá)式(在Spring術(shù)語(yǔ)中也叫model attributes)。如下所示： ${session.user.name}
它們將以HTML標(biāo)簽的一個(gè)屬性來(lái)表示：
重慶分公司
重慶分公司
選擇(星號(hào))表達(dá)式
選擇表達(dá)式很像變量表達(dá)式，不過(guò)它們用一個(gè)預(yù)先選擇的對(duì)象來(lái)代替上下文變量容器(map)來(lái)執(zhí)行，如下： *{customer.name}
被指定的object由th:object屬性定義：
... ... ...
文字國(guó)際化表達(dá)式
文字國(guó)際化表達(dá)式允許我們從一個(gè)外部文件獲取區(qū)域文字信息(.properties)，用Key索引Value，還可以提供一組參數(shù)(可選).
#{main.title}
#{message.entrycreated(${entryId})} 可以在模板文件中找到這樣的表達(dá)式代碼：
| ... | ... | ...
|---|
URL表達(dá)式
URL表達(dá)式指的是把一個(gè)有用的上下文或回話信息添加到URL，這個(gè)過(guò)程經(jīng)常被叫做URL重寫。 @{/order/list}
URL還可以設(shè)置參數(shù)：
@{/order/details(id=${orderId})}
相對(duì)路徑：
@{../documents/report}
讓我們看這些表達(dá)式：
變量表達(dá)式和星號(hào)表達(dá)有什么區(qū)別嗎？
如果不考慮上下文的情況下，兩者沒(méi)有區(qū)別；星號(hào)語(yǔ)法評(píng)估在選定對(duì)象上表達(dá)，而不是整個(gè)上下文
什么是選定對(duì)象？就是父標(biāo)簽的值，如下：
Name: Sebastian.
Surname: Pepper.
Nationality: Saturn.
這是完全等價(jià)于：
Name: Sebastian.
Surname: Pepper.
Nationality: Saturn.
當(dāng)然，美元符號(hào)和星號(hào)語(yǔ)法可以混合使用：
Name: Sebastian.
Surname: Pepper.
Nationality: Saturn.
表達(dá)式支持的語(yǔ)法
字面（Literals）
文本操作（Text operations）
算術(shù)運(yùn)算（Arithmetic operations）
布爾操作（Boolean operations）
比較和等價(jià)(Comparisons and equality)
條件運(yùn)算符（Conditional operators）
所有這些特征可以被組合并嵌套：
常用th標(biāo)簽都有那些？
| 關(guān)鍵字 | 功能介紹 | 案例 |
|---|---|---|
| th:id | 替換id | |
| th:text | 文本替換 | description |
| th:utext | 支持html的文本替換 | conten |
| th:object | 替換對(duì)象 | |
| th:value | 屬性賦值 | |
| th:with | 變量賦值運(yùn)算 | |
| th:style | 設(shè)置樣式 | th: |
| th:onclick | 點(diǎn)擊事件 | th:onclick="'getCollect()'" |
| th:each | 屬性賦值 | tr th:each="user,userStat:${users}"> |
| th:if | 判斷條件 | |
| th:unless | 和th:if判斷相反 | Login |
| th:href | 鏈接地址 | Login /> |
| th:switch | 多路選擇 配合th:case 使用 | |
| th:case | th:switch的一個(gè)分支 | User is an administrator |
| th:fragment | 布局標(biāo)簽，定義一個(gè)代碼片段，方便其它地方引用 | |
| th:include | 布局標(biāo)簽，替換內(nèi)容到引入的文件 | /> |
| th:replace | 布局標(biāo)簽，替換整個(gè)標(biāo)簽到引入的文件 | |
| th:selected | selected選擇框 選中 | th:selected="(${xxx.id} == ${configObj.dd})" |
| th:src | 圖片類地址引入 | |
| th:inline | 定義js腳本可以使用變量 | js附加代碼： /*[+ var msg = 'This is a working application'; +]*/ js移除代碼： /*[- */ var msg = 'This is a non-working template'; /* -]*/ 6、內(nèi)嵌變量 為了模板更加易用，Thymeleaf還提供了一系列Utility對(duì)象（內(nèi)置于Context中），可以通過(guò)#直接訪問(wèn)：
下面用一段代碼來(lái)舉例一些常用的方法： dates /*
* Format date with the specified pattern
* Also works with arrays, lists or sets
*/
${#dates.format(date, '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')}
/*
* Create a date (java.util.Date) object for the current date and time
*/
${#dates.createNow()}
/*
* Create a date (java.util.Date) object for the current date (time set to 00:00)
*/
${#dates.createToday()}
strings /*
* Check whether a String is empty (or null). Performs a trim() operation before check
* Also works with arrays, lists or sets
*/
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}
/*
* Check whether a String starts or ends with a fragment
* Also works with arrays, lists or sets
*/
${#strings.startsWith(name,'Don')} // also array*, list* and set*
${#strings.endsWith(name,endingFragment)} // also array*, list* and set*
/*
* Compute length
* Also works with arrays, lists or sets
*/
${#strings.length(str)}
/*
* Null-safe comparison and concatenation
*/
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}
/*
* Random
*/
${#strings.randomAlphanumeric(count)}
使用thymeleaf布局 使用thymeleaf布局非常的方便 定義代碼片段 在頁(yè)面任何地方引入： th:include 和 th:replace區(qū)別，include只是加載，replace是替換 返回的HTML如下：
下面是一個(gè)常用的后臺(tái)頁(yè)面布局，將整個(gè)頁(yè)面分為頭部，尾部、菜單欄、隱藏欄，點(diǎn)擊菜單只改變content區(qū)域的頁(yè)面 任何頁(yè)面想使用這樣的布局值只需要替換中見(jiàn)的 content模塊即可
也可以在引用模版的時(shí)候傳參 layout 是文件地址，如果有文件夾可以這樣寫 fileName/layout:htmlhead htmlhead 是指定義的代碼片段 如 th:fragment="copy" 源碼案例 這里有一個(gè)開(kāi)源項(xiàng)目幾乎使用了這里介紹的所有標(biāo)簽和布局，大家可以參考：cloudfavorites 以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。 名稱欄目：springboot中thymeleaf模板使用詳解 當(dāng)前地址：http://weahome.cn/article/jispjp.html 其他資訊 |
