您的位置:

Thymeleaf模板引擎

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属性。我们还使用了#{}符号来提示引擎通过对指定键执行国际化来显示文本。