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

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

java 复制代码
@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 表达式渲染数据

html 复制代码
<h1 th:text="${message}"></h1>

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

2、属性绑定和条件判断

html 复制代码
<p th:class="${status eq 'active'} ? 'active' : ''">Content</p>

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

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

相关推荐
naice36 分钟前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼41 分钟前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js