Web开发:Thymeleaf模板引擎

斗-匕

于 2024-09-20 22:10:25 发布

阅读量949

点赞数 20

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/SOS5418818845/article/details/142406615

版权

一、Thymeleaf 的概念

Thymeleaf 是一个先进的服务器端 Java 模板引擎，专门为 Web 应用和独立环境而设计。它具有高度的灵活性和可扩展性，能够与众多流行的 Web 框架完美融合，其中包括强大的 Spring MVC。

Thymeleaf 的核心设计理念是提供一种自然的模板方式，让开发者在编写模板时，能如同撰写静态 HTML 页面一般流畅，同时又能轻松地动态插入数据和执行逻辑操作。通过特定的标签和属性，Thymeleaf 模板文件展现出卓越的可读性和可维护性，使得开发团队能够更高效地协作。

Thymeleaf 的优势

与静态 HTML 的高度相似性：这使得前端开发人员能够快速上手，减少学习成本。同时，对于需要进行前后端分离开发的项目，Thymeleaf 可以作为一种有效的中间层，使得前后端的沟通更加顺畅。
强大的表达式语言：能够访问各种对象属性、进行复杂的算术运算和逻辑判断，为动态数据的展示提供了丰富的手段。
良好的可扩展性：可以通过自定义标签和属性来满足特定项目的需求，进一步增强了其适用性。

二、Thymeleaf 的语法

（一）表达式语言

Thymeleaf 的表达式语言是其强大功能的核心之一。它允许开发者以简洁而直观的方式访问和操作数据。

访问对象属性：
- ${user.name}：这里可以轻松获取名为user的对象的name属性值。例如，如果有一个用户对象User user = new User("John", "Doe");，在模板中使用${user.name}将显示 “John”。
- *{user.name}：这个表达式在表单元素中特别有用，用于将表单元素与对象的属性进行绑定。比如<input type="text" th:field="*{user.name}">，当表单提交时，Thymeleaf 会自动将用户输入的值绑定到user对象的name属性上。
执行算术运算：
- ${1 + 2}：可以进行简单的算术运算，这里将返回 3。
- ${product.price * quantity}：假设product是一个包含价格属性的对象，quantity是一个变量，这个表达式可以计算出总价。
进行条件判断：
- ${#lists.size(list) > 0}：判断列表的长度是否大于 0。如果列表不为空，这个表达式将返回true，否则返回false。

（二）条件判断

在 Thymeleaf 中，条件判断是实现动态页面展示的重要手段。

th:if：根据条件判断是否显示元素。例如，<div th:if="${user.isAdmin}">This is for administrators only.</div>，只有当user对象的isAdmin属性为true时，这个<div>元素才会在页面上显示。
th:unless：与th:if相反，当条件不满足时显示元素。例如，<div th:unless="${user.isLoggedIn}">Please log in to access this content.</div>，如果用户没有登录（即isLoggedIn为false），这个<div>元素就会显示。

（三）循环遍历

Thymeleaf 提供了方便的循环遍历功能，可以轻松处理集合和数组。

<tr th:each="user : ${users}">...</tr>：这里遍历名为users的集合，为集合中的每个元素生成一个<tr>标签。在循环体内，可以使用user变量来访问当前遍历到的元素的属性。例如，可以这样显示用户列表：

<table>
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.name}"></td>
        <td th:text="${user.email}"></td>
    </tr>
</table>

（四）模板片段

模板片段是 Thymeleaf 的一个强大特性，它允许开发者定义可重复使用的代码片段。

定义模板片段：
- <div th:fragment="footer">...</div>：这里定义了一个名为footer的模板片段。这个片段可以包含任何 HTML 代码，比如页脚的版权信息、社交媒体链接等。
引用模板片段：
- <div th:replace="~{fragments/footer :: footer}">...</div>：在其他页面中，可以使用这个表达式来引用名为footer的模板片段。th:replace属性表示用模板片段的内容完全替换当前元素。还有th:include属性，它会将模板片段的内容包含在当前元素中，而不是替换。

三、Thymeleaf 页面布局

（一）布局模板

布局模板是 Thymeleaf 页面布局的基础，它定义了页面的基本结构和公共元素。

基本结构：
- 一个典型的布局模板包含<html>、<head>、<body>等部分，以及一些公共的元素，如导航栏、页脚等。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>My Website</title>
    <link rel="stylesheet" th:href="@{/styles.css}">
</head>
<body>
    <header th:fragment="header">
        <h1>Welcome to My Website</h1>
        <nav>
            <a th:href="@{/home}">Home</a>
            <a th:href="@{/about}">About</a>
            <a th:href="@{/contact}">Contact</a>
        </nav>
    </header>
    <main th:replace="~{page :: content}">
        <!-- 这里将被具体页面的内容替换 -->
    </main>
    <footer th:fragment="footer">
        <p>Copyright © 2024. All rights reserved.</p>
    </footer>
</body>
</html>

可替换区域：
- 在布局模板中，可以使用th:fragment定义可替换的区域。例如，<main th:replace="~{page :: content}">中的content就是一个可替换的片段。具体页面可以通过引用这个片段来插入自己的内容。

（二）具体页面

具体页面是基于布局模板构建的，它通过引用布局模板中的片段来实现页面的布局。

引用布局模板片段：
- 例如，一个名为home.html的页面可以这样引用布局模板：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home Page</title>
</head>
<body>
    <div th:replace="~{layout :: header}"></div>
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
    <div th:replace="~{layout :: footer}"></div>
</body>
</html>