Thymeleaf基础知识语法

最新推荐文章于 2024-04-21 17:11:08 发布

沐暖沐

最新推荐文章于 2024-04-21 17:11:08 发布

阅读量1.1k

点赞数 15

文章标签： thymeleaf 开发语言

本文链接：https://blog.csdn.net/weixin_47480200/article/details/136845032

版权

1、简介

Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎，能够处理HTML、XML、JavaScript、CSS、TEXT、RAW这六种模板。

这六种模版模式包含两种标记模板模式（HTML和XML），三种⽂本模板模式（TEXT，JAVASCRIPT和CSS）和⼀个⽆操作模板模式（RAW）。

①简单表达式

变量表达式： ${…}
选择变量表达式： *{…}
消息表达： #{…}
链接URL表达式： @{…}
片段表达式： ~{…}

②文字

文本文字：‘one text’，‘Another one!’，…
号码文字：0，34，3.0，12.3，…
布尔文字：true，false
空文字： null
文字标记：one，sometext，main，…

③⽂本操作

字符串连接：+
⽂本替换：|The name is ${name}|

④算术运算符

⼆进制运算符：+，-，\*，/，%
减号（一元运算符）： -

⑤布尔运算符

⼆进制运算符：and 、or
布尔否定（⼀元运算符）：！，not

⑥⽐较和相等运算符

比较：>，<，>=，<=（gt，lt，ge，le）
等号运算符：==，!=（eq，ne）

⑦条件运算符

如果-则： (if) ? (then)
如果-则-否则： (if) ? (then) : (else)
默认： (value) ?: (defaultvalue)

⑧特殊符号

无操作： _

所有这些功能都可以组合和嵌套：

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

2、常用的thymeleaf标签

1）th:id

功能介绍：替换元素的id属性。

案例：

<input th:id="'xxx' + ${collect.id}"/>

这里将input元素的id属性设置为字符串'xxx'与collect.id值的拼接。

2）th:text

功能介绍：替换元素的文本内容。

案例：

<p th:text="${collect.description}">description</p>

这里将p元素的文本内容替换为collect.description的值。如果collect.description不存在，将显示默认值description。

3）th:utext

功能介绍：支持HTML格式的文本替换。

案例：

<p th:utext="${htmlcontent}">content</p>

这里将p元素的文本内容替换为htmlcontent的值，且该值中的HTML标签将被解析并显示。

4）th:object

功能介绍：选择一个对象，并将其作为后续属性的上下文。

案例：

<div th:object="${session.user}">      
<!-- 在这里可以使用 *{} 来访问 user 对象的属性 -->  
</div>

5）th:value

功能介绍：设置元素的value属性值。

案例：

<input type="text" th:value="${user.name}" />

这里将input元素的value属性值设置为user.name的值。

6）th:onclick

功能介绍：设置元素的onclick事件处理函数。

案例：

<button th:onclick="'getCollect()'">Get Collect</button>

这里将button元素的onclick事件处理函数设置为getCollect()。

7）th:each

功能介绍：迭代集合或数组，并为每个元素生成模板内容。

案例：

<tr th:each="user,userStat:${users}">      
<!-- 这里可以访问 user 和 userStat，userStat 包含迭代状态信息 --> 
    <td th:text="${user.username}"></td>
    <td th:text="${user.password}"></td>
    <td th:text="${aState.index}"></td> 
</tr>

8）th:if

功能介绍：根据条件判断，决定是否显示元素。

案例：

<a th:if="${userId == collect.userId}">Link Text</a>

当userId等于collect.userId时，显示标签。

9）th:unless

功能介绍：与th:if相反，当条件不满足时显示元素。

案例：

<a th:href="@{/login}" th:unless="${session.user != null}">Login</a>

当session.user不为null时，不显示标签。

10）th:href

功能介绍：设置链接的href属性值。

案例：

<a th:href="@{/login}">Login</a>

这里将标签的href属性值设置为/login的URL。

11）th:switch 和 th:case

功能介绍：多路选择，用于根据条件显示不同的内容。

案例：

<div th:switch="${user.role}">      
    <p th:case="'admin'">User is an administrator</p>     
    <p th:case="'user'">User is a regular user</p>  
