文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

3.3 使用 Thymeleaf 模板

发布于 2025-04-26 13:26:32 字数 4851 浏览 0 评论 0 收藏 0

完成了模型和控制器的设计之后，接下来的工作就是视图设计了。在视图设计中主要使用 Thymeleaf 模板来实现。在进行视图设计之前，先了解一下 Thymeleaf 模板的功能。

Thymeleaf 是一个优秀的面向 Java 的 XML/XHTML/HTML 5 页面模板，并具有丰富的标签语言和函数。使用 Spring Boot 框架进行界面设计，一般都会选择 Thymeleaf 模板。

3.3.1 Thymeleaf 配置

要使用 Thymeleaf 模板，首先，必须在工程的 Maven 管理中引入它的依赖：“spring-boot-starter-thymeleaf”，如代码清单 3-9 所示。

代码清单 3-9 Thymeleaf 依赖配置

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

其次，必须配置使用 Thymeleaf 模板的一些参数。在一般的 Web 项目中都会使用如代码清单 3-10 所示的配置，其中，prefix 指定了 HTML 文件存放在 webapp 的/WEB-INF/views/目录下面，或者也可以指定其他路径，其他一些参数的设置其实是使用了 Thymeleaf 的默认设置。

在实例中，为了更方便将项目发布成 jar 文件，我们将使用 Thymeleaf 自动配置中的默认配置选项，即只要在资源文件夹 resoueces 中增加一个 templates 目录即可，这个目录用来存放 HTML 文件。

代码清单 3-10 Thymeleaf 配置

spring:
    thymeleaf:
        prefix: /WEB-INF/views/
        suffix: .html
        mode: HTML5
        encoding: UTF-8
        content-type: text/html
        cache: false

注意如果工程中增加了 Thymeleaf 的依赖，而没有进行任何配置，或者增加默认目录，启动应用时就会报错。

3.3.2 Thymeleaf 功能简介

在 HTML 页面上使用 Thymeleaf 标签语言，用一个简单的关键字“th”来标注。使用 Thymeleaf 标签语言的典型例子如下：

<h3 th:text="${actor.name}"></h3>
<img th:src="@{/images/logo.png}"/>

其中，th：text 指定了在标签<h3>中显示的文本，它的值来自于关键字“$”所引用的内存变量，th：src 设定了标签<img>的图片文件的链接地址，既可以是绝对路径，也可以是相对路径。下面列出了 Thymeleaf 的一些主要标签和函数。

th:text，显示文本。





th:utext：和




th:text 的区别是针对




"unescaped text"。





th:attr：设置标签属性。





th:if or th:unless：条件判断语句。





th:switch，




th:case：选择语句。





th:each：循环语句。





#dates：日期函数。





#calendars：日历函数。





#numbers：数字函数。





#strings：字符串函数。





#objects：对象函数。





#bools：逻辑函数。





#arrays：数组函数。





#lists：列表函数。

本章的实例工程将在视图设计中使用 Thymeleaf 的下列几个主要功能，而有关 Thymeleaf 的详细说明和介绍可以访问它的官方网站 http://www.thymeleaf.org/ ，以获得更多的帮助。

1.使用功能函数

Thymeleaf 有一些日期功能函数、字符串函数、数组函数、列表函数等，代码清单 3-11 是 Thymeleaf 使用日期函数的一个例子，#dates.format 是一个日期格式化的使用实例，它将电影的创建日期格式化为中文环境的使用格式“'yyyy-MM-dd HH：mm：ss'”。

代码清单 3-11 Thymeleaf 使用函数

th:value="${movie.createDate} ? ${#dates.format(movie.createDate,'yyyy-MM-dd HH:mm:ss')} :''"

2.使用编程语句

Thymeleaf 有条件语句、选择语句、循环语句等。代码清单 3-12 使用 each 循环语句来显示一个数据列表，即在下拉列表框中使用循环语句来显示所有的演员列表。

代码清单 3-12 th：each 循环

<select name="actorid" id="actorid">
<option value="">选择演员




</option>
<option th:each="actor:${actors}"
    th:value="${actor.id}"
    th:text="${actor.name}">
</option>
</select>

3.使用页面框架模板

Thymeleaf 的页面框架模板是比较优秀的功能。预先定义一个 layout，它具有页眉、页脚、提示栏、导航栏和内容显示等区域，如代码清单 3-13 所示。其中，layout：fragment="prompt"是一个提示栏，它可以让引用的视图替换显示的内容；fragments/nav：：nav 是一个导航栏并指定了视图文件，也就是说它不能被引用的视图替换内容；layout：fragment="content"是一个主要内容显示区域，它也能由引用的视图替换显示内容；fragments/footer：：footer 是一个页脚定义并且也指定了视图文件，即不被引用的视图替换显示内容。这样设计出来的页面模板框架如图 3-1 所示。

代码清单 3-13 layout 模板

<div class="headerBox">
    <div class="topBox">
        <div class="topLogo f-left">
            <a href="#"><img th:src="@{/images/logo.png}"/></a>
        </div>
        <div class="new-nav">
            <h3>电影频道




</h3>
        </div>
    </div>
</div>
<div class="locationLine" layout:fragment=" prompt ">
    当前位置：首页




 &gt; <em>页面




</em>
</div>
<table class="globalMainBox">
    <tr>
        <td class="columnLeftBox" v>
            <div th:replace="fragments/nav :: nav"></div>
        </td>
        <td class="whiteSpace"></td>
        <td class="rightColumnBox" v>
            <div layout:fragment="content"></div>
        </td>
    </tr>
</table>
<div class="footBox" th:replace="fragments/footer :: footer"></div>

图 3-1 页面框架模板

有了页面模板之后，就可以在一个主页面视图上引用上面的 layout，并替换它的提示栏 prompt 和主要内容显示区域 content，其他页眉、页脚和导航栏却保持同样的内容，如代码清单 3-14 所示。这样就可以设计出一个使用共用模板的具有统一风格特征的界面。

代码清单 3-14 使用 layout 模板的视图设计

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="fragments/layout">……





<div class="locationLine" layout:fragment=" prompt ">当前位置：首页




 &gt; <em >电影管理




</em>
</div>
<div class="statisticBox w-782"  layout:fragment="content">
......
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

3.3 使用 Thymeleaf 模板

3.3.1 Thymeleaf 配置

3.3.2 Thymeleaf 功能简介

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。