Thymeleaf模板引擎

小蓝 • 2024-12-01 10:29 • 编程

Thymeleaf是一个模板引擎，可用于Web和独立环境。它是一个开源的Java库，可用于处理XML，HTML，JavaScript，CSS，甚至纯文本。

一、基本语法

Thymeleaf模板引擎使用类似于HTML的语法，但具有特殊的标签以及额外的属于它自己的语法。

如下是Thymeleaf的基本语法：

    
        <!DOCTYPE html>
        <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <title>Hello World</title>
        </head>
        <body>
            <p th:text="${'Hello, ' + name}">没有设置名字</p>
        </body>
        </html>

在上面的示例代码中，我们使用th:text属性告诉引擎输出“Hello,名字”。

使用Thymeleaf的语法，你可以像使用正常的HTML标签一样使用它内置的属性和标签，例如：

    
        <p th:if="user.isAdmin">只有管理员能看到</p>
        <div th:switch="${user.role}">
            <p th:case="'admin'">你是管理员</p>
            <p th:case="'user'">你是普通用户</p>
            <p th:case="*">你是新用户</p>
        </div>

上述代码中，我们使用了th:if和th:switch属性来指示引擎条件逻辑。这些属性的语法看起来很像Java。

二、模板布局

Thymeleaf允许使用一个独立的布局文件作为模板，这个文件定义了整个站点的结构，每个页面“扩展”它并覆盖其中的模块。

下面是一个示例代码展示如何使用布局模板：

布局模板 – layout.html:

    
        <!DOCTYPE html>
        <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <title>My Site</title>
        </head>
        <body>
            <header>
                <nav>
                    <ul>
                        <li><a href="/home" th:href="@{/home}">Home</a></li>
                        <li><a href="/about" th:href="@{/about}">About</a></li>
                        <li><a href="/contact" th:href="@{/contact}">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <div th:replace="template :: content"></div>
            </section>
            <footer>
                <p>All rights reserved!</p>
            </footer>
        </body>
        </html>

模块模板 – home.html:

    
        <!DOCTYPE html>
        <html xmlns:th="http://www.thymeleaf.org" th:include="layout :: layout">
        <head>
            <title>Home</title>
        </head>
        <body>
            <!-- Override the content section of the layout.html file -->
            <div th:fragment="content">
                <h1>Welcome to my site!</h1>
                <p>This is the home page.</p>
            </div>
        </body>
        </html>

在上述示例中，我们使用th:replace属性告知引擎插入一个模板片段。我们还使用了th:fragment属性，它定义了模板片段的名字。

三、迭代

当你使用Thymeleaf构建动态Web页面时，你经常需要迭代集合，例如：

    
        <ul>
            <li th:each="item : ${items}">
                <a th:href="@{/view/(id=${item.id})}">[[${item.name}]]</a>
            </li>
        </ul>

在上述代码中，我们使用th:each属性迭代items集合，使用item变量来引用当前迭代项。我们还使用了th:href属性来定义链接URL，并在链接文本中使用了Thymeleaf表达式。

四、条件渲染

Thymeleaf提供了多种条件渲染方式。你可以使用th:if和th:unless属性，条件渲染有点像if和unless语句。

如下是一个简单的例子：

    
        <p th:if="${user.isAdmin}">Admin</p>
        <p th:unless="${user.isAdmin}">Not Admin</p>

在上述代码中，我们使用了th:if和th:unless属性，这些属性提供了基于条件渲染的功能，如果满足条件则渲染。

五、变量表达式

Thymeleaf支持多种变量表达式，例如:

${…}用于查询表达式的值。

*{…}用于属性值或类型的声明。

${fns:xxx(…)}使用Thymeleaf标准函数库执行表达式。

#{…}用于国际化文本显示。

下面是一个使用变量表达式的示例：

    
        <p>Price: <span th:text="${price}"></span></p>
        <input type="text" th:field="*{username}">
        <p th:text="${#dates.format(date, 'dd-MM-yyyy')}">29-10-2022</p>
        <p th:text="#{user.welcome}">Hello, User!</p>

在上述代码中，我们使用了变量表达式，例如th:text属性，它被使用来引用 price 变量的内容，另外我们使用了th:field属性来绑定到一个输入元素，这里我们使用了*{username}变量，并推断出了它的类型，并根据它的类型生成了name属性。我们还使用了#{}符号来提示引擎通过对指定键执行国际化来显示文本。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192733.html