</div>

根据user.role的值，显示不同的标签内容。

12）th:fragment

功能介绍：定义一个可以被其他模板引用的代码片段。

案例：

<div th:fragment="alert">Alert Content</div>

在其他模板中，可以通过引用alert来包含这个片段。

13）th:include

功能介绍：包含其他模板的某个片段到当前位置。

案例：

<head th:include="layout :: htmlhead" th:with="title='xx'"></head>

这里将layout模板中的定义的 htmlhead 片段来替代。

14）th:replace

功能介绍：替换整个标签到引入的文件。这意味着当前位置的标签及其所有子元素将被替换为指定模板中的对应片段。

案例：

<div th:replace="fragments/header :: title"></div>

在这个例子中，

标签及其所有内容将被fragments/header模板中名为title的片段替换。

15）th:selected

功能介绍：用于标签，根据条件判断是否设置selected属性。当条件为真时，该选项将被选中。

案例：

<option th:selected="(${xxx.id} == ${configObj.dd})">Option Text</option>

如果xxx.id的值等于configObj.dd的值，则该标签将被设置为选中状态。

15）th:src

功能介绍：用于设置图片标签的src属性，即图片的源地址。

案例：

<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />

在这个例子中，图片的源地址将被设置为/img/logo.png。@{}表达式用于生成URL。

16）th:action

功能介绍：用于设置表单的action属性，即表单提交的目标地址。

案例：

<form action="subscribe.html" th:action="@{/subscribe}">      
<!-- 表单内容 -->  
</form>

17）th:block

功能介绍：在Thymeleaf模板引擎中，th:block是一个特殊的属性，它用于在模板中定义一个不渲染到最终HTML输出中的块。尽管th:block本身不会生成任何HTML标签，但它可以用来包含其他的Thymeleaf属性，如条件判断（th:if）、循环（th:each）等，这样可以在不引入额外HTML标签的情况下控制模板的某些部分的渲染。

使用th:block的一个常见场景是当你想要根据条件渲染一组元素，但又不想在条件不成立时引入不必要的父级容器标签。

案例：

<div>  
    <h2>User Information</h2>  
    <th:block th:if="${user != null}">  
        <p th:text="'Name: ' + ${user.name}">Name: User's Name</p>  
        <p th:text="'Email: ' + ${user.email}">Email: User's Email</p>  
    </th:block>  
    <th:block th:unless="${user != null}">  
        <p>No user information available.</p>  
    </th:block>  
</div>

在这个例子中，th:block被用来根据user对象是否存在来控制内容的渲染。如果user对象非空，则渲染用户名和电子邮件；如果user为空，则渲染一条“No user information available.”的消息。

由于th:block不会生成任何HTML标签，因此最终生成的HTML不会包含任何由th:block引入的额外结构。这有助于保持HTML结构的清晰和简洁。

需要注意的是，虽然th:block不会生成HTML标签，但它仍然是一个Thymeleaf处理过程中的一个逻辑块，因此你可以在其中使用Thymeleaf的其他属性来控制内容的渲染。

18）th:class

功能介绍：在Thymeleaf模板引擎中，th:class是一个属性，用于动态地设置HTML元素的class属性值。它允许你根据模板变量的值或表达式的结果来设置或改变元素的CSS类。这对于条件性地应用样式或响应不同状态非常有用。

案例：

<div th:class="${condition ? 'active' : 'inactive'}">  
    This div will have a dynamic class based on the condition.  
</div>

在这个例子中，condition是一个布尔类型的模板变量。如果condition为真（true），则

元素的class属性将被设置为active；如果condition为假（false），则class属性将被设置为inactive。

你还可以结合多个CSS类，使用空格分隔：

<div th:class="${'base-class ' + (condition ? 'active-class' : 'inactive-class')}">  
    This div has a base class and a conditional class.  
</div>

在这个例子中，

元素总是有一个base-class，并且根据condition的值，它还会有一个额外的active-class或inactive-class。

th:class属性也可以与HTML元素上已经存在的class属性一起使用，此时Thymeleaf会合并两者。已存在的class属性通常用于定义元素的默认样式，而th:class则用于根据条件动态地覆盖或添加样式。

