springboot之Thymeleaf简单使用

最新推荐文章于 2024-04-29 00:39:27 发布

LaFerrari1013

最新推荐文章于 2024-04-29 00:39:27 发布

阅读量1k

点赞数 27

文章标签： spring boot

本文链接：https://blog.csdn.net/m0_63486787/article/details/134767573

版权

本文介绍了Thymeleaf，一种在JavaWeb中流行的模板引擎，强调其HTML集成、与Spring框架的集成、简洁语法、强大的表达式语言以及与其他前端技术的结合。通过实例展示了如何使用Thymeleaf进行动态数据展示、表单处理和模板片段复用等。

摘要由CSDN通过智能技术生成

Thymeleaf简介

Thymeleaf是一种流行的模板引擎，用于在Java web应用程序中创建动态网页。它提供了一种将服务器端数据和客户端HTML页面结合的方式，使得开发人员可以更轻松地构建动态、交互性强的Web应用。

下面是Thymeleaf的一些主要特点：

1.自然的HTML集成：Thymeleaf模板文件可以直接作为普通的HTML文件进行预览和编辑，不需要任何特殊的工具或解析器。这意味着即使没有使用Thymeleaf的特定功能，也可以正常显示和运行模板文件。
2.与Spring框架的无缝集成：Thymeleaf可以与Spring框架完美地集成，提供了许多有用的功能，例如表单处理、国际化支持等。它是Spring Boot的默认模板引擎，可以方便地与其他Spring技术栈进行协作开发。
3.简洁的语法：Thymeleaf使用简洁、易读的语法，基于自然模板（Natural Templates）的思想。它采用类似于HTML的标记语法，使用标签属性来指示动态数据绑定和逻辑处理。
4.强大的表达式语言：Thymeleaf内置了一个强大的表达式语言（Expression Language），可以用于在模板中读取和操作服务器端的数据。这个表达式语言支持许多常见的操作，例如属性访问、集合迭代、条件判断等。
5.可扩展性：Thymeleaf提供了丰富的可扩展性，可以通过自定义标签、解析器等方式来满足特定的需求。它还支持一些高级功能，如布局管理、模板片段等。
6.相比于JSP，Thymeleaf具有更简单易懂的语法、更好的可读性、更好的扩展性、更高的安全性、更好的性能以及更方便的与Spring框架集成，因此越来越多的开发者选择使用Thymeleaf来进行Web应用程序开发。

Thymeleaf基础

Thymeleaf的语法使用类似于HTML的标签属性来指示动态数据绑定和逻辑处理。下面是一些常用的语法示例：

变量表达式
使用${}语法在模板中访问服务器端的变量。例如：

<p>欢迎您，${user.name}！</p>

在渲染时，${user.name}会被替换为服务器端传入的user对象的name属性的值。

选择性渲染
使用th:if指令进行条件判断，只有满足条件时才渲染指定的内容。例如：

<div th:if="${user.isAdmin}">
    <p>您是管理员用户。</p>
</div>

如果user.isAdmin为true，则会渲染

标签内的内容。

列表迭代
使用th:each指令对列表进行迭代，并渲染每个元素。例如：

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

${products}是一个包含多个产品的列表，th:each="product : ${products}"表示对列表进行迭代，每次迭代都将当前元素赋值给product变量，然后通过th:text指令渲染出列表项的名称。
4. 属性赋值
使用th:attr指令为HTML标签动态赋值属性。例如：

<a th:href="@{/products/detail/{id}(id=${product.id})}" th:text="${product.name}"></a>

在上面的示例中，th:href和th:text分别用于动态赋值链接的href和显示的文本内容。
Thymeleaf的常用指令
除了语法之外，Thymeleaf还提供了一些常用的指令，用于处理特定的逻辑和操作。以下是一些常用的指令示例：

th:src指令
用于设置HTML元素的src属性值，通常用于引入图片或其他静态资源。例如：

<img th:src="@{/images/logo.png}" alt="Logo">

th:if和th:unless指令
用于条件判断，根据条件结果来决定是否渲染指定的内容。例如：

<p th:if="${user.isAdmin}">欢迎管理员登录！</p>
<p th:unless="${user.isAdmin}">您没有管理员权限。</p>

th:switch和th:case指令
用于多个条件的判断，类似于Java中的switch语句。例如：

<div th:switch="${user.role}">
    <p th:case="'admin'">您是管理员用户。</p>
    <p th:case="'user'">您是普通用户。</p>
    <p th:case="'guest'">您是游客。</p>
    <p th:case="*">未知角色。</p>
</div>

th:text和th:utext指令
用于设置HTML元素的文本内容。其中，th:text会对内容进行HTML转义，而th:utext则不会进行转义。例如：

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

${message}是一个包含HTML标签的字符串，使用th:text会将标签进行转义显示，而th:utext则会原样输出。

Thymeleaf在Web开发中的应用

动态数据展示
假设我们有一个User对象，包含了用户的姓名和年龄信息。我们可以在模板中通过Thymeleaf的语法将这些信息动态地展示出来。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>动态数据展示示例</title>
</head>
<body>
    <h1>欢迎您，<span th:text="${user.name}"></span>！</h1>
    <p>您今年<span th:text="${user.age}"></span>岁了。</p>
</body>
</html>

