深入实践Spring Boot3.3.2 Thymeleaf功能简介

<b>3.3.2　thymeleaf功能简介</b>

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

&lt;h3

th:text="${actor.name}"&gt;&lt;/h3&gt;

&lt;img

th:src="@{/images/logo.png}"/&gt;

其中，th:text指定了在标签&lt;h3&gt;中显示的文本，它的值来自于关键字“$”所引用的内存变量，th:src设定了标签&lt;img&gt;的图片文件的链接地址，既可以是绝对路径，也可以是相对路径。下面列出了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循环

&lt;select

name="actorid" id="actorid"&gt;

&lt;option value=""&gt;选择演员&lt;/option&gt;

&lt;option

th:each="actor:${actors}"

    th:value="${actor.id}"

    th:text="${actor.name}"&gt;

&lt;/option&gt;

&lt;/select&gt;

3.?使用页面框架模板

thymeleaf的页面框架模板是比较优秀的功能。预先定义一个layout，它具有页眉、页脚、提示栏、导航栏和内容显示等区域，如代码清单3-13所示。其中，layout:fragment=

"

prompt"是一个提示栏，它可以让引用的视图替换显示的内容；fragments/nav :: nav是一个导航栏并指定了视图文件，也就是说它不能被引用的视图替换内容；layout:fragment="content"是一个主要内容显示区域，它也能由引用的视图替换显示内容；fragments/footer :: footer是一个页脚定义并且也指定了视图文件，即不被引用的视图替换显示内容。这样设计出来的页面模板框架如图3-1所示。

代码清单3-13　layout模板

&lt;div

class="headerbox"&gt;

    &lt;div class="topbox"&gt;

        &lt;div class="toplogo

f-left"&gt;

            &lt;a href="#"&gt;&lt;img

th:src="@{/images/logo.png}"/&gt;&lt;/a&gt;

        &lt;/div&gt;

        &lt;div class="new-nav"&gt;

            &lt;h3&gt;电影频道&lt;/h3&gt;

    &lt;/div&gt;

&lt;/div&gt;

class="locationline" layout:fragment=" prompt "&gt;

    当前位置：首页 &amp;gt; &lt;em&gt;页面&lt;/em&gt;

&lt;table

class="globalmainbox"

style="position:relative;z-index:1"&gt;

    &lt;tr&gt;

        &lt;td class="columnleftbox"

valign="top"&gt;

            &lt;div

th:replace="fragments/nav :: nav"&gt;&lt;/div&gt;

        &lt;/td&gt;

        &lt;td

class="whitespace"&gt;&lt;/td&gt;

        &lt;td class="rightcolumnbox"

layout:fragment="content"&gt;&lt;/div&gt;

    &lt;/tr&gt;

&lt;/table&gt;

class="footbox" th:replace="fragments/footer ::

footer"&gt;&lt;/div&gt;

图3-1　页面框架模板

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

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

&lt;html

xmlns:th="http://www.thymeleaf.org"

layout:decorator="fragments/layout"&gt;

……

当前位置：首页 &amp;gt; &lt;em &gt;电影管理&lt;/em&gt;

class="statisticbox w-782" 

layout:fragment="content"&gt;

......