例如：

<div class="default-class" th:class="${condition ? 'active' : 'inactive'}">  
    This div has a default class and a dynamic class based on the condition.  
</div>

在这个例子中，

元素初始时会有一个default-class。然后，Thymeleaf会根据condition的值来添加active或inactive类。最终的class属性值将是default-class和条件类（active或inactive）的组合。

通过使用th:class，你可以轻松地根据模板中的数据和逻辑来动态地控制HTML元素的样式。

3、简单表达式

变量表达式： ${...}

变量表达式用于访问模型中的属性。

举例：

<p th:text="${message}"></p>

说明：

假设后端控制器（如 Spring MVC 控制器）将一个名为 message 的属性放入模型中，其值为 "Hello, World!"，则上述代码会渲染为：

Hello, World!

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

选择变量表达式通常与 th:object 一起使用，用于选择对象属性。

举例：

<div th:object="${user}">    
    <p th:text="*{name}"></p>    
    <p th:text="*{age}"></p>  
</div>

说明：

假设 user 对象有 name 和 age 两个属性，这段代码将分别显示这两个属性的值。

消息表达式： #{...}

消息表达式用于显示外部化消息，通常用于国际化，例如，你可能有一个 messages_en.properties 文件用于英语消息，一个 messages_fr.properties 文件用于法语消息等。然后，在 Thymeleaf 模板中，你可以使用消息表达式来引用这些消息，Thymeleaf 会根据当前的语言设置选择正确的消息进行显示。。

举例：

<p th:text="#{greeting}"></p>

说明：

假设 greeting 是在消息属性文件中定义的一个键，其值为 "Welcome to our website!"，则上述代码会渲染为：

Welcome to our website!

链接URL表达式： @{...}

链接URL表达式用于创建 URL。

举例：

<a th:href="@{/home}">Home</a>  
<form th:action="@{/login}" method="post">    
<!-- form fields here -->  
</form>

说明：

第一个例子创建了一个指向 /home 的链接，第二个例子设置表单的提交动作为 /login。Thymeleaf 会自动处理应用的上下文路径。

片段表达式： ~{...}

片段表达式用于标记模板的一个片段，常用于模板包含和替换。

举例：

<!-- layout.html -->  
<html>  
    <body>    
        <div th:insert="~{commons::header}"></div>    
        <div th:replace="~{content::body}"></div>    
        <div th:insert="~{commons::footer}"></div>  
    </body>  
</html>    
<!-- header.html in the 'commons' template -->  
<header>    
    <h1>My Website Header</h1>  
</header>    
<!-- body.html in the 'content' template -->  
<main>    
    <p>This is the main content of the page.</p>  
</main>    
<!-- footer.html in the 'commons' template -->  
<footer>    
    <p>Copyright 2023</p>  
</footer>

说明：

在 layout.html 中，我们使用了 th:insert 和 th:replace 来包含和替换模板片段。

~{commons::header} 表示从名为 commons 的模板中选择名为 header 的片段。th:insert 会将指定片段的内容插入到当前标签内部，而 th:replace 会用指定片段的内容完全替换当前标签及其内容。

这些表达式是 Thymeleaf 模板引擎的基础，它们允许开发者在 HTML 中嵌入丰富的动态内容，从而实现灵活的页面渲染。

4、文字

文本文字

假设您有一个名为 message 的变量，想要在 HTML 中显示它：

<p th:text="${message}">Default Message</p>

如果 message 的值为 'one text'，则输出为：

one text

号码文字

对于数字，您可能想要格式化输出或进行数学运算。例如，您有一个名为 number 的变量，值为 34：

<p th:text="${number}">0</p>  
<p th:text="${#numbers.formatDecimal(number, 2, 'POINT')}">0.00</p>

第一个标签将直接输出 34，而第二个标签将输出 34.00，因为使用了数字格式化功能。

布尔文字

对于布尔值，您可以根据条件显示不同的内容：

<p th:if="${isTrue}">This is true</p>  
<p th:unless="${isTrue}">This is not true</p>

