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属性来绑定到一个