Thymeleaf快速入门

最新推荐文章于 2022-04-02 03:00:51 发布

~涵~

最新推荐文章于 2022-04-02 03:00:51 发布

阅读量383

点赞数 1

分类专栏： SpringBoot 文章标签： SpringBoot Thymeleaf

本文链接：https://blog.csdn.net/weixin_333666999/article/details/103369272

版权

SpringBoot 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Thymeleaf快速入门

1、Thymeleaf标准方言

1.1 Thymeleaf 标准表达式语

1.简单表达式

( 1 ) 变量表达式：$｛．．．｝。
( 2 ) 选择表达式：*｛．．．｝。
( 3 ) 消息表达式：#｛．．．｝。
( 4 ) 链接表达式：@｛．．．｝。
( 5 ) 分段表达式：~｛．．．｝。

2. 字面量

( 1 ) 文本：‘one text’ ‘Another one!’等。
( 2 ) 数值： 0、 34、 3.0、 12.3 等。
( 3 ) 布尔：true、 false。
( 4 ) null: null。
( 5 ) Literal Token (字面量标记）：one、 sometext、 main 等。

3. 文本操作

( 1 ) 字符串拼接：+。
( 2 ) 文本替换： |The name is $ {name}|。

4. 算术操作

( 1 ) 二元运算符：＋、－、*、/、%。
( 2 ) 减号（单目运算符）：－。

5. 布尔操作

( 1 ) 二元运算符： and、 or。
( 2 ) 布尔否定（一元运算符）：！、not。

6. 比较和等价

( 1 ) 比较：>、<、>=、<= (gt、 lt、 ge、 le ）。
( 2 ) 等价：==、!＝ ( eq、 ne )。

7. 条件运算符

( 1 ) If-then: (if) ? (then）。
( 2 ) If-then-else: (if)? (then) : (else）。
( 3 ) Default: (value)?: (defaultvalue）。

8. 特殊标记

No-Operation （无操作）：_。
下面的这个示例涵盖了上述大部分表达式。

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

9.创建html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"></html>

1.2 消息表达式 #｛．．．｝

在 Spring 应用程序中，这将自动与 Spring 的 MessageSource 机制集成。

#{main.title} 
#{message.entrycreated(${entryid})}

在模板中的应用如下。

<table> 
...
	<th th:text="#{header.address.city}">...</th> 
	<th th:text＝"#{header.address.country}">...</th> 
...
</table>

注意： 如果希望消息 key 由上下文变量的值确定，或者要将变量指定为参数，则可以在消息表达式中使用变量表达式。

#{\${config.adminWelcomeKey}(\${session.user.name})}

1.3变量表达式 $｛．．．｝

在 Spring 术语中，变量表达式也称为模型属性（ Model Attributes ），它们看起来像这样。

${session.user.name}

它们作为属性值或作为属性的一部分。

<span th：text＝ "${book.author.name }">

上面的表达式在 OGNL 和 SpringEL 中等价于：

((Book)context.getVariable ("book")).getAuthor().getName ()

这些变量表达式不仅涉及输出，还包括更复杂的处理，如条件判断、迭代等。

<li th:each= "book : ${books}" >

这里${books}从上下文中选择名为 books 的变量，并将其评估为可在 th:each 循环中使用的迭代器(iterable)
更多 OGNL 的功能如下。
使用点（.）来访问属性，等价于调用属性的getter

${person.father.name}

访问属性也可以使用（［］）块

${person ['father']['name']}

如果对象是一个map，则点和块语法等价于调用其get(…)方法

${personsByName ['Stephen Zucchini'].age}

在块语法中也可以通过索引来访问数组或者集合

${personsArray[O].name}

可以调用方法间时也支持参数

${person.createCompleteName()} 
${person.createCompleteNameWithSeparator ('-')}

1.4表达式基本对象

当对上下文变量评估 OGNL 表达式时某些对象可用于表达式以获得更高的灵活性，这些对象将被引用（按照 OGNL标准），从#符号开始。
• #ctx: 上下文对象
• #vars: 上下文变量
• #locale: 上下文区域设置
• #request: HttpServletRequest 对象
• #response: HttpServletResponse 对象
• #session: HttpSession 对象
• #servletContext: ServletContext 对象
所以可以这样做。

Established locale country: <span th:text="${#locale.country}">US</span>.

1.5 表达式工具对象

除了上面这些基本的对象之外， Thymeleaf 提供了一组工具对象，这些对象将帮助我们在表达式中执行常见任务。
#execlnfo：模板执行的信息。
#messages：在变量内获取外部消息的方法表达式，与使用＃｛．．．｝语法获得的方式相同。
#uris：用于转义 URL/URI部分的方法。
#conversions：执行已配置的 conversion service。
#dates : java.util.Date 对象的方法，如格式化、组件提取等。
#calendars：类似于＃ dates，但是对应于java.util.Calendar 对象。
#numbers：格式化数字对象的方法。
#strings:String对象的方法，包括 contains、 startsWith、 prepending/appending 等。
#objects:对象通常的方法。
#bools:布尔判断的方法。
#arrays:array 方法。
#lists:list 方法。
#sets: set 方法。
#maps: map 方法。
#aggregates：在数组或集合上创建聚合的方法。
#ids：用于处理可能重复的 id 属性的方法（如作为迭代的结果）。
下面是一个格式化日期的例子。

<p>
	Today is: <span th:text＝"${#calendars.format(today,'dd MMMM yyyy')}"> 13 May 2011</span>
</p>

1.6 选择表达式 *｛．．．｝

选择表达式与变量表达式很像，区别在于，它们是在当前选择的对象上执行的，而不是在整个上下文变量映射上执行的，它们看起来像这样。

*{customer.name}

它们所作用的对象由 th:object 属性指定。

<div th:object="${book}"> 
...
<span th:text= "*{title}">...</span> 
...
</div>

这等价于：

{
//th:object="${book}"
 final Book selection= (Book) context.getVariable ("book"); 
//th :text＝"*{title}" 
output (selection.getTitle ());
}

1.7 链接表达式 @｛．．．｝

链接表达式旨在构建 URL并向其添加有用的上下文和会话信息（通常称为URL重写的过程）。因此，对于部署在 Web 服务器的 /myapp 上下文中的 Web 应用程序，可以使用以下表达式。

<a th:href="@{/order/list}">...</a>

可以转成：

<a href="/myapp/order/list"> ...</a>

cookie 没有启用下，如果需要保持会话，可以这样。

<a href="/myapp/order/list;jsessionid=23fa3labd4lea093"> ...</a>

URL 是可以携带参数的。

<a th:href＝"@{/order/details(id＝${orderid} ,type=${orderType })}"> ...</a>

最终的结果如下。

<a href="/myapp/order/details?id=23&amp;type=online">...</a>

链接表达式可以是相对的，在这种情况下，应用程序上下文将不会作为 URL 的前缀。

<a th :href=" @{../documentslreport }">...</a>

也可以是服务器相对（同样，没有应用程序上下文前缀）。

<a th:href="@{~/contents/main }">...</a>

可以是协议相对（就像绝对 URL，但浏览器将使用在显示的页面中相同的 HTTP 或 HTTPS 协议）。

<a th:href＝"@{//static.mycompany.com/res/initial}">...</a>

当然， Link 表达式可以是绝对的。

<a th:href＝"@{http://www.mycompany.com/main}">...</a>

在绝对（或协议相对）的 URL 等中 Thymeleaf 链接表达式添加的是什么值？答案是，可能是由响应过滤器定义的 URL 重写。在基于 Servlet 的 Web 应用程序中，对于每个输出的URL（上下文相对、相对、绝对……）Thymeleaf 将总是在显URL之前调用HttpServletResponse.encodeUrl(…)机制，这意味着过滤器可以通过包装 HttpServletResponse 对象（通常使用的机制）来为应用程序执行定制的URL重写。

1.8 分段表达式 ~｛．．．｝

分段表达式是 Thymeleaf3.x 版本新增的内容。
分段表达式是一种表示标记片段并将其移动到模板周围的简单方法，正是由于这些表达式，片段可以被复制，或者作为参数传递给其他模板等。
最常见的用法是使用 th:insert 或 th:replace 插入片段。

<div th:insert="~{commons : : main}" >...</div>

但是它们可以在任何地方使用，就像任何其他变量一样。

<div th:with="frag=~{footer : : #main/text()}">
	<p th:insert="${frag}">
</div>

分段表达式是可以有参数的。

1.9 字面量

Thymeleaf有一组可用的字面量和操作。

1．文本

文本文字只是在单引号之间指定的字符串，它们可以包含任何字符，但应该避免其中的任何单引号使用。

<p>
	Now you are looking at a 
	<span th:text="'working web application'"> 
		template file
	</span>
</p>

2．数值

数值文字就是数字。

<p>The year is 
	<span th:text="2013">1492</span>
	.
</p>
<p>
	In two years, it will be 
	<span th:text="2013 + 2">1494</span>
	.
</p>

3．布尔

布尔文字为“true”和“false” 。例如，

<div th:if="${user.isAdrnin () } == false">

在这个例子中，“＝＝ false”，写在大括号之外，Thymeleaf 会做处理。如果是写在大括号内，那就是由 OGNL/SpringEL 引擎负责处理。

<div th:if="${user.isAdrnin == false}">

4. null

null 字面量使用如下。

<div th : if＝" ${variable.sornethiηg} == null ">

5. 字面量标记

数字、布尔和 null 字面实际上是“字面量标记”（ Literal Token ）的特殊情况。这些标记允许在标准表达式中进行一点简化。它们工作与文本文字（‘…’）完全相同，但只允许使用字母（ A-Z 和 a-z ）、数字（ 0-9 ）、括号（［和］）、点（）、连字符（，）与下画线（_），所以没有空白、逗号等。标记无须任何引号，所以可以这样做。

<div th : class="content" > ... </div>

用来代替：

<div th : class="' content '"> ... </div>

6. 附加文本

无论是文字，还是评估变革或消息表达式的结果，都可以使用“＋”操作符轻松地附加文本。

<span th : text="'The name of the user is '+ ${user.name }" >

7. 字面量替换

字面量替换允许容易地格式化包含变量值的字符串，而不需要使用 ‘…’+‘…’附加文字。
这些替换必须被“｜”包围，例如，

<span th:text="|Welcome to our application, ${user.name}!|">

其等价于：

<span th:text＝"'Welcome to our application,'+ ${user.name} +'!'">

字面量替换可以与其他类型的表达式相结合。

<span th:text="${onevar} +'' +|${twovar}, ${threevar}|">

|…|字面量替换只允许使用变量表达式或消息表达式(${…},*{…},#{…})其他字面量（’…’）、布尔或数字标记、条件表达式等是不允许的。

1.10 算术运算

支持算术运算：+ , - , * , / 和 %。

1.11比较与相等

表达式中的值可以与>、<、>=和<=进行比较，并且可以使用=和!=运算符来检查是再相等。
文本别名： gt（>）、 lt（<）、ge（>=）、le(<=)、not(!).eq（＝＝）、neq/ne （!=。

1.12条件表达式

<tr th:class="${row.even }? ' even ' ：'odd'">

可以使用括号嵌套，else 表达式也可以省略，在这种情况下，如果条件为 false，则返回 null。

1.13 默认表达式

指定两个表达式，如果第一个不是 null，则使用第二个。
A:B

1.14 无操作标记

无操作标记由下画线 _ 表示。表示什么也不做，这允许开发人员使用原型中的文本默认值。

<span th:text="${user.name} ?:'no user authenticated'" >...</span>

可以直接使用“no user authenticated”作为原型文本这样代码从设计的角度看起来很简洁。

<span th: text=" ${user.name} ?: _">
	no user authenticated
</span>

1.15 数据转换及格式化

Thymeleaf 的双大括号为变量表达式(${．．．})和选择表达式(*{．．})提供了数据转换服务，它看上去是这样的。

 "${{．．．}}" 把user.lastAccessDate toString

1.16注释的使用

1、html 看不到，并且 thymeleaf 不会执行

<!--/* This code will be removed at thymeleaf parsing time! */-->

2、and 未运行可以在 html 中看到，运行后就消失

<!--/*-->
<div>you can see me only before thymeleaf processes me! </div>
<!--*/-->

3、运行后才会看到

<span>hello!</span>
<!--/*/
<div th:text="${true}">...</div>
/*/-->
<span>goodbye!</span>

2、Thymeleaf设置属性值

th:attr 用于设置任意属性，也可设置多个属性值。

2.1设置值到指定的属性

th:attr="value=#{subscribe.submit } " 
th:value="#{subscribe.submit}"

Thymeleaf 提供了很多属性，每个都针对特定的 HTML5 属性，如 th:abbr、th:action、th: background、th:form、th:height、th:style等。

2.2 附加和添加前缀

th:attrappend 和 th:attrprepend 用于附加和添加前缀属性。例如，

<input type="button" value="Do it !" class＝"btn" th:attrappend＝"class＝${'' + cssStyle}"/>

执行模板， cssStyle 变量设置为“warning”时，输出如下。

<input type="button" value＝"Do it !" class="btn warning"/>

同时， th:classappend 和 th:styleappend 用于设置 css 的 class 和 style。例如，

<tr th:each="prod:${prods}" class="row" th:classappend= "${prodStat.odd} ? 'odd'">

2.3固定值布尔属性

HTML 具有布尔属性的概念，没有值的属性意味着该值为“true”。在 XHTML 中，这些属性只取一个值，即它本身。例如，属性 checked 的用法。
标准方言包括允许用户通过评估条件来设置这些属性，如果评估为 true，则该属性将被设置为其固定值，如果评估为 false，则不会设置该属性。

<input type＝"checkbox" name＝"active" th:checked＝"${user.active }"/>

标准方言中存在以下固定值布尔属性。
th:async
th:autofocus
th:autoplay
th:checked
th:controls
th:declare
th:default
th:defer
th:disabled
th:formnovalidate
th:hidden
th:ismap
th:loop
th:multiple
th:novalidate
th:nowrap
th:open
th:pubdate
th:readonly
th:required
th:reversed
th:scoped
th: seamless
th:selected

2.4默认属性处理器

Thymeleaf 提供“默认属性处理器”，当标准方言没有提供的属性时，也可以设置其属性。例如，

<span th:whatever="${user.name}" >...</span>

th:whatever 并不是标准方言中提供的属性但仍然可以正确对属性进行赋值。最终输出如下。

<span whatever="John Apricot" >...</span>

默认属性处理器与 th:attr 设置任意属性有着异曲同工之妙。

2.5 支持对 HTML5 友好的属性及元素名称

data-{prefix}-{name｝语法是 HTML5 中编写自定义属性的标准方式，不需要开发人员使用任何命名空间的名称（如 th: *）。 Thymeleaf支持多种语法，自动提供所有的方言（而不只是标准方言）。

<td data-th-text= "${user.login}" >...</td>

等价于

<td th:each＝"${user.login}"> ...</td>

3.thymeleaf 迭代器与条件语句

3.1 迭代器

th:each

状态变量

( 1 ) index 属性是当前“迭代器索引” ( Iteration Index ），从 0 开始。
( 2 ) count 属性是当前“迭代器索引” ( Iteration Index ），从 1 开始。
( 3 ) size 属性是迭代器元素的总数。
( 4 ) current 是当前“迭代变革” ( Iter Variable ）。
( 5 ) even/odd 判断当前迭代器是否为 even 或 odd。
( 6 ) first 判断当前迭代器是否为第一个。
( 7 ) last 判断当前迭代器是否为最后

3.2条件语句

if 和 unless

th:if属性不仅能够判断布尔条件，它还能判断以下表达式。
• 如果值不为 null :

如果值为布尔值，则为 true;
如果值是数字，并且不为零；
如果值是一个字符且不为零；
如果 value 是 String，而不是“false” “off ”或“n。”
如果值不是布尔值、数字、字符或字符串。
• 如果值为 null，则 th:if将为 false。

Unless与if相反，false为正确

switch 语句

switch 语句使用 th:switch 与 th:case 属性集合来实现。
注意：只要一个 th:case 属性被评估为 true，每个其他同一个 switch 语句中的 th:case 属性将被评估为 false。
用 th:case＝”*”来设置默认选项。

4. Thymeleaf 模饭片段

4.1 定义和引用片段

使用 th:fragment 属性来定义片段

<div th: fragment="copy" >      //片段名
	&copy; 
</div>

如果想引用这个 copy 代码片段，可以用 th:insert或 th:replace 属性.

<div th: insert="footer : : copy" ></div>

4.2 Thymeleaf 片段规范语法

“~{templatename::selector}”：名为templatename 的模板上的指定标记选择器。selector 可以只是一个片段名。
“~{templatename}”：包含完整的模板 templatename。
“~{::selector｝”或 “~{this::selector}”：指相同模板中的代码片段。

4.3 不使用 th:fragment

不使用 th:fragment 也可以引用 HTML 片段，例如，

<div id＝"copy-section ">
	&copy; 
</div>

通过 id 也可以引用到页面片段。

<div th:insert="~{footer : : #copy-section }"></div>

4.4 th:insert、 th:replace 、 th:include三者的区别

th:insert、 th:replace、 th:include三者都能实现片段的引用 ，但在最终的实现效果上还是存在差异。其中： th:insert 是最简单的，它将简单地插入指定的片段作为正文的主标签。 th:replace 用指定实际片段来替换其主标签。th:include 类似于 th:inset，但不是插入片段，它只插入此片段的“内容” 。所以考虑下面的例子。

<footer th:fragment="copy">
	&copy; 2019  
</footer >

3 种方式同时引用该片段。

<body> 
	<div th:insert ="footer : : copy"></div> 
	<div th:replace="footer : : copy"></div> 
	<div th:include="footer : : copy"></div> 
</body>

结果为：

<body> 
	//insert
	<div>
		<footer>
			&copy; 2019 
		</footer>
	</div> 
	//replace
	<footer>
		&copy; 2019 
	</footer> 
	//include
	<div>
		&copy; 2019 
	</div> 
</body>

5. Thymeleaf 表达式基本对象

在 Thymeleaf 中，一些对象和变量map叩总是可以被调用，这些对象称为“表达式基本对象”。

5.1 基本对象

( 1 )#ctx：上下文对象
需要注意的是，＃vars 和 #root 是同一个对象的同义词，但建议使用＃ctx。

${#ctx.locale} 
${#ctx.variableNames} 
${#ctx.request} 
${#ctx.response} 
${#ctx.session} 
${#ctx.servletContext}

( 2 ) #locale：直接访问与 java.util.Locale 关联的当前的请求。
${#locale}

5.2 Web 上下文命名空间

( 1 ) param：用于检索请求参数。
( 2 ) session：用于检索会话属性。
( 3 ) application：用于检索应用及上下文属性。
需要注意的是，没有必要指定访问请求属性的命名空间，因为所有请求属性都会自动添加到上下文中作为上下文根中的变量。
${myRequestAttribute}

5.3 Web 上下文对象

在 Web 环境，下列对象可以直接访问（注意它们是对象，而非 map 或者是命名空间）。
( 1 ) #request：直接访问与当前请求关联的javax.servlet.http.HttpServletRequest 对象。

${#request .getAttribute ('msg') }

( 2 ) #session ：直接访问与当前请求关联的 javax.servlet.http.HttpSession 对象。

${#session.id}

( 3 ) #servletContext：直接访问与当前请求关联的 javax.servlet.ServletContext 对象。

${#servletContext .getAttribute ('msg')}

~涵~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf快速入门

Thymeleaf快速入门1、Thymeleaf标准方言1.1 Thymeleaf 标准表达式语1.简单表达式( 1 ) 变量表达式：$｛．．．｝。( 2 ) 选择表达式：*｛．．．｝。( 3 ) 消息表达式：#｛．．．｝。( 4 ) 链接表达式：@｛．．．｝。( 5 ) 分段表达式：~｛．．．｝。2. 字面量( l ) 文本：‘one text’ ‘Another...
复制链接

扫一扫

专栏目录