如果 isTrue 的值为 true，则第一个标签将显示“This is true”，而第二个标签不会显示。如果 isTrue 为 false，则情况相反。

空文字

处理空值或 null 时，Thymeleaf 提供了空值检查：

<p th:if="${myValue != null}">Value is: <span th:text="${myValue}"></span></p>  
<p th:unless="${myValue != null}">Value is null</p>

myValue 是 null，则第二个标签将显示“Value is null”。

文字标记

使用文字标记（例如作为 CSS 类或 ID）时，可以直接插入：

<div th:class="${className}">This div has a dynamic class</div>

如果 className 的值为 'main'，则输出为：

<div class="main">This div has a dynamic class</div>

综合使用

您还可以结合使用这些功能来创建更复杂的模板。例如：

<div th:if="${isActive}">      
    <h1 th:text="${title}">Default Title</h1>      
    <p th:text="${description}">Default Description</p>      
    <p>Number: <span th:text="${#numbers.formatInteger(number, 3)}">000</span></p>  
</div>  
<div th:unless="${isActive}">      
    <p>This content is not active.</p>  
</div>

在这个例子中，根据 isActive 的值，模板会显示不同的内容。如果 isActive 为 true，则显示标题、描述和一个格式化后的数字；如果为 false，则显示一条消息说明内容不活跃。

5、文本操作

字符串连接

在Thymeleaf中，你可以使用表达式来连接字符串。这通常是通过将变量或字面量放在${}或*{}表达式中，然后直接在HTML标签或属性中使用这些表达式来实现的。Thymeleaf会自动计算这些表达式的值，并将它们转换为字符串进行连接。

例如，假设你有两个变量firstName和lastName，你想将它们连接成一个完整的名字：

<p th:text="${firstName} + ' ' + ${lastName}">Full Name</p>

如果firstName的值为"John"，lastName的值为"Doe"，那么输出将会是：

John Doe

注意，在表达式中使用了单引号来包含空格字符，这是因为空格也是字符串的一部分。

文本替换

Thymeleaf也支持文本替换，这通常是通过使用${}表达式语法和变量插值来实现的。你可以使用${}来包裹变量名，Thymeleaf会在渲染模板时替换这些表达式为变量的实际值。

你给出的例子|The name is ${name}|是一个文本替换的示例，但这不是Thymeleaf的标准语法。Thymeleaf通常使用${}来包围变量名。正确的写法应该是：

<p th:text="|The name is ${name}|">The name is Someone</p>

在这个例子中，th:text属性使用了Thymeleaf的文本替换语法。|...|之间的内容会被当作字面量文本处理，而${name}则会被替换为变量name的实际值。如果name的值为"Alice"，那么输出将会是：

The name is Alice

这种文本替换语法特别有用，因为它允许你在输出中包含固定的文本和变量的组合，而无需拼接字符串。

6、算术运算符

在Thymeleaf模板引擎中，算术运算符（如 +、-、*、/、%）和一元减号运算符都可以用于模板表达式中，以执行数值计算。这些运算符可以直接用于整数和浮点数，并且它们的用法与大多数编程语言中的算术运算符类似。

加法运算符（+）使用举例

<p th:text="${value1 + value2}">Sum of values</p>

value1 和 value2 是模板中的变量，它们可以是整数或浮点数。模板引擎将计算这两个值的和，并将结果渲染到标签的文本内容中。

减法运算符（-）使用举例

<p th:text="${value1 - value2}">Difference of values</p>

这里，value1 减去 value2 的结果将被渲染。

乘法运算符（*）使用举例

<p th:text="${value1 * value2}">Product of values</p>

模板引擎将计算 value1 和 value2 的乘积，并渲染结果。

除法运算符（/）使用举例

<p th:text="${value1 / value2}">Quotient of values</p>

这里，value1 除以 value2 的商将被渲染。注意，如果 value2 为零，这将会导致一个错误。

取模运算符（%）使用举例

<p th:text="${value1 % value2}">Remainder of division</p>

模板引擎将计算 value1 除以 value2 的余数，并渲染结果。

一元减号运算符（-）使用举例

<p th:text="${-value}">Negative value</p>

