Thymeleaf的标签和表达式

  1.1   th:id    

         替换id标签

  1.2    th:text   

          文本替换，包括html标签

  1.3 th:utext   

        文本替换，html标签会显示出正确的样式

   1.4 th:object 

   替换对象， 用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。

1.5  th:value

属性赋值

1.6 th:with

定义局部变量。

当th:with被处理,firstPer变量创建一个局部变量和变量添加到map自上下文, 以便它是用于评估和其他上下文中声明的变量从开始,但只有包含<div >标记的范围内。

定义多个局部变量

1.7 th:style

设置样式

1.8 th:onclick

点击事件

1.9 th:each

属性赋值

1.10 th:if

 判断条件

1.11 th:unless

和th:if判断相反

1.12 th:href

链接地址

1.13 th:switch

多路选择配合th:case使用

1.14 th:fragment

自定义片段，定义fragment，所有的fragment可以写在一个文件里面，也可以单独存在

   1.15  th:insert

   保留自己的主标签，保留th:fragment的主标签。

  1.16  th:replace

  不要自己的主标签，保留th:fragment的主标签。

    1.17 th:include

    保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐）

    结果为:

1.18 th:selectd

selected选择框选中

1.19 th:src

图片类地址引入

1.20 th:inline

定义js脚本可以使用变量

1.21 th:action

表单提交的地址

1.22 th:remove

删除某个属性

1.all:删除包含标签和所有的孩子。

2.body:不包含标记删除,但删除其所有的孩子。

3.tag:包含标记的删除,但不删除它的孩子。

4.all-but-first:删除所有包含标签的孩子,除了第一个。

5.none:什么也不做。这个值是有用的动态评估。

1.23 th:attr

 设置标签属性，多个属性可以用逗号分隔

$ {...}    变量表达式，可用于获取后台传过来的值

 * {...} 选择变量表达式  

 ＃{...} 消息表达式  

 @ {...} 链接⽹址表达式，用于替换网页中的 src、href 等的值

〜{...} ⽚段表达式，可以用于引用公共的目标片段

@{...} 处理 url 地址

     Thymeleaf 的 @ {...} 表达式用于处理 web 应用中的 url 地址，可以是相对地址，也可以是绝对地址。

     @{/}  斜杠开头表示相对整个应用根目录，"/" 表示 "/应用上下文路径"

     假如页面当前浏览器地址为：http://localhost/thymeleaf/user/userHome，其中 thymeleaf 表示应用上下文路径，user/userHome 为后台请求路径，则常用的写法如下：

