javascript
Spring Boot (四)模板引擎Thymeleaf集成
一、Thymeleaf介紹
Thymeleaf是一種Java XML / XHTML / HTML5模板引擎,可以在Web和非Web環(huán)境中使用。它更適合在基于MVC的Web應(yīng)用程序的視圖層提供XHTML / HTML5,但即使在脫機(jī)環(huán)境中,它也可以處理任何XML文件。它提供了完整的Spring Framework集成。
關(guān)于Spring推薦Thymeleaf的這種說法,我在Spring官方文檔并沒有看到具體的說明,只是在和JSP比較的時(shí)候,說了JSP和Thymeleaf對比JSP的一些不足,而Thymeleaf只是作為其他模板引擎的一種代表。
作為一款優(yōu)秀的模板引擎,除了易用性、活躍的社區(qū)、健康快速的發(fā)展外,還有非常重要的一點(diǎn)就是性能了,那Thymeleaf 3 和 FreeMaker 的性能對比是怎么樣的,后續(xù)文章會(huì)陸續(xù)更新。
二、Thymeleaf基礎(chǔ)使用
Thymeleaf的使用是由兩部分組成的:標(biāo)簽 + 表達(dá)式,標(biāo)簽是Thymeleaf的語法結(jié)構(gòu),而表達(dá)式就是語法里的內(nèi)容實(shí)現(xiàn)。
通過標(biāo)簽 + 表達(dá)式,讓數(shù)據(jù)和模板結(jié)合,最終轉(zhuǎn)換成html代碼,返回給用戶。
Thymeleaf基礎(chǔ)使用分為三部分:
1.標(biāo)簽使用
1.1 th:text 基礎(chǔ)信息輸出
HTML代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body> <span th:text="${name}"></span> </body> </html>Java代碼:
@RequestMapping("/") public ModelAndView index() {ModelAndView modelAndView = new ModelAndView("/index");modelAndView.addObject("name", "老王");return modelAndView; }最終效果: 老王
1.2 th:utext html內(nèi)容輸出
使用"th:text"是對內(nèi)容的原樣輸出,使用“th:utext”可以進(jìn)行html標(biāo)簽輸出。
Java代碼:
@RequestMapping("/eat") public ModelAndView eat() {ModelAndView modelAndView = new ModelAndView("/cat");modelAndView.addObject("data", "<span style='color:red'>老王是吃貨</span>");return modelAndView; }HTML代碼:
<h4 th:text="'th:text '+${data}"></h4> <h4 th:utext="'th:utext '+${data}"></h4>展示效果:
1.3 th:if, th:unless 條件判斷
<span th:if="${age > 18}">成年 </span> <span th:unless="${age > 18}">未成年 </span>th:if為滿足條件的業(yè)務(wù)處理,th:unless正好相反,是除去的意思。
1.4 th:switch, th:case 多條件判斷
<div th:switch="${age}"><span th:case="18">18歲</span><span th:case="19">19歲</span><spa th:case="*">其他</spa> </div>注意: 默認(rèn)選項(xiàng)使用th:case="*" 指定。
1.5 th:each 循環(huán)
HTML代碼:
<div th:each="name,item:${names}"><span th:text="${item.count}"></span><span th:text="${name}"></span> </div>Java代碼:
@RequestMapping("/") public ModelAndView index() {ArrayList<String> names = new ArrayList<>();names.add("java");names.add("golang");names.add("nodejs");ModelAndView modelAndView = new ModelAndView("/index"); modelAndView.addObject("names",names);return modelAndView; }訪問效果如下:
其中item為每行的詳細(xì)值,key值如下:
- index 下標(biāo),從0開始
- count 第x個(gè),從1開始
- size 這個(gè)集合的大小
- current 當(dāng)前行的值
1.6 th:fragment、th:insert、th:replace、th:include 代碼片段復(fù)用
- th:fragment標(biāo)簽是聲明代碼片段,用于解決代碼復(fù)用的問題,好比Java程序?qū)懙墓么a一樣,每個(gè)需要的地方都可以直接調(diào)用;
- th:insert 引用fragment的代碼,保留自己的主標(biāo)簽;
- th:replace 引用fragment的代碼,不保留自己的主標(biāo)簽;
- th:include 使用類似th:replace,Thymeleaf3.0之后不推薦使用;
footer.html頁面代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body><div th:fragment="copyright">? 著作權(quán)歸 老王 所有 </div><div th:fragment="about">關(guān)于 </div><div th:fragment="links">CCTV </div></body> </html>聲明了兩個(gè)代碼片段,copyright和about。
cat.html頁面代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body> <div th:replace="footer :: copyright"></div><div th:insert="footer :: about"></div><div th:include="footer :: links"></div> </body> </html>其中第一個(gè)div引用了footer.html 的 copyright 代碼片段,第二個(gè)div引用了 footer.html 的 about 代碼片段。
雙冒號的理解: 其中使用“::”雙冒號來完成對頁面片段的引用,有點(diǎn)像php里面的語法,使用雙冒號來表示對類的靜態(tài)屬性和方法進(jìn)行直接引用。
執(zhí)行效果如下圖:
總結(jié): 可以很清晰的看出th:insert、th:replace、th:include之間的區(qū)別,在于是否保留自己的主標(biāo)簽,th:include 在3.0之后已經(jīng)不推薦使用了,可以使用th:replace標(biāo)簽替代。
提高班——fragment代碼傳參
使用fragment我們是可以在html代碼中傳參的,比如我們定義了一個(gè)top.html其中有一個(gè)“歡迎XXX”的提示,而這個(gè)人名XXX就是需要?jiǎng)討B(tài)傳遞的,這樣我們可以最大程度的完成代碼的復(fù)用,這個(gè)時(shí)候就是一個(gè)很好的使用場景,我們需要這樣做。
頁面main.html代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" > <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body><div th:replace="footer :: webcome('老王')"></div></body> </html>頁面top.html
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" > <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body><div th:fragment="webcome(about)"><span th:text="'歡迎:'+${about}"></span> </div></body> </html>最終的效果:
1.7 th:with 定義局部變量
頁面代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org" > <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body> <div th:with="sum=4-2"><span th:text="${sum}"></span> </div> </body> </html>頁面輸出結(jié)果:2
1.8 th:remove 刪除標(biāo)簽
th:remove用于html代碼的刪除,th:remove值有五個(gè):
- all 刪除本段所有代碼
- body 刪除主標(biāo)簽內(nèi)的所有元素
- tag 刪除主標(biāo)簽,保留主標(biāo)簽所有的元素
- all-but-first 保留主標(biāo)簽和第一個(gè)元素,其他全部刪除
- none 不刪除任何標(biāo)簽
示例index.html代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body><div id="all" th:remove="all"><span>all</span><span>1</span> </div><div id="body" th:remove="body"><span>body</span><span>2</span> </div><div id="tag" th:remove="tag"><span>tag</span><span>3</span> </div><div id="all-but-first" th:remove="all-but-first"><span>all-but-first</span><span>4</span> </div><div id="none" th:remove="none"><span>none</span><span>5</span> </div></body> </html>最終展示效果如下:
1.9 其他標(biāo)簽
- th:style 定義樣式 <div th:style="'color:'+${skinColor}">
- th:onclick 點(diǎn)擊事件 <input type="button" value=" Click " th:onclick="'onsub()'">
- th:href 賦值屬性href <a th:href="${myhref}"></a>
- th:value 賦值屬性value <input th:value="${user.name}" />
- th:src 賦值src <img th:src="${img}" />
- th:action 賦值屬性action <form th:action="@{/suburl}">
- th:id 賦值屬性id <form id="${fromid}">
- th:attr 定義多個(gè)屬性 <img th:attr="src=@{/img/stone.jpg},alt=${alt}" />
- th:object 定義一個(gè)對象 <div th:object="${user}">
- ...
2.表達(dá)式使用
2.1 表達(dá)式概要
2.1.1 簡單表達(dá)式
變量表達(dá)式:${...}
選擇變量表達(dá)式:*{...}
消息表達(dá)式:#{...}
鏈接表達(dá)式:@{...}
片段表達(dá):~{...}
2.1.2 數(shù)據(jù)的類型
文字:'one text', 'Another one!',…
數(shù)字文字:0, 34, 3.0, 12.3,…
布爾文字:true, false
NULL文字:null
文字標(biāo)記:one, sometext, main,…
2.1.3 文本操作
字符串拼接:+
字面替換:|The name is ${name}|
2.1.4 算術(shù)運(yùn)算
二進(jìn)制運(yùn)算符:+, -, *, /, %
減號(一元運(yùn)算符):-
2.1.5 布爾運(yùn)算
二進(jìn)制運(yùn)算符:and, or
布爾否定(一元運(yùn)算符):!, false
2.1.6 條件運(yùn)算符
比較值:>, <, >=, <=
相等判斷: ==, !=
2.1.7 條件判斷
如果-然后:(if) ? (then)
如果-然后-否則:(if) ? (then) : (else)
違約:(value) ?: (defaultvalue)
所有以上這些表達(dá)式都可以組合和嵌套,例如:
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
2.2 表達(dá)式使用實(shí)例
2.2.1 變量表達(dá)式 ${...}
變量表達(dá)式的使用,我們前面的代碼已經(jīng)見到了,$是我們平常開發(fā)中最常用的表達(dá)式,用于把后臺Java類的動(dòng)態(tài)數(shù)據(jù),映射到頁面,例如:
Java代碼:
public ModelAndView index() {ModelAndView modelAndView = new ModelAndView("/cat");modelAndView.addObject("data", "我是老王");return modelAndView; }HTML代碼:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body> <span th:text="${data}"></span> </body> </html>最終效果:
2.2.2 選擇表達(dá)式 *{...}
選擇表達(dá)式相當(dāng)于選擇了一個(gè)對象,在使用的時(shí)候不在需要這個(gè)對象的前綴,直接使用屬性的key進(jìn)行內(nèi)容展示,代碼如下:
<div th:object="${goods}"><span th:text="${goods.name}"></span><span th:text="*{price}"></span><span th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span> </div>最終效果:
iMac 7999.0 2018-08-10 14:03:51總結(jié): *{price} = ${goods.price}只是省去了“goods.”前綴,效果都是一樣的。
2.2.3 鏈接表達(dá)式 @{...}
用于轉(zhuǎn)換url,代碼如下:
<a th:href="@{/footer(id=666,name=laowang)}">鏈接</a>最終呈現(xiàn)的效果:
<a href="/footer?id=666&name=laowang">鏈接</a>
鏈接表達(dá)式,可以傳遞參數(shù),用逗號分隔。
服務(wù)器根相對路徑:@{~/path/to/something}
2.2.4 文本操作
文本操作分為兩個(gè):文本拼加、文本替換
文本拼加:
<span th:text="'我叫'+${name}"></span>文本替換:
文本替換的語法:|內(nèi)容${tag}|
<span th:text="|我叫${name},是一名開發(fā)工程師。|"></span>2.2.5 三元表達(dá)式
2.2.6 雙括號作用
<p th:text="${val}">...</p> <p th:text="${{val}}">...</p>結(jié)果:
<p>1234567890</p> <p>1,234,567,890</p>2.2.7 嵌入文本標(biāo)簽
雖然標(biāo)準(zhǔn)的標(biāo)簽幾乎可以滿足所有的業(yè)務(wù)場景,但某些情況我們更喜歡直接寫入HTML文本,例如:
<p>Hello, [[${name}]]</p>嵌入文本有兩種寫法“[[...]]”和“[(...)]”,分別的作用就像th:text 和 th:utext 一樣,例如:
<p>[[${name}]] </p> <p>[(${name})] </p>看到的效果是這樣的:
2.3 表達(dá)式對象概述
表達(dá)式里面的對象可以幫助我們處理要展示的內(nèi)容,比如表達(dá)式的工具類dates可以格式化時(shí)間,這些內(nèi)置類的熟練使用,可以讓我們使用Thymeleaf的效率提高很多。
2.3.1 表達(dá)式基本對象
- #ctx: 操作當(dāng)前上下文.
- #vars: 操作上下文變量.
- #request: (僅適用于Web項(xiàng)目) HttpServletRequest對象.
- #response: (僅適用于Web項(xiàng)目) HttpServletResponse 對象.
- #session: (僅適用于Web項(xiàng)目) HttpSession 對象.
- #servletContext: (僅適用于Web項(xiàng)目) ServletContext 對象.
2.3.2 表達(dá)式實(shí)用工具類
- #execInfo: 操作模板的工具類,包含了一些模板信息,比如:${#execInfo.templateName} .
- #uris: url處理的工具
- #conversions: methods for executing the configured conversion service (if any).
- #dates: 方法來源于 java.util.Date 對象,用于處理時(shí)間,比如:格式化.
- #calendars: 類似于 #dates, 但是來自于 java.util.Calendar 對象.
- #numbers: 用于格式化數(shù)字.
- #strings: methods for String objects: contains, startsWith, prepending/appending, etc.
- #objects: 普通的object對象方法.
- #bools: 判斷bool類型的工具.
- #arrays: 數(shù)組操作工具.
- #lists: 列表操作數(shù)據(jù).
- #sets: Set操作工具.
- #maps: Map操作工具.
- #aggregates: 操作數(shù)組或集合的工具.
每個(gè)類中的具體方法,點(diǎn)擊查看:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects
3.IDEA設(shè)置Thymeleaf自動(dòng)補(bǔ)全
先上效果圖:
IDEA默認(rèn)是開啟了Thymeleaf 插件支持的,如果不放心需要驗(yàn)證,請?jiān)L問:https://www.jetbrains.com/help/idea/2018.2/thymeleaf.html
但僅僅是配置上面的效果,依然是無法正常使用的,原因是你要在html中聲明 Thymeleaf 命名空間 xmlns:th="http://www.thymeleaf.org" ,完整代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><h2 th:text="${hi}"></h2> </body> </html>其中關(guān)鍵的代碼是:
xmlns:th="http://www.thymeleaf.org"
這樣當(dāng)你在代碼輸入“th:”的時(shí)候就會(huì)看到 Thymeleaf 的所有標(biāo)簽了。
三、Spring Boot 集成 Thymeleaf
3.1 開發(fā)環(huán)境
- Spring Boot 2.0.4
- Thymeleaf 3.0.9
- Jdk 8
- Windows 10
- IDEA 2018.2
在正式集成Thymeleaf引擎之前,先來看下目錄結(jié)構(gòu)如圖:
3.2 Spring MVC目錄結(jié)構(gòu)
除去包名,我們來解釋一下這些目錄代表的含義:
- common 通用公共類
- controller 控制器類
- dao 數(shù)據(jù)交互類
- service 業(yè)務(wù)邏輯處理類
- Application.java 啟動(dòng)文件
- resources 靜態(tài)文件存儲文件夾
- resources/templates 所有的Thymeleaf目錄存放目錄
- resources/application.properties 全局配置類
- pom.xml Maven 配置文件
3.3 Spring Boot 集成 Thymeleaf 分為四步:
接下來我們具體分別來看具體的步驟。
3.3.1 pom.xml 添加 Thymeleaf 模板引擎
<!--thymeleaf模板--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>3.3.2 application.properties 配置 Thymeleaf 信息
# 啟用緩存:建議生產(chǎn)開啟 spring.thymeleaf.cache=false # 建議模版是否存在 spring.thymeleaf.check-template-location=true # Content-Type 值 spring.thymeleaf.servlet.content-type=text/html # 是否啟用 spring.thymeleaf.enabled=true # 模版編碼 spring.thymeleaf.encoding=utf-8 # 應(yīng)該從解析中排除的視圖名稱列表(用逗號分隔) spring.thymeleaf.excluded-view-names= # 模版模式 spring.thymeleaf.mode=HTML5 # 模版存放路徑 spring.thymeleaf.prefix=classpath:/templates/ # 模版后綴 spring.thymeleaf.suffix=.htmlThymeleaf常用配置說明
| spring.thymeleaf.enabled | bool | true | 默認(rèn) | 是否啟用 |
| spring.thymeleaf.mode | String | HTML | 默認(rèn) | 模板類型,可以設(shè)置為HTML5 |
| spring.thymeleaf.cache | bool | true | 默認(rèn) | 是否啟用緩存,生成環(huán)境建議設(shè)置為true |
| spring.thymeleaf.prefix | String | classpath:/templates/ | 默認(rèn) | 模版存放路徑 |
| spring.thymeleaf.suffix | String | .html | 默認(rèn) | 模版后綴 |
| spring.thymeleaf.servlet.content-type | String | text/html | 默認(rèn) | Content-Type 值 |
| spring.thymeleaf.encoding | String | - | utf-8 | 模版編碼 |
3.3.3 創(chuàng)建controller類,編寫代碼
我們在controller文件夾創(chuàng)建index.java,代碼如下:
package com.hello.springboot.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; @Controller @RequestMapping("/") public class Index {@RequestMapping("/")public ModelAndView index() {ModelAndView modelAndView = new ModelAndView("/index");modelAndView.addObject("name", "王磊的博客");return modelAndView;} }關(guān)鍵代碼解讀:
3.3.4 創(chuàng)建模板,編寫html代碼
我們在resources/templates下創(chuàng)建index.html,代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"><title>王磊的博客</title> </head> <body> <span th:text="${name}"></span> </body> </html>啟動(dòng)調(diào)試,在瀏覽器輸入:http://localhost:8080/
效果如下:
相關(guān)代碼GitHub:https://github.com/vipstone/springboot-example.git
四、參考資料
thymeleaf官方文檔 Thymeleaf :https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
thymeleaf官方文檔 Spring + Thymeleaf :https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html
posted @ 2018-09-05 19:49?王磊的博客 閱讀(...) 評論(...) 編輯 收藏 刷新評論刷新頁面返回頂部 Copyright ? 2019 王磊的博客轉(zhuǎn)載于:https://www.cnblogs.com/vipstone/p/9594092.html
總結(jié)
以上是生活随笔為你收集整理的Spring Boot (四)模板引擎Thymeleaf集成的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 零基础学习大数据:零基础学习大数据最完整
- 下一篇: Ant Design离线使用Icon图标