在这个例子中，value 是一个模板变量，其值将被取负后渲染到标签中。

注意事项

确保在模板中使用的变量是数值类型，否则使用算术运算符会导致错误。
在进行除法运算时，要特别注意除数不能为零，否则会导致运行时错误。
Thymeleaf表达式中的算术运算遵循Java的运算规则，包括整数除法的行为（即结果向下取整）。

7、布尔运算符

在Thymeleaf中，我们并不直接使用类似于“and”和“or”这样的二进制运算符以及“not”这样的布尔否定运算符来直接在模板表达式中组合逻辑条件。相反，Thymeleaf的表达式语言支持逻辑运算符，但它们的语法与许多编程语言中的语法有所不同。

Thymeleaf 使用 && 来表示逻辑与（and），|| 来表示逻辑或（or），而 ! 用于逻辑非（not）。

逻辑与（and）使用举例

<div th:if="${condition1 && condition2}">  
    <p>Both condition1 and condition2 are true.</p>  
</div>

在这个例子中，只有当 condition1 和 condition2 都为 true 时，元素才会被渲染。

逻辑或（or）使用举例

<div th:if="${condition1 || condition2}">  
    <p>Either condition1 or condition2 (or both) are true.</p>  
</div>

在这个例子中，只要 condition1 或 condition2 其中一个为 true（或两者都为 true），元素就会被渲染。

逻辑非（not）使用举例

<div th:if="${!condition}">  
    <p>The condition is not true.</p>  
</div>

在这个例子中，如果 condition 为 false，则元素会被渲染。逻辑非运算符 ! 用于否定一个条件。

注意事项

这些逻辑运算符在Thymeleaf的表达式中是非常有用的，特别是在处理复杂的条件渲染时。
逻辑运算符可以组合使用以构建更复杂的条件表达式。
确保变量 condition1、condition2 和 condition 已经在模板的上下文中定义，并且它们是布尔值或可以转换为布尔值的表达式。

8、比较和相等运算符

在Thymeleaf中，比较运算符用于在表达式中比较两个值的大小或是否相等。Thymeleaf支持标准的比较运算符，如大于（>）、小于（）、大于等于（>=）、小于等于（），以及等号运算符（==）和不等号运算符（!=）。这些运算符在Thymeleaf模板中用于控制条件渲染和逻辑判断。

比较运算符使用举例

<th:block th:if="${value1 > value2}">  
    <p>Value 1 is greater than Value 2</p>  
</th:block>  
  
<th:block th:if="${value1 < value2}">  
    <p>Value 1 is less than Value 2</p>  
</th:block>  
  
<th:block th:if="${value1 >= value2}">  
    <p>Value 1 is greater than or equal to Value 2</p>  
</th:block>  
  
<th:block th:if="${value1 <= value2}">  
    <p>Value 1 is less than or equal to Value 2</p>  
</th:block>

在上面的例子中，th:if属性用于判断条件，并根据条件是否成立来渲染相应的元素。value1和value2是模板中的变量，它们可以是任何可以比较的类型（如数字、字符串等）。

等号运算符使用举例

<th:block th:if="${value1 == value2}">  
    <p>Value 1 is equal to Value 2</p>  
</th:block>  
  
<th:block th:if="${value1 != value2}">  
    <p>Value 1 is not equal to Value 2</p>  
</th:block>

在这个例子中，th:if属性使用等号运算符（==）和不等号运算符（!=）来判断value1和value2是否相等或不相等。根据条件是否成立，相应的元素会被渲染。

注意事项

在使用比较运算符时，确保比较的值类型是可以比较的，否则会导致错误。
对于字符串比较，Thymeleaf使用Java的字符串比较规则，区分大小写。如果需要忽略大小写比较，可以在比较之前使用字符串的toLowerCase()或toUpperCase()方法。
在实际的Web应用中，value1和value2通常来自后端控制器传递给模板的数据模型。

9、条件运算符

如果-则： (if) ? (then)

Thymeleaf中并没有直接的“如果-则”语法结构，因为它通常使用th:if属性来实现条件渲染。不过，你可以在表达式内部使用Java的三元运算符的“如果-则”部分，但通常不会单独使用它，因为它需要与“否则”部分一起才完整。