1）@{userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList

2）@{./userList} 相对当前路径结果为：http://localhost/thymeleaf/user/userList

3）@{../tiger/home} 相对当前路径结果为：http://localhost/thymeleaf/tiger/home

4）@{/tiger/home} 相对应用根目录结果为：http://localhost/thymeleaf/tiger/home

5）@{https://www.baidu.com/} 绝对路径结果为：https://www.baidu.com

6）<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}">，@ 以 "/" 开头相对应用根目录，否则是相对当前路径。

@{...} 携带参数

     th:href 是⼀个修饰符属性，将表达式结果设置为标签 href 属性的值，请求地址中携带参数传往服务器是很常见的 *** 作，常用 *** 作如下：

1）在 @{...}表达式末尾使用 "()" 设置参数；

2）多个参数时，使用 "," 隔开

3）参数值可以使用表达式动态取值。

文本及其 *** 作

     ⽂本⽂字指包含在单引号之间的字符串，它们可以包含任何字符，但如果字符串有空格时，必须使用单引号" ' "包含。

字符串追加

     ⽆论是字符串⽂本常量，还是通过变量表达式或消息表达式计算的结果，都可以使⽤ "+" 运算符轻松地追加⽂本。

数字字⾯量

布尔字⾯量

     布尔字⾯量包含 true 和 false：

NULL 字⾯量

算术运算符

     Thyme Leaf 标准表达式⽀持算术运算：+， - ，*，/(除)，％(取余)

⽐较/逻辑运算符

     表达式中的值可以与 >，<，>= ，<= ，==，！= 符号进⾏⽐较。 ⼀个更简单的替代⽅案是使⽤这些运算符的⽂本别名：gt(>)，lt(<)，ge(>=)，le(<=)，eq(==)，neq(！=)。

     逻辑运算符：and(与)、or(或)、！(非)，not(非)

三元运算符

     Thymeleaf 中的三元运算与 Java 以及 JavaScript 中基本一致，如 A>B?X:Y，在 X、Y 中可以继续嵌套，只是 Thymeleaf 中需要使用括号包含起来，否则报错。

在控制器中往页面传递几个变量：

在页面中使用变量表达式${}来获取它们：

可以看到变量表达式不但可以获取变量的属性值，甚至还可以访问变量的方法（getName()和upcaseName()）。session代表HttpSession对象。

*{}代指th:object所指定的对象，即${session.user}。

URL链接表达式会给URL自动添加上下文的名字。比如：

解析后的href值为 http://localhost:8080/thymeleaf/main 。

当需要在URL中传递参数时，比如这样 http://localhost:8080/thymeleaf/main?name=KangKang ，可以如下 *** 作：

传递多个参数：

路径变量的写法：

后端接受路径变量：

除了使用'...' + ${}来连接字面量和变量外，还可以使用|...|来代替，比如：

等价于：

注意： 在| ... |字面替换中只允许有变量表达式${...}

条件表达式实际上就是三目运算符。比如：

条件表达式也可以使用括号嵌套：

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

默认表达式是一种特殊类型的条件值，不带then部分。比如：

表示，当${session.user.sex}为null时，值为sex is unknown，否则为表达式的值。这就好像为表达式指定了一个默认值一样。其等价于：

Thymeleaf默认提供了丰富的表达式工具类，这里列举一些常用的工具类。

比如：

注意事项 :

值得注意的是，在使用工具类对某个表达式进行处理时候，你可能会写成：

${#strings.isEmpty(${session.user.name})}。

实际上这种写法是错误的，将抛出异常。正确的写法为：

${#strings.isEmpty(session.user.name)}。

在Thymeleaf中，使用 th:each 标签可对集合类型进行迭代，支持的类型有：

1.任何实现了 java.util.List 的对象；

2.任何实现了 java.util.Iterable 的对象；

3.任何实现了 java.util.Enumeration 的对象；

4.任何实现了 java.util.Iterator 的对象

5.任何实现了 java.util.Map 的对象。当迭代maps时，迭代变量是 java.util.Map.Entry 类型；

6.任何数组。

一个简单的例子：

其中${prods}为迭代值，prod为迭代变量。除此之外，我们还可以通过状态变量获取迭代的状态信息，比如：

其中stat就是状态变量。默认为迭代变量加上Stat后缀，在本例中，不直接申明stat，则状态变量名称为prodStat。状态变量包含以下信息：

1.index，当前迭代下标，从0开始；

2.count，当前迭代位置，从1开始；

3.size，迭代变量中的总计数量；

4.current，每次迭代的迭代变量；

5.even/odd，当前迭代是偶数还是奇数；

6.first，当前迭代的是不是第一个；

7.last，当前迭代的是不是最后一个；

例子：

页面显示如下：

当prod.comments不为空时，页面将渲染出该<a>标签。

另外，th:if有一个反向属性th:unless，用于代替上面的not：

th:case="*"表示默认选项，相当于default：

在模板的编写中，通常希望能够引入别的模板片段，比如通用的头部和页脚。Thymeleaf模板引擎的 th:include ， th:insert 和 th:replace 属性可以轻松的实现该需求。不过从Thymeleaf 3.0版本后， 不再推荐使用 th:include 属性。

在index.html页面路径下创建一个footer.html：

在footer.html中，使用 th:fragment 属性定义了 <footer>片段，然后在index.html中引用它：

其中footer为被引用的模板名称（templatename），copy为th:fragment标记的片段名称（selector），~{...}称为片段表达式，由于其不是一个复杂的片段表达式，所以可以简写为：

页面显示如下：

通过观察渲染出的源码可发现th:include，th:insert和th:replace的区别所在：

注意： 引用本页面的片段可以略去templatename，或者使用this来代替。

如果片段不包含th:fragment属性，我们可以使用CSS选择器来选中该片段，如：

引用方式：

使用th:fragment定义的片段可以指定一组参数：

然后在引用的时候给这两个参数赋值，有如下两种方式：

对于第二种方式，onevar和twovar的顺序不重要，并且使用第二种方式引用片段时，片段可以简写为：

比如有如下片段：

当value为all时，页面渲染为：

当value为body时，页面渲染为：

当value为tag时，页面渲染为：

当value为all-but-first时，页面渲染为：

在Thymeleaf模板引擎中，使用 th:with 属性来声明一个局部变量

在上面div中， th:width 属性声明了一个名为firstPer的局部变量，内容为 ${persons[0]} 。该局部变量的作用域为整个div内。

也可以一次性定义多个变量：

th:with属性允许重用在同一个属性中定义的变量：

参考： https://mrbird.cc/Thymeleaf-%E5%B1%80%E9%83%A8%E5%8F%98%E9%87%8F.html

在一个Web应用中，通常会采用MVC设计模式实现对应的模型、视图和控制器，其中，视图是用户看到并与之交互的界面。对最初的Web应用来说，视图是由HTML元素组成的静态界面；而后期的Web应用更倾向于使用动态模板技术，从而实现前后端分离和页面的动态数据展示。Spring Boot框架为简化项目的整体开发，提供了一些视图技术支持，并主要推荐整合模板引擎技术实现前端页面的动态化内容。本文对SpringBoot常用的Thymeleaf进行整合。

Thymeleaf是一种现代的基于服务器端的Java模板引擎技术，也是一个优秀的面向Java的XML、XHTML、HTML5页面模板，它具有丰富的标签语言、函数和表达式，在使用Spring Boot框架进行页面设计时，一般会选择 Thymeleaf模板。我们在这里学习Thymeleaf 常用的标签、表达式。

Thymeleaf标签

使用标签只需要加上一个命名空间就可以了。 即修改原html的第二行就可以了。

变量表达式${..}主要用于获取上下文中的变量值，示例代码如下。

这是标题

- 使用了Thymeleaf模板的变量表达式${..}用来动态获取p标签中的内容 - 如果当前程序没有启动或者当前上下文中不存在title变量，该片段会显示标签默认值“这是标题”； - 如果当前上下文中存在title 变量并且程序已经启动，当前p标签中的默认文本内容将会被tite变量的值所替换，从而达到模板引擎页面数据动态替换的效果。

Thymeleaf为变量所在域提供了一些内置对象

结合上述内置对象的说明，假设要在Thymeleaf模板擎页面中动态获取当前国家信息，可以使用#locale内置对象

选择交量表达式和变量表达式用法类似，一般用于从被选定对象而不是上下文中获取属性值，如果没有选定对象，则和变量表达式一样，示例代码如下。

消息表达式#{..}主要用于Thymeleaf模板页面国际化内容的动态替换和展示。使用消息表这式#{..}进行国际化设置时，还需要提供一些国际化配置文件。关于消息表达式的使用，下文写国际化时会详细说明。

链接表达式@{..}一般用于页面跳转或者资源的引入，在Web开发中占据着非常重要的地位，并且使用也非常频繁。

片段表达式~{..}是一种用来将标记片段移动到模板中的方法。其中，最常见的用法是使用th:insert或th:replace 属性插入片段

Spring Boot默认设置了静态资源的访问路径，默认将/**所有访问映射到以下目录。

我们创建一个springboot项目用于本次实验。项目名为springboot_01_thyme。java8，springboot2.6.6

创建一个LoginController类用于数据替换效果测试。

我们写一个login.html进行测试。我们导入一个bootstrap的样式到static/login里面，并且自己定义一些css。

最后我们通过访问http://localhost:8080/toLoginPage 可以查看效果

在resources目录下创建名为i18n的文件夹，数一数这个单词多少个字母internationalization，就知道为什么叫i18n了。

然后我们在i18n文件夹下面创建login.properties、 login_zh_CN.properties、 login_en_US.properties文件。

目录结构：这个Resource Bundle 'login'时idea自动创建的，我们不需要管，只需要完成我们的就行。

login.properties

login_zh_CN.properties

login_en_US.properties

然后我们在配置文件application.properties里面添加代码

我们在config包下面创建一个MyLocalResovel类，自定义国际化功能区域信息解析器。

这里我们基本就完成了，但是在访问中文的时候会出现乱码现象。

我们打开idea的file->settings->file Encodings.

将Default encoding for properties的编码改为utf-8，同时勾选Transparentnative-to-ascii conversion

然后我们重新编写login.properties和其他相关的

但是这种方法1只对当前项目有效。下次创建还是使用GBK编码

本文我们主要了解了Thymeleaf的基本语法、标签、表达式、基本使用、同时还实现了页面登录页得国际化。

本文作者：hjk-airl

本文链接：https://www.cnblogs.com/hjk-airl/p/16181598.html

---