在这个示例中， ${user.name}和$ {user.age}分别是User对象的属性值，使用th:text指令将它们动态地绑定到HTML模板中。

表单处理
假设我们需要在页面中显示一个表单，让用户输入自己的姓名和年龄，并提交到服务器端保存。我们可以使用Thymeleaf的表单绑定功能将表单数据与服务器端的User对象进行绑定，并自动生成表单元素。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表单处理示例</title>
</head>
<body>
    <h1>请填写您的个人信息：</h1>
    <form action="/save" method="post" th:object="${user}">
        <label>姓名：</label>
        <input type="text" th:field="*{name}" /><br/>
        <label>年龄：</label>
        <input type="text" th:field="*{age}" /><br/>
        <input type="submit" value="保存" />
    </form>
</body>
</html>

在这个示例中，th:object="${user}“指定了服务器端的User对象，th:field=”{name}“和th:field=”{age}"分别指定了表单元素与User对象的属性的绑定关系。当用户提交表单时，服务器端会自动将表单数据绑定到User对象上，并执行相应的业务逻辑。

页面片段复用
假设我们有一个导航栏和一个页脚，在多个页面中都需要使用。我们可以使用Thymeleaf的模板片段功能，将它们定义为独立的模板片段，在其他页面中引用。例如：

<!-- 导航栏模板 nav.html -->
<nav>
    <a href="/">首页</a>
    <a href="/about">关于我们</a>
    <a href="/contact">联系我们</a>
</nav>
html
<!-- 页脚模板 footer.html -->
<footer>
    &copy; 2021-2022 My Company, Inc.
</footer>
html
<!-- 具体页面 index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>页面片段复用示例</title>
</head>
<body>
    <header th:replace="nav.html"></header>
    <h1>欢迎来到首页！</h1>
    <footer th:replace="footer.html"></footer>
</body>
</html>

在这个示例中，th:replace="nav.html"和th:replace="footer.html"分别将导航栏和页脚模板引入到具体页面中，实现了页面片段的复用。

国际化和本地化
假设我们需要根据用户的语言环境动态显示不同的文本内容，我们可以使用Thymeleaf的国际化和本地化功能。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>国际化和本地化示例</title>
</head>
<body>
    <p th:text="#{welcome.message}"></p>
</body>
</html>

在这个示例中，#{welcome.message}是一个国际化的消息键，Thymeleaf会根据用户的语言环境动态加载对应的资源文件，并将相应的文本内容渲染到模板中。

标签操作和条件判断
假设我们需要根据用户的角色动态展示不同的内容，我们可以使用Thymeleaf的标签操作和条件判断指令。例如：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>标签操作和条件判断示例</title>
</head>
<body>
    <div th:switch="${user.role}">
        <p th:case="'admin'">欢迎管理员用户登录！</p>
        <p th:case="'user'">欢迎普通用户登录！</p>
        <p th:case="'guest'">欢迎游客登录！</p>
        <p th:case="*">未知用户角色。</p>
    </div>
</body>
</html>

Thymeleaf与前端技术的结合

1.Thymeleaf + Bootstrap
Bootstrap是一个流行的前端框架，提供了丰富的CSS和JavaScript组件，可以快速构建美观的Web界面。Thymeleaf可以很方便地与Bootstrap集成，通过使用Bootstrap提供的CSS类和JavaScript插件，可以实现更加丰富的页面效果。

例如，可以使用Thymeleaf的循环指令和Bootstrap的表格样式，快速生成一个响应式的数据表格：

<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </tbody>
</table>

Thymeleaf + Vue.js
Vue.js是一个流行的前端框架，提供了响应式数据绑定、组件化开发、虚拟DOM等功能，可以快速构建单页面应用。Thymeleaf可以与Vue.js集成，通过将Vue.js的组件嵌入到Thymeleaf模板中，实现复杂的交互逻辑。

例如，可以使用Thymeleaf的属性绑定和Vue.js的数据绑定，将用户输入的数据实时渲染到页面上：

<div id="app">
    <input type="text" v-model="message" th:value="${user.name}" />
    <p>您的姓名是：{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        }
    })
</script>

结语

Thymeleaf在Java Web开发中得到广泛应用，尤其适用于传统的服务器端渲染模式和前后端不分离的项目。Thymeleaf的模板语法类似于HTML，易于学习和理解，上手成本较低。Thymeleaf可以与JavaScript、CSS等前端技术无缝集成，为开发人员提供更灵活、高效的开发方式，Thymeleaf还提供丰富的表达式语言和模板功能，可以实现复杂的数据绑定、条件判断、循环遍历等操作，满足各种业务需求。

LaFerrari1013

关注

27
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
springboot之Thymeleaf简单使用

Thymeleaf是一种流行的模板引擎，用于在Java web应用程序中创建动态网页。它提供了一种将服务器端数据和客户端HTML页面结合的方式，使得开发人员可以更轻松地构建动态、交互性强的Web应用。下面是Thymeleaf的一些主要特点：1.自然的HTML集成：Thymeleaf模板文件可以直接作为普通的HTML文件进行预览和编辑，不需要任何特殊的工具或解析器。这意味着即使没有使用Thymeleaf的特定功能，也可以正常显示和运行模板文件。
复制链接

扫一扫