如果-则-否则： (if) ? (then) : (else)

在Thymeleaf中，你可以使用三元运算符来实现“如果-则-否则”的逻辑。下面是一个例子：

<div th:text="${condition} ? 'Value if true' : 'Value if false'">Default Text</div>

在这个例子中，如果${condition}的值为true，则div元素的文本内容将是'Value if true'；如果为false，则内容将是'Value if false'。

默认： (value) ?: (defaultvalue)

Thymeleaf中的?:操作符用于为null或空值提供默认值。如果变量的值为null或空字符串，它将使用默认值替代。以下是一个使用例子：

<div th:text="${someValue}?:'Default Value'">Original Text</div>

${someValue}的值为null或空字符串，则div元素的文本内容将是'Default Value'；否则，它将显示${someValue}的实际值。

综合使用举例

下面是一个结合了条件渲染和默认值的Thymeleaf模板示例：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>Thymeleaf Conditionals and Default Values</title>  
</head>  
<body>  
  
    <h1>User Information</h1>  
  
    <div th:if="${user != null}">  
        <p th:text="'Name: ' + ${user.name}">Name: User's Name</p>  
        <p th:text="'Email: ' + (${user.email}?:'No Email Provided')">Email: User's Email</p>  
    </div>  
    <div th:unless="${user != null}">  
        <p>No user information available.</p>  
    </div>  
  
</body>  
</html>

在这个例子中：

使用th:if="${user != null}"来判断user对象是否非空。
如果user非空，则显示用户名和电子邮件。对于电子邮件，使用${user.email}?:'No Email Provided'来确保如果user.email为null或空字符串，则显示“No Email Provided”。
如果user为空，则使用th:unless显示“No user information available.”。

通过结合Thymeleaf的条件渲染和默认值操作符，你可以创建灵活且健壮的模板，能够处理各种数据情况并为用户提供清晰的信息。

10、特殊符号

在Thymeleaf中，下划线_是一个特殊的标记，表示无操作。当你在模板中的某个位置使用了_，Thymeleaf将不会对那个位置执行任何操作，即保持原样输出。这在某些情况下是很有用的，尤其是当你需要根据条件动态地包含或排除某些内容时。

下面是一个使用_无操作标记的Thymeleaf使用举例与说明：

假设你有一个用户列表，并且你想根据某个条件来决定是否显示某个用户的信息。你可以使用Thymeleaf的条件语句和_无操作标记来实现这一点。

<!-- 假设我们有一个条件来决定是否显示用户的电子邮件 -->      
<td th:if="${user.showEmail}">          
    <span th:text="${user.email}">Email</span>      
</td>      
<td th:unless="${user.showEmail}">          
<!-- 在这里使用_无操作标记，当不满足条件时，不输出任何内容 -->          
<span th:text="_">No Email</span>      
</td>

在上面的例子中，我们遍历了一个用户列表，并为每个用户显示名字和年龄。然后，我们根据user.showEmail的值来决定是否显示用户的电子邮件地址。如果user.showEmail为true，则显示电子邮件；如果为false，则使用th:text="_"来避免输出任何内容。这里_的作用是告诉Thymeleaf在该位置不进行任何操作，因此不会输出“No Email”这样的文本，而是保持空白。

需要注意的是，_无操作标记通常与Thymeleaf的条件语句（如th:if和th:unless）一起使用，以控制模板中某些部分的渲染行为。通过使用_，你可以更加精细地控制模板的输出内容，确保只输出你真正想要的内容。

沐暖沐

关注

15
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf基础知识语法

Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎，能够处理HTML、XML、JavaScript、CSS、TEXT、RAW这六种模板。这六种模版模式包含两种标记模板模式（HTML和XML），三种⽂本模板模式（TEXT，JAVASCRIPT和CSS）和⼀个⽆操作模板模式（RAW）。①简单表达式②文字③⽂本操作④算术运算符⑤布尔运算符⑥⽐较和相等运算符⑦条件运算符⑧特殊符号无操作： _
复制链接

扫一扫