當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Spring Boot （四）模板引擎Thymeleaf集成

發(fā)布時(shí)間：2025/4/9 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 Spring Boot （四）模板引擎Thymeleaf集成小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

一、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ǔ)使用分為三部分：

標(biāo)簽使用

表達(dá)式使用

設(shè)置IDEA 對 Thymeleaf 代碼補(bǔ)全

1.標(biāo)簽使用

1.1 th:text 基礎(chǔ)信息輸出

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代碼：

展示效果：

1.3 th:if, th:unless 條件判斷

th:if為滿足條件的業(yè)務(wù)處理，th:unless正好相反，是除去的意思。

1.4 th:switch, th:case 多條件判斷

注意： 默認(rèn)選項(xiàng)使用th:case="*" 指定。

1.5 th:each 循環(huán)

HTML代碼：

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代碼：

頁面top.html

最終的效果：

1.7 th:with 定義局部變量

頁面代碼：

頁面輸出結(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代碼：

最終效果：

2.2.2 選擇表達(dá)式 *{...}

選擇表達(dá)式相當(dāng)于選擇了一個(gè)對象，在使用的時(shí)候不在需要這個(gè)對象的前綴，直接使用屬性的key進(jìn)行內(nèi)容展示，代碼如下：

最終效果：

iMac 7999.0 2018-08-10 14:03:51

總結(jié)： *{price} = ${goods.price}只是省去了“goods.”前綴，效果都是一樣的。

2.2.3 鏈接表達(dá)式 @{...}

用于轉(zhuǎn)換url，代碼如下：

最終呈現(xiàn)的效果：

鏈接表達(dá)式，可以傳遞參數(shù)，用逗號分隔。

服務(wù)器根相對路徑：@{~/path/to/something}

2.2.4 文本操作

文本操作分為兩個(gè)：文本拼加、文本替換

文本拼加：

文本替換：

文本替換的語法：|內(nèi)容${tag}|

2.2.5 三元表達(dá)式

2.2.6 雙括號作用

結(jié)果：

2.2.7 嵌入文本標(biāo)簽

雖然標(biāo)準(zhǔn)的標(biāo)簽幾乎可以滿足所有的業(yè)務(wù)場景，但某些情況我們更喜歡直接寫入HTML文本，例如：

<p>Hello, [[${name}]]</p>

嵌入文本有兩種寫法“[[...]]”和“[(...)]”，分別的作用就像th:text 和 th:utext 一樣，例如：

看到的效果是這樣的：

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 分為四步：

pom.xml 添加 Thymeleaf 模板引擎

application.properties 配置 Thymeleaf 信息

創(chuàng)建controller類，編寫代碼

創(chuàng)建模板，編寫html代碼

接下來我們具體分別來看具體的步驟。

3.3.1 pom.xml 添加 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=.html

Thymeleaf常用配置說明

配置項(xiàng)類型默認(rèn)值建議值說明

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)鍵代碼解讀：

@ResponseBody注解：如果使用該注解，返回結(jié)果會(huì)直接輸出，而不是使用模板引擎渲染

使用ModelAndView對象，指定視圖名&添加視圖對象

3.3.4 創(chuàng)建模板，編寫html代碼

我們在resources/templates下創(chuàng)建index.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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：零基础学习大数据：零基础学习大数据最完整
下一篇： Ant Design离线使用Icon图标

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

javascript

Spring Boot （四）模板引擎Thymeleaf集成

一、Thymeleaf介紹

二、Thymeleaf基礎(chǔ)使用

1.標(biāo)簽使用

1.1 th:text 基礎(chǔ)信息輸出

1.2 th:utext html內(nèi)容輸出

1.3 th:if, th:unless 條件判斷

1.4 th:switch, th:case 多條件判斷

1.5 th:each 循環(huán)

1.6 th:fragment、th:insert、th:replace、th:include 代碼片段復(fù)用

提高班——fragment代碼傳參

1.7 th:with 定義局部變量

1.8 th:remove 刪除標(biāo)簽

1.9 其他標(biāo)簽

2.表達(dá)式使用

2.1 表達(dá)式概要

2.1.1 簡單表達(dá)式

2.1.2 數(shù)據(jù)的類型

2.1.3 文本操作

2.1.4 算術(shù)運(yùn)算

2.1.5 布爾運(yùn)算

2.1.6 條件運(yùn)算符

2.1.7 條件判斷

2.2 表達(dá)式使用實(shí)例

2.2.1 變量表達(dá)式 ${...}

2.2.2 選擇表達(dá)式 *{...}

2.2.3 鏈接表達(dá)式 @{...}

2.2.4 文本操作

2.2.5 三元表達(dá)式

2.2.6 雙括號作用

2.2.7 嵌入文本標(biāo)簽

2.3 表達(dá)式對象概述

2.3.1 表達(dá)式基本對象

2.3.2 表達(dá)式實(shí)用工具類

3.IDEA設(shè)置Thymeleaf自動(dòng)補(bǔ)全

三、Spring Boot 集成 Thymeleaf

3.1 開發(fā)環(huán)境

3.2 Spring MVC目錄結(jié)構(gòu)

3.3 Spring Boot 集成 Thymeleaf 分為四步：

3.3.1 pom.xml 添加 Thymeleaf 模板引擎

3.3.2 application.properties 配置 Thymeleaf 信息

Thymeleaf常用配置說明

3.3.3 創(chuàng)建controller類，編寫代碼

3.3.4 創(chuàng)建模板，編寫html代碼

四、參考資料

總結(jié)