当前位置：首页 > article >正文

Web开发：Thymeleaf模板引擎

article 2024/11/13 13:44:36

一、概述

Thymeleaf是一种用于在服务器端和客户端之间渲染HTML、XML、JavaScript、CSS和文本的Java模板引擎。它主要用于Web开发，通过使界面与业务数据分离，提高了开发效率，并提供了灵活、自然的模板处理功能。Thymeleaf因其开箱即用、易于集成以及与Spring Boot的紧密集成而广受欢迎。

二、特点

动静分离：
- Thymeleaf选用HTML作为模板页，通过特定标签语法代表其含义，但并未破坏HTML结构。即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便了界面的测试和修改。
开箱即用：
- Spring Boot官方对Thymeleaf提供了大力支持，并做了很多默认配置，开发者只需编写对应的HTML即可，大大减轻了上手难度和配置复杂度。
易于集成：
- Thymeleaf与Spring Boot框架紧密集成，提供了许多与Spring Boot相关的特性和扩展。它可以与Spring MVC、Spring Security等框架无缝集成。
强大的表达式功能：
- Thymeleaf支持强大的表达式语言（SpEL），可以在模板中执行复杂的表达式操作，如变量赋值、条件判断、迭代循环等。
应用广泛：
- Thymeleaf是目前应用广泛的模板引擎之一，拥有活跃的社区和丰富的生态系统。它被广泛用于开发各种类型的Web应用和邮件模板。

三、基本配置

添加依赖：

在Spring Boot项目中，需要在pom.xml中添加Thymeleaf的依赖：

<dependency>  
    <groupId>org.springframework.boot</groupId>  
    <artifactId>spring-boot-starter-thymeleaf</artifactId>  
</dependency>

配置文件：

在application.properties或application.yml中添加Thymeleaf的配置项，如模板位置、编码方式等：

spring.thymeleaf.prefix=classpath:/templates/  
spring.thymeleaf.encoding=UTF-8  
spring.thymeleaf.cache=false  
spring.thymeleaf.suffix=.html  
spring.thymeleaf.servlet.content-type=text/html

HTML模板：

每个HTML页面都需要加上Thymeleaf的名称空间：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
    <!-- 页面内容 -->  
</html>

四、基本语法

变量表达式：
- 使用${...}进行变量取值，如<div th:text="${username}"></div>。
- 支持文本替换、HTML文本替换、属性值替换、对象中字段取值、字符串拼接、逻辑判断、迭代遍历、运算等操作。
链接表达式：用于处理URL链接，如<a th:href="@{/user/profile}">Profile</a>。
选择变量表达式：提供更复杂的表达式处理能力，如条件表达式等。
消息表达式：#{...}，用于读取外部文件（如.properties文件）中的配置数据。
片段表达式：~{...}，用于模板间的片段包含或替换。

五、应用实例

在Spring Boot项目中，控制器（Controller）会将数据添加到Model中，然后传递给Thymeleaf模板进行渲染。例如：

@Controller  
public class GreetingController {  
  
    @GetMapping("/greeting")  
    public String greeting(Model model) {  
        model.addAttribute("name", "World");  
        return "greeting"; // 返回模板的名称，对应templates目录下的greeting.html  
    }  
}

在greeting.html模板中，可以使用Thymeleaf语法来展示数据：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <title>Greeting</title>  
</head>  
<body>  
    <p th:text="'Hello, ' + ${name} + '!'"></p>  
</body>  
</html>

这样，当访问/greeting时，就会看到页面上显示“Hello, World!”。

六、使用Thymeleaf的示例可以涵盖多个方面，包括变量绑定、条件判断、循环遍历、链接生成以及国际化支持等。

变量绑定

示例代码：

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
<head>  
    <meta charset="UTF-8">  
    <title>Thymeleaf Variable Binding</title>  
</head>  
<body>  
    <p th:text="${user.name}">Username</p>  
    <p th:text="${greeting}">Hello, World!</p>  
</body>  
</html>

说明：

${user.name} 用于在模板中输出 user 对象的 name 属性值。
${greeting} 用于输出名为 greeting 的变量的值。

条件判断

示例代码：

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

说明：

th:if 用于在满足条件时渲染HTML元素。
th:unless 用于在不满足条件时渲染HTML元素，与 th:if 相反。

循环遍历

示例代码：

<ul>  
    <li th:each="item : ${items}" th:text="${item.name}"></li>  
</ul>

说明：

th:each 用于遍历集合或数组，并为每个元素生成一个 <li> 标签。
${item.name} 表示集合中每个元素的 name 属性值。

链接生成

示例代码：

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

说明：

@{/product/{id}(id=${productId})} 用于生成动态URL，其中 {id} 是一个路径变量，其值由 productId 变量的值确定。

国际化支持

示例代码：

<p th:text="#{home.welcome}">Welcome to our website!</p>

说明：

#{home.welcome} 用于从国际化配置文件中获取与 home.welcome 对应的文本信息。
这要求你的项目中已经配置了国际化资源文件（如 messages.properties、messages_en.properties 等）。

复杂表达式和工具类

示例代码（使用字符串工具类）：

<div th:if="${not #strings.isEmpty(testString)}">  
    <p>testString初始值: <span th:text="${testString}"></span></p>  
    <p>toUpperCase: <span th:text="${#strings.toUpperCase(testString)}"></span></p>  
</div>