Thymeleaf 基本语法学习笔记

当开发Web应用程序时，我们通常需要使用模板引擎来构建和呈现动态内容。Thymeleaf是一个功能强大的Java模板引擎，它提供了丰富的表达式和标签，使得数据绑定、条件判断、循环迭代等操作变得轻松而灵活。

Thymeleaf在Java生态系统中非常受欢迎，并与Spring框架紧密集成。它具有丰富的扩展和第三方库，可以提供各种功能。Thymeleaf在服务器端生成HTML页面，并将最终的结果发送给客户端浏览器。页面中的内容在每次请求时都会由服务器动态生成。和Vue这些不同，Vue在客户端浏览器中动态渲染页面。它可以基于数据动态地更新视图，而无需每次请求都向服务器发送数据。

Thymeleaf 3.1.2.RELEASE is the latest version. It requires Java SE 8 or newer.

一、Thymeleaf 表达式语言（Expression Language）的使用

Thymeleaf 表达式语言（简称为EL）是 Thymeleaf 强大功能的基础之一，它使得在模板中可以轻松地插入和操作动态数据。下面是几个常用的 Thymeleaf 表达式：

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

   • 用于在模板中输出变量的值。
   • 示例：<h1 th:text="${pageTitle}">Page Title</h1>

2. 选择表达式：*{expression}

   • 用于从对象中选择属性或调用方法。
   • 示例：<p th:text="*{user.name}">Default Name</p>

3. 链接表达式：@{url}

   • 用于生成链接或动态 URL。支持相对路径和绝对路径。
   • 示例：<a th:href="@{/product/{id}(id=1)}">Product Details</a>

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

   • 用于国际化支持，根据当前环境选择合适的文本。
   • 示例：<span th:text="#{welcome.message}">Welcome!</span>

5. 内联表达式：[[...]]

   • 用于 JavaScript 代码块内的 Thymeleaf 表达式。
   • 示例：<script th:inline="javascript"> var name = '[[${name}]]'; </script>

二、Thymeleaf 标签的基本用法

Thymeleaf 提供了一系列标签和属性，使得开发者能够更灵活地操作 HTML 元素。下面是一些常用的 Thymeleaf 标签：

1. th:text：用于设置元素的文本内容。

   • 示例：<h1 th:text="${pageTitle}">Page Title</h1>

2. th:if 和 th:unless：用于条件判断并渲染 HTML 元素。

   • 示例：<p th:if="${isUserLoggedIn}">Hello, User!</p>
   • 示例：<p th:unless="${isUserLoggedIn}">Please login to continue.</p>

3. th:each：用于循环遍历集合或数组，并渲染 HTML 元素。

   • 示例：<ul><li th:each="item : ${items}" th:text="${item}"></li></ul>

4. th:href 和 th:src：用于设置链接地址和资源路径。

   • 示例：<a th:href="@{/product/{id}(id=1)}">Product Details</a>
   • 示例：<img th:src="@{/images/myimage.jpg}" alt="My Image" />

5. th:attr：用于设置 HTML 元素的属性。

   • 示例：<input type="text" th:attr="placeholder=#{username.placeholder}" />

三、在模板中使用属性和变量

Thymeleaf 允许在模板中使用属性和变量，以插入动态数据。下面是几个常见的用法：

1. 使用属性：通过 HTML 元素的属性来设置动态值。

   • 示例：<h1 th:text="${pageTitle}">Page Title</h1>

2. 使用变量：使用 ${variable} 语法将变量的值插入到模板中。

   • 示例：<p th:text="${user.name}">Default Name</p>

3. 在元素内部使用属性和变量：可以在标签的内容或属性值中使用表达式语言。

   • 示例：<a th:href="@{/product/${productId}(productId=${product.id})}">Product Details</a>

通过 Thymeleaf 表达式语言和标签，您可以轻松地在模板中添加动态数据和逻辑，并根据需要进行条件判断、循环遍历等操作。
好的，下面我将为您提供示例来说明数据绑定、渲染和属性绑定与条件判断的用法。

四、在控制器中传递数据到模板

@Controller
public class MyController {
    @GetMapping("/hello")
    public String hello(Model model) {
        String message = "Hello, Thymeleaf!";
        model.addAttribute("message", message);
        return "hello-template";
    }
}

在这个示例中，控制器通过 Model 对象的 addAttribute 方法将数据（message）传递给模板。然后，控制器返回字符串 "hello-template"，表示使用名为 hello-template 的 Thymeleaf 模板来进行渲染。

1、使用 Thymeleaf 表达式渲染数据

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

这个示例中，通过 ${message} 表达式可以在模板中渲染控制器传递过来的 message 数据。

2、属性绑定和条件判断

<p th:class="${status eq 'active'} ? 'active' : ''">Content</p>

这个示例中，根据条件 ${status eq 'active'} 判断，如果条件成立，则给 <p> 元素添加 active 类；否则，不添加任何类。

我演示了数据绑定和渲染，以及属性绑定和条件判断的用法。您可以根据具体需求，在控制器中传递数据给模板，并使用 Thymeleaf 表达式根据数据进行渲染和操作。请根据实际情况修改示例中的变量名和条件，以适应您的应用程序逻辑。