一、Thymeleaf简介以及引入

Spring Boot推荐使用Thymeleaf模板引擎来做前端动态页面，它用来替代jsp。
模板引擎作用：
我们先编写一个前端页面模板，页面模板上需要动态数据的写上模板引擎规定的表达式，然后模板引擎解析后端传入的数据，根据前端页面模板上的表达式，将数据填充到页面模板上的指定位置，形成动态页面。
在这里插入图片描述

Thymeleaf简介：
Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP，Velocity，FreeMaker等，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比，Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。Thymeleaf旨在提供⼀个优雅的、⾼度可维护的创建模板的⽅式。为了实现这⼀⽬标，Thymeleaf建⽴在⾃然模板的概念上，将其逻辑注⼊到模板⽂件中，不会影响模板设计原型。
Thymeleaf引入（Maven）：
Spring Boot有专门的starter引入Thymeleaf：spring-boot-starter-thymeleaf，可以去Spring Boot官方文档starter章节查看。


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


		3.0.9.RELEASE
		
		
		2.2.2

Thymeleaf使用：
我们去找autoconfigure.jar包里的org.springframework.boot.autoconfigure.thymeleaf包下的ThymeleafAutoConfiguration类，它是Thymeleaf的自动配置类

@Configuration
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass(TemplateMode.class)
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {

@EnableConfigurationProperties(ThymeleafProperties.class)引入了Thymeleaf的配置类，有关Thymeleaf的相关配置都在这

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {

	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
   //前缀
	public static final String DEFAULT_PREFIX = "classpath:/templates/";
   //后缀
	public static final String DEFAULT_SUFFIX = ".html";
    /**
	 * Prefix that gets prepended to view names when building a URL.
	 */
	private String prefix = DEFAULT_PREFIX;

	/**
	 * Suffix that gets appended to view names when building a URL.
	 */
	private String suffix = DEFAULT_SUFFIX;

	/**
	 * Template mode to be applied to templates. See also Thymeleaf's TemplateMode enum.
	 */
	private String mode = "HTML";

从这就可以知道只要把HTML页面放在classpath:/templates/目录下，thymeleaf就能自动渲染。这些配置我们可以在配置文件中使用spring.thymeleaf改掉。
我们在写thymeleaf页面模板的的时候需要导入名称空间：

如果使用eclipse开发需要安装Thymeleaf插件才能有提示功能。
1、在线安装：
方法一：点击Help>Install New Software>add,然后Location输入http://www.thymeleaf.org/eclipse-plugin-update-site/;name随意。然后一路next即可。
方法二：点击Help>Eclipse Marketplace，输入Thymeleaf查找，找到后点击Install。
2、离线安装：
方法一：下载Thymeleaf插件，点击Help>Install New Software>add，点击Location选择插件压缩包，然后一路next。插件下载链接: https://pan.baidu.com/s/1C-GtRUcGzvr7GzZMMvDFeQ 提取码: wknb。
方法二：下载Thymeleaf插件解压，然后再eclipse安装目录下新建一个文件夹，将Thymeleaf插件解压后的文件放入这个文件夹中，再新建一个links文件夹，新建Thymeleaf.link文件，里面内容：

path=D:/Eclipse-SpringTools/sts-bundle/sts-3.7.1.RELEASE/myplugins/thymeleaf-extras-eclipse-plugin-2.1.2

然后重启eclipse即可。

二、Thymeleaf语法简介

Thymeleaf官网下载Thymeleaf官方文档（https://www.thymeleaf.org/documentation.html）选择3.0版本的pdf下载即可。或者下载中文文档，链接: https://pan.baidu.com/s/1z5hbKIN3xRoLf1QncblKmA 提取码: 8qqm
Thymeleaf简单示例：




    
    Test


    
    这是显示欢迎信息

这章示例来源：Thymeleaf官方文档。

1、th语法

1.1 设置属性值

（1）设置任何属性：
可以使用th:attr来设置，多个属性中间使用逗号分隔，示例：

属性也可以使用：th：任意html属性，来设置。作用和上面一样。它可以用来替换原生属性的值（即使在标准⽅⾔中没有为其定义特定的th:*处理器）。示例：

推荐使用第二种方式的写法。 （2）前缀和后缀
Thymeleaf还提供th:attrprepend和th:attrappend属性，它们为现有属性值设置前缀和后缀。

Thymeleaf标准⽅⾔中还有两个特定的附加属性：th:classappend和th:styleappend属性，⽤于将CSS类或样式⽚段添加到元素中，⽽不覆盖现有属性。示例：

（3）固定值的布尔属性
HTML具有布尔属性的概念，这个布尔属性没有值，并且⼀旦这个布尔属性存在则意味着属性值为“true”。但是在XHTML中，这些属性只取⼀个值，这个属性值就是它本身。例如：checked,selected等

Thymeleaf标准⽅⾔允许您通过计算条件表达式的结果来设置这些属性的值，如果条件表达式结果为true，则该属性将被设置为其固定值，如果评估为false，则不会设置该属性。

（4）HTML5友好属性语法
hymeLeaf还⽀持HTML5友好属性语法来处理模版。



...
...

data-th-each相当于th:each。

1.2 循环

（1）基本语法
ThymeLeaf使用th:each语法来进行循环遍历，相当于jsp中的c:forEach。示例：


Onions
2.41
yes

我们称$ {prods}迭代表达式或被迭代变量；prod为迭代变量或简单的iter变量。，prod iter变量的作⽤域为元素，这意味着它可⽤于内部标记，如。
(2)迭代状态
当使⽤th:each时，Thymeleaf提供了⼀种⽤于跟踪迭代状态的机制：状态变量。状态变量在每个th:each属性中定义，并包含以下数据：

当前迭代索引，从0开始。这是index属性。
当前的迭代索引，从1开始。这是count属性。
迭代变量中元素的总量。这是size属性。
每次迭代的iter变量。这是current属性。
当前的迭代是偶数还是奇数。这些是even/odd布尔属性。
当前的迭代是否是第⼀个迭代。这是first布尔属性。
当前的迭代是否是最后⼀个迭代。这是last布尔属性。
示例：


Onions
2.41
yes

迭代状态变量（本示例中的iterStat）在th:each属性中通过在iter变量本身之后直接写其名称来定义，⽤逗号分隔。就像iter变量⼀样，状态变量的作⽤范围也是th:each属性的标签定义的代码⽚段中。如果没有显式地设置状态变量，则Thymeleaf将始终为您创建⼀个默认的迭代变量，该状态迭代变量名称为：迭代变量+“Stat”。（本例中则是prodStat）

1.3 条件判断

Thymeleaf使用th:if语法来做条件判断。当表达式满⾜某个条件，才将⼀个模板⽚段显示在结果中。示例：


view

th:if属性不仅只以布尔值作为判断条件，它将按照这些规则判定指定的表达式值为true：

如果表达式的值不为null：
如果值为布尔值，则为true。
如果值是数字，并且不为零
如果值是⼀个字符且不为零
如果value是String，⽽不是“false”，“off”或“no”
如果值不是布尔值，数字，字符或字符串。

th:if还有⼀个反向属性，th:unless，我们可以在前⾯的例⼦中使⽤：

view

（2）switch语法
示例：


User is an administrator
User is a manager

请注意，只要第⼀个th:case的值为true，则同⼀个switch语句中的其他th:case属性将被视为false。switch语句的default选项指定为th:case =“*”：


User is an administrator
User is a manager
User is some other thing

1.4模板布局语法

（1）声明模板片段及引用
在我们的模板中，我们经常希望从其他模板中包含⼀些部分，如⻚脚，⻚眉，菜单等部分。Thymeleaf使⽤th:fragment属性来定义被包含的模版⽚段，以供其他模版引用。我们在一个名为footer.html模板页加入下面这段代码：


© 2011 The Good Thymes Virtual Grocery

这段代码声明了一个名为copy的片段，我们可以使⽤th:insert或th:replace属性（以及th:include，尽管Thymeleaf 3.0不再推荐使⽤它），容易地包含在我们的主⻚中：


或者：

〜{…}称为片段表达式，它是可选的（上面第二种写法）。
片段表达式语法：

“〜{templatename :: selector}”：templatename是模板名（加上路径），selector是选择器，可以是片段名，也可以使用css选择器的方式说明，例如："#id"、".class"。具体见Thymeleaf官方文档附录C。
“〜{templatename}” ：包含名为templatename的整个模板。
〜{:: selector}“或”〜{this :: selector}“ ：包含在同⼀模板中的匹配指定选择器的⽚段。

⽚段可以包含任何th:*属性。⼀旦将⽚段包含在⽬标模板（具有th:insert /th:replace属性的模板）中，这些属性将被计算属性表达式的值，并且它们将能够引⽤此⽬标模板中定义的任何上下⽂变量。 th:insert和th:replace(th:include)之间的区别

th:insert是最简单的：它将简单地插⼊指定宿主标签的标签体中。
th:replace实际上⽤指定的⽚段替换其宿主标签。
th:include类似于th:insert，⽽不是插⼊⽚段，它只插⼊此⽚段的内容。
示例：

copy片段：

© 2011 The Good Thymes Virtual Grocery






结果：


© 2011 The Good Thymes Virtual Grocery




© 2011 The Good Thymes Virtual Grocery



© 2011 The Good Thymes Virtual Grocery

（2）片段参数
Thymeleaf支持在定义片段名的时候给他加上参数，相当于函数的形参。在使用th:insert和th:replace(th:include)时，给参数赋值，相当于实参。


       ...


...

...

即使⽚段没有定义参数：

...

我们也可以使用第二种语法（必须这种）来调用：

那么我们在片段中（即使不在同一个模板中）也同样可以使用${onevar}和${twovar}的方式调用这两个变量。等价于th:replace和th:with的组合：

th:with是声明变量用的。（3）删除模板片段
Thymeleaf使用th:remove语法来做删除模板中不需要的片段。假设我们在做模板时需要加上一些模拟数据，方便在静态页面展示时用，而当正式使用模板引擎生成页面时不需要这些模拟数据时，就可以使用th:remove语法来删除这些模拟的模板片段。示例：


   Mild Cinnamon
   1.99
   yes
   
      3 comment/s
      view

当生成动态页面时，这段代码就会被删除。
th:remove参数：

all：删除包含标签及其所有⼦项。
body：不要删除包含的标签，但删除所有的⼦项。
tag：删除包含的标签，但不要删除其⼦项。
all-but-first：删除除第⼀个包含标签之外的所有⼦代。
none：什么都不做。该值对于动态计算是有⽤的。

th:remove将null视为none

1.5 局部变量

Thymeleaf中的局部变量是指定义在模版⽚段中的变量，并且该变量的作⽤域为所在的模版⽚段。示例：

...

prod 迭代变量就是⼀个局部变量，仅在标签的范围内可⽤。

它可⽤于在该标签中执⾏的优先级低于th:each的任何其他th:*属性（这意味着它们将在th:each之后执⾏）。
它可⽤于标签的任何⼦元素，例如任何元素。

Thymeleaf提供了⼀种声明局部变量的⽅式，就是th:with，相当于jsp中的c:set。示例：


   
   The name of the first person is Julius Caesar.

当th:with被处理时，firstPer变量被创建为局部变量并被添加到来⾃上下⽂map中，以便它可以与上下⽂中声明的任何其他变量⼀起使⽤，但只能在包含在

标签内使⽤。

1.6 属性的优先级

当在同⼀个标签中写⼊多于⼀个的th:*属性时，Thymeleaf会按照属性定义的数字优先级来解析属性。优先级列表如下： Order Feature Attributes 1 Fragment inclusion 片段包含 th:insert th:replace 2 Fragment iteration 循环迭代 th:each 3 Conditional evaluation 条件判断 th:if th:unless th:switch th:case 4 Local variable definition 局部变量定义 th:object th:with 5 General attribute modification 属性修改 th:attr th:attrprepend th:attrappend 6 Specific attribute modification 指定属性修改 th:value th:href th:src … 7 Text (tag bodymodification) 修改标签体内容 th:text（转义特殊字符） th:utext（不转义特殊字符） 8 Fragment specification 声明片段 th:fragment 9 Fragment removal 删除片段 th:remove

1.7内联

（1）内联表达式
有时候我们需要把表达式写在HTML文本中，而不是标签体内。Thymeleaf提供[[…]]或[(…)]的写法来实现，[[…]]相当于t:text会转义特殊字符、[(…)]相当于t:utext不会转义特殊字符。示例：

[[${msg}]]
[(${msg})]

假设msg =’

你好！

’,那么[[…]]在页面上就是显示的“

你好！

“,[(…)]则是一个大标题显示的”你好！“。
禁用内联：th:inline =“none”。当我们需要输出[[…]]或[（…）]序列⽽不将其内容作为表达式处理的情况时。

A double array looks like this: [[1, 2, 3], [4, 5]]!

A double array looks like this: [[1, 2, 3], [4, 5]]!

（2）内联JavaScript和css
示例：

2、表达式语法

简单表达式：
- 变量表达式：$ {…}
- 选择变量表达式：* {…}
- 消息表达式：＃{…}
- 链接⽹址表达式：@ {…}
- ⽚段表达式：〜{…}
字面量
- 文本：‘one text’ , ‘Another one!’
- 数字字⾯值：0,34,3.0,12.3，…
- 布尔⽂字：true，false
- null
- ⽂字Token：one，sometext，main，…
⽂本操作
- 字符串连接：+
- ⽂本替换：|The name is ${name}|
算术运算符
- ⼆进制运算符：+，-，*，/，%
- 负号（⼀元运算符）：-
布尔运算符
- ⼆进制运算符：and 、or
- 布尔否定（⼀元运算符）：！，not
⽐较和相等运算符：
- ⽐较运算符：>，<，> =，<=（gt，lt，ge，le）
- 相等运算符：==，！=（eq，ne）
条件运算符：
- If-then:(if) ? (then)
- If-then-else:(if) ? (then) : (else)
- Default:(value) ?: (defaultvalue)
特殊符号：
- 哑操作符：_
  示例：

'User is of type ' + (${user.isAdmin()} ? 'Administrator': (${user.type} ?: 'Unknown'))

2.1 消息表达式＃{…}

Thymeleaf使用＃{…}作为消息表达式，所谓消息其实就是从配置文件中取出的变量。一般用来做国际化功能。示例：

Welcome to our grocery store!

home.welcome是在配置文件中配置的。

2.2变量表达式${}

$ {…}表达式实际上是在上下⽂中包含的变量的映射上执⾏的OGNL（Object-Graph Navigation Language）对象。
示例：

对象：
${person.father.name}
${person['father']['name']}

map:
${countriesByCode.ES}
${personsByName['Stephen Zucchini'].age}

数组/list:
${personsArray[0].name}

调用对象的方法：
${person.createCompleteName()}
${person.createCompleteNameWithSeparator('-')}

内置基本表达式对象：
从＃符号开始：

#ctx：上下⽂对象。
#vars：上下⽂变量。
#locale：上下⽂区域设置。
#request :(仅在Web Contexts中）HttpServletRequest对象。
#response：（仅在Web上下⽂中）HttpServletResponse对象。
#session :(仅在Web上下⽂中）HttpSession对象。
#servletContext :(仅在Web上下⽂中）ServletContext对象。

示例：

获取国家信息：
US

具体调用可以参照官方文档附录A。 工具表达式对象：
Thymeleaf将为我们提供⼀组⼯具对象：

#execInfo：有关正在处理的模板的信息。
#messages：⽤于在变量表达式中获取外部化消息的⽅法，与使⽤＃{…}语法获得的⽅式相同。
#uris：转义URL / URI部分的⽅法
#conversions：执⾏配置的转换服务（如果有的话）的⽅法。
#dates：java.util.Date对象的⽅法：格式化，组件提取等
#calendars：类似于#dates，但对于java.util.Calendar对象。
#numbers：⽤于格式化数字对象的⽅法。
#strings：String对象的⽅法：contains，startsWith，prepending/appending等
#objects：⼀般对象的⽅法。
#bools：布尔评估的⽅法。
#arrays：数组的⽅法。
#lists：列表的⽅法。
#sets：集合的⽅法。
#maps：地图⽅法。
#aggregates：在数组或集合上创建聚合的⽅法。
#ids：处理可能重复的id属性的⽅法（例如，作为迭代的结果）。

具体调用参考官方文档附录B 2.3 选择表达式*{}
*{}和${}基本相同，只有一个区别：星号语法计算所选对象⽽不是整个上下⽂的表达式。也就是说，只要没有选定的对象，$和*语法就会完全相同。示例：


   Name: Sebastian.
   Surname: Pepper.
   Nationality: Saturn.

等价于：


   Name: Sebastian.
   Surname: Pepper.
   Nationality: Saturn.

或者：


   Name: Sebastian.

如果没有执⾏对象选择，则$和星号语法是等效的。

2.4 URL链接表达式@{}

示例：


view
view
view

注意：

如果需要⼏个参数，这些参数将以逗号分隔：@ {/ order /process（execId = $ {execId}，execType =‘FAST’）}
以/开头的相对URL（例如：/ order / details）将⾃动以应⽤程序上下⽂名称为前缀。
URL路径中也允许使⽤变量模板：@ {/ order / {orderId} /details（orderId = $ {orderId}）}

2.5 片段引用表达式~{}

示例：

...

2.6 字面量

（1）纯⽂本
⽂本⽂字只是包含在单引号之间的字符串。它们可以包含任何字符，但是应该使⽤’转义其中的任何单引号。


Now you are looking at a template file.

（2）数字

The year is 1492.
In two years, it will be 1494.

（3）布尔
布尔字⾯量包含true和false。

== false被写在⼤括号之外，所以它是Thymeleaf来处理的。如果它是写在⼤括号内，那将是OGNL / SpringEL引擎的责任。
（4）NULL

（5）⽂本符号
和纯文本类似，但是没有单引号引起来。只允许使⽤字⺟（A-Z和a-z），数字（0-9），括号（[和]），点（.），连字符（ - ）和下划线（_）。所以没有空⽩，没有逗号等。

...

2.7 文本操作

(1)追加⽂本

(2)文本替换
⽂本替换允许容易地格式化包含变量值的字符串，⽽不需要使⽤“…”+“…”附加⽂字。


等价与：

只有变量/消息表达式（$ {…}，* {…}，＃{…}）才允许包含在|…|中来实现⽂本替换。其他情况则不允许，如⽂本（’…’），布尔/数字令牌，条件表达式等。

2.8 算术运算符

Thyme Leaf标准表达式还⽀持⼀些算术运算：+， - ，*，/和％

请注意，这些运算符也可以在OGNL变量表达式本身中应⽤（在这种情况下将由OGNL解析执⾏，⽽不是Thymeleaf标准表达式引擎来解析执⾏。

其中⼀些运算符存在⽂本别名：div（/），mod（％）

2.9 比较和等值运算符

表达式中的值可以与>，<，> =和<=符号进⾏⽐较，并且可以使⽤==和！=运算符来检查是否相等（或缺少）。请注意，XML类型的模版中不应在属性值中使⽤<和>符号，应该使⽤＆lt; 和＆gt;。

⼀个更简单的替代⽅案是使⽤这些运算符的⽂本别名：gt（>），lt（<），ge（> =），le（<=），⾮（！）。还有eq（==），neq /ne（！=）。

2.10 条件表达式

...

条件表达式（condition，then和else）的三个部分都有⾃⼰的表达式，这意味着它们可以是变量（$ {…}，* {…}），消息（＃{…}），URL（@{…}）或⽂字（’…’）。
条件表达式也可以使⽤括号嵌套：

...

Else表达式也可以省略，在这种情况下，如果条件为false，则返回null值：


...
`在这里插入代码片`

2.11 默认表达式

默认表达式是⼀种特殊类型的条件值，没有then那个部分。允许您指定两个表达式：如果计算结果不为null，则使⽤第⼀个表达式，但如果计算结果为null则使⽤第⼆个表达式。


   ...
   Age: 27.

age不为null，则是age的值，否则就是no age specified。
可以在括号之间包含嵌套表达式：


Name:
   Sebastian

2.12 哑操作符号

哑操作符号由下划线符号（_）表示。这个标记指定表达式不处理任何结果，即相当于可执⾏的属性（例如：⽂
本）不存在⼀样。

no user authenticated

Spring Boot学习笔记（五）Web开发之Thymeleaf模板引擎

一、Thymeleaf简介以及引入

二、Thymeleaf语法简介

1、th语法

1.1 设置属性值

1.2 循环

1.3 条件判断

1.4模板布局语法

1.5 局部变量

1.6 属性的优先级

1.7内联

你好！

你好！

2、表达式语法

2.1 消息表达式＃{…}

2.2变量表达式${}

2.4 URL链接表达式@{}

2.5 片段引用表达式~{}

2.6 字面量

2.7 文本操作

2.8 算术运算符

2.9 比较和等值运算符

2.10 条件表达式

2.11 默认表达式

2.12 哑操作符号

Ta的文章更多 >>

热门文章

Spring Boot学习笔记（五）Web开发之Thymeleaf模板引擎

一、Thymeleaf简介以及引入

二、Thymeleaf语法简介

1、th语法

1.1 设置属性值

1.2 循环

1.3 条件判断

1.4模板布局语法

1.5 局部变量

1.6 属性的优先级

1.7内联

你好！

你好！

2、表达式语法

2.1 消息表达式＃{…}

2.2变量表达式${}

2.4 URL链接表达式@{}

2.5 片段引用表达式~{}

2.6 字面量

2.7 文本操作

2.8 算术运算符

2.9 比较和等值运算符

2.10 条件表达式

2.11 默认表达式

2.12 哑操作符号

Ta的文章 更多 >>

热门文章

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

Ta的文章更多 >>