开发传统Java WEB项目时，我们最原始基本都是从JSP页面模板语言开始的，但是在SpringBoot中已经不推荐使用了。SpringBoot支持如下页面模板语言

Thymeleaf
FreeMarker
Velocity
Groovy
JSP

其中Thymeleaf是SpringBoot官方所推荐使用的。

Thymeleaf是一款用于渲染XML/XHTML/HTML5内容的模板引擎，它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用，但是总是看到说其效率有点低。

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。

接下来结合Spring Boot框架来说明一下Thymeleaf的实际应用

首先pom文件引入Thymeleaf依赖

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

Spring Boot默认存放模板页面的路径在src/main/resources/templates，默认路径是可以自定义的，不过一般不推荐这样做。Thymeleaf默认的页面文件后缀是.html。

html页面引入提示

在html页面中引入thymeleaf命名空间，此时在html模板文件中动态的属性使用th:命名空间修饰。

<html lang="en" xmlns:th="http://www.thymeleaf.org">

html页面获取后台传入的变量

th:value="${变量名}" 或者 th:text="${变量名}" (根据html标签而定)

${}

变量表达式（美元表达式，哈哈），用于访问容器上下文环境中的变量，功能同jstl中${}。

<div th:text="'学习，'+${book.name}+'!!'">
    同EL表达式有些相似的效果，如果有数据，被替换
</div>

#{}

消息表达式（井号表达式，资源表达式）。通常与th:text属性一起使用，指明声明了th:text的标签的文本是#{}中的key所对应的value，而标签内的文本将不会显示。

如果我们要显示的信息是存在配置文件中的，同样可以在页面中显示，例如配置文件中定义了内容subsidiary.corporation=某某{0}分公司。可以在页面中将其显示

<h2 th:text="#{subsidiary.corporation('北京')}"/>

另外，在th:text中还能做一些基础的数学运算

<p th:text="'数学计算：5+2=' + (5 + 2)"/>

显示带有样式的普通文本

th:utext和th:text的区别是：th:text会对<和>进行转义，而th:utext不会转义，所以th:utext可用于接收后台传入的css样式。

`显示bean对象`

<div>
    <p th:text="'用户姓名：' + ${member.name}"/>
    <p th:text="'出生日期：' + ${#dates.format(member.birthday,'yyyy-MM-dd')}"/>
</div>

<hr/>
<div th:object="${member}">
    <p th:text="'用户姓名：' + *{name}"/>
    <p th:text="'出生日期：' + *{#dates.format(birthday,'yyyy-MM-dd')}"/>
</div>

上面给出了两种展现方式，一种是通过${属性}，另外一种是通过*{属性}。
${属性}访问完整信息，而*{属性}访问指定对象中的属性内容，如果访问的只是普通的内容两者没有区别；

*{} 选择表达式（星号表达式）。选择表达式与变量表达式有一个重要的区别：选择表达式计算的是选定的对象，而不是整个环境变量映射。也就是：只要是没有选择的对象，选择表达式与变量表达式的语法是完全一样的。那什么是选择的对象呢？是一个：th:object对象属性绑定的对象。

@{}

超链接url表达式。引用静态资源文件(CSS使用th:href，js使用使用th:src)

例如：<script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}"

页面之间的跳转也能通过@{}来实现

<a th:href="@{/show}">访问controller方法</a>
<a th:href="@{/static_index.html}">访问静态页面</a>

数据遍历

list类型数据遍历

<body>
    <table>
        <tr><td>No.</td><td>UID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
        <tr th:each="user,memberStat:${allUsers}">
            <td th:text="${memberStat.index + 1}"/>
            <td th:text="${user.uid}"/>
            <td th:text="${user.name}"/>
            <td th:text="${user.age}"/>
            <td th:text="${memberStat.even}"/>
            <td th:text="${memberStat.odd}"/>
        </tr>
    </table>
</body>

map类型数据遍历

<body>
    <table>
        <tr><td>No.</td><td>KEY</td><td>UID</td><td>姓名</td><td>年龄</td><td>偶数</td><td>奇数</td></tr>
        <tr th:each="memberEntry,memberStat:${allUsers}">
            <td th:text="${memberStat.index + 1}"/>
            <td th:text="${memberEntry.key}"/>
            <td th:text="${memberEntry.value.uid}"/>
            <td th:text="${memberEntry.value.name}"/>
            <td th:text="${memberEntry.value.age}"/>
            <td th:text="${memberStat.even}"/>
            <td th:text="${memberStat.odd}"/>
        </tr>
    </table>
</body>

html页面引入

thymeleaf中提供了两种方式进行页面引入

th:replace
th:include

新建需要被引入的页面文件

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<footer th:fragment="footer">
    <p> test 使用<span th:text="${name}"/>test</p>
</footer>

可以看到页面当中还存在一个变量name，这个变量的值可以在引入页面中通过th:with="name=张三"传过来。

引入页面中只需要添加如下代码即可

<div th:include="@{/commons/test} :: footer" th:with="name=张三"/>

csdn_当当当

发布了22 篇原创文章 · 获赞 10 · 访问量 6125

私信关注

Thymeleaf 基本用法