Java基础总结之Thymeleaf详解

下面我将从以下几个方面完整讲解Java基础总结之Thymeleaf详解。

一、Thymeleaf 简介

Thymeleaf 是一个模板引擎，用于将数据渲染到 HTML、XML、JavaScript 或者纯文本等格式的文档中。它可以填充表单和复杂的 HTML 纯文本，从而生成动态的 Web 页面。Thymeleaf 提供了强大的表达式工具，支持表单绑定和模板布局等功能。

二、Thymeleaf 使用方法

Thymeleaf 的使用非常简单，以下示例展示了 Thymeleaf 将数据注入到 HTML 页面中的过程。

1. 添加 Thymeleaf 之前，需要添加以下依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>${spring.boot.version}</version>
</dependency>

2. 开启模板解析

在 Spring Boot 中，默认已经开启 Thymeleaf 模板解析。在 Spring MVC 的配置文件中添加如下配置：

<bean id="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <property name="prefix" value="classpath:/templates/"/>
    <property name="suffix" value=".html"/>
    <property name="templateMode" value="HTML"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>

<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"/>
    <property name="enableSpringELCompiler" value="true"/>
</bean>

<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"/>
    <property name="characterEncoding" value="UTF-8"/>
</bean>

这里的前缀设置为 templates，表示模板文件放在 resources/templates 目录下，后缀设置为 .html。

3. 在 html 文件中使用 Thymeleaf 语法

以下示例展示了 Thymeleaf 填充数据的过程。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
</head>
<body>
    <h1 th:text="${title}">Title here</h1>
</body>
</html>

上述代码中，使用了 Thymeleaf 的标签 th:text 和表达式 ${title}，将 title 的值注入到页面中。

三、Thymeleaf 的语法

Thymeleaf 提供了丰富的语法，以下是 Thymeleaf 常用语法：

1. 声明变量

Thymeleaf 中的变量声明以 # 开始。

<p th:text="${#lists.size(list)}>0 items</p>

2. 表达式

表达式以 ${} 开始，可以引用变量、字符串、对象等。

<p th:text="'hello ' + ${user.name}">hello user</p>

3. 条件判断语句

条件判断语句使用 th:if 标签。

<div th:if="${value > 0}">value > 0</div>

4. 循环语句

循环语句使用 th:each 标签。

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

这里的 items 是一个 List 对象，循环将 List 中的元素填充到 HTML 中。

5. 链接

使用 Thymeleaf 可以很方便地生成链接。

<a th:href="@{http://www.example.com}/">visit example.com</a>

在 href 属性中使用 @{} 标记可以轻松地生成链接，可以填充变量、字符串和具体值。

四、为什么要使用 Thymeleaf？

相比于传统的 JSP，Thymeleaf 有以下几个优点：

Thymeleaf 继承自与 HTML 一样的标准语法，非常易于学习和使用；
Thymeleaf 是一个独立的模板引擎，适用于多种应用场景，而 JSP 依赖于 Servlet 容器，需要在容器内部运行；
Thymeleaf 支持多种模板布局方式，包括模板片段、布局、片段内联等，具有较高的灵活性。

五、实例说明

这里简单概述两个使用场景。

1. 表单数据填充

Thymeleaf 可以很方便地将表单数据注入到 HTML 页面中。

<form action="/user/save" method="post">
    <div>
        <label>姓名</label>
        <input type="text" name="name" th:value="${user.name}">
    </div>
    <div>
        <label>年龄</label>
        <input type="number" name="age" th:value="${user.age}">
    </div>
    <button type="submit">保存</button>
</form>

上述代码中，使用了 th:value 将 user 对象中的数据注入到了表单中。接收到表单提交的数据时，只需要在 Java 代码中定义一个与表单参数名相同的属性即可。

2. 模板布局

Thymeleaf 支持多种模板布局方式，包括模板片段、布局、片段内联等。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title th:text="${title}">Default Title</title>
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet"/>
</head>

<body>
    <nav th:replace="fragments/layout :: nav"></nav>
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <ul class="list-group">
                    <li class="list-group-item"><a href="/">Home</a></li>
                    <li class="list-group-item"><a href="/users">Users</a></li>
                </ul>
            </div>
            <div class="col-md-9" th:fragment="content">
                <!-- content here -->
                <p th:utext="${content}"></p>
            </div>
        </div>
    </div>
    <footer th:replace="fragments/layout :: footer"></footer>
    <script th:src="@{/js/jquery.js}"></script>
</body>

</html>

以上代码中，页面布局和导航栏都定义在时在 /resources/templates/fragments/layout.html 文件中。这样可以避免重复代码的定义。在其他页面中可以使用 th:replace 引入该模板文件即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Java基础总结之Thymeleaf详解 - Python技术站