Spring Boot 最佳实践（四）模板引擎Thymeleaf集成

一、Thymeleaf介绍

Thymeleaf是一种Java XML / XHTML / HTML5模板引擎，可以在Web和非Web环境中使用。它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5，但即使在脱机环境中，它也可以处理任何XML文件。它提供了完整的Spring Framework集成。

关于Spring推荐Thymeleaf的这种说法，我在Spring官方文档并没有看到具体的说明，只是在和JSP比较的时候，说了JSP和Thymeleaf对比JSP的一些不足，而Thymeleaf只是作为其他模板引擎的一种代表。

作为一款优秀的模板引擎，除了易用性、活跃的社区、健康快速的发展外，还有非常重要的一点就是性能了，那Thymeleaf 3 和 FreeMaker 的性能对比是怎么样的，后续文章会陆续更新。

二、Thymeleaf基础使用

Thymeleaf的使用是由两部分组成的：标签 + 表达式，标签是Thymeleaf的语法结构，而表达式就是语法里的内容实现。

通过标签 + 表达式，让数据和模板结合，最终转换成html代码，返回给用户。

Thymeleaf基础使用分为三部分：

  1. 标签使用
  2. 表达式使用
  3. 设置IDEA 对 Thymeleaf 代码补全

1.标签使用

1.1 th:text 基础信息输出

HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

Java代码：

@RequestMapping("/")
public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/index");
    modelAndView.addObject("name", "老王");
    return modelAndView;
}

最终效果： 老王

1.2 th:utext html内容输出

使用"th:text"是对内容的原样输出，使用“th:utext”可以进行html标签输出。

Java代码：

@RequestMapping("/eat")
public ModelAndView eat() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "<span style='color:red'>老王是吃货</span>");
    return modelAndView;
}

HTML代码：

<h4 th:text="'th:text '+${data}"></h4>
<h4 th:utext="'th:utext '+${data}"></h4>

展示效果：

[图片上传失败...(image-bea58c-1536148285644)]

1.3 th:if, th:unless 条件判断

<span th:if="${age > 18}">
    成年
</span>
<span th:unless="${age > 18}">
    未成年
</span>

th:if为满足条件的业务处理，th:unless正好相反，是除去的意思。

1.4 th:switch, th:case 多条件判断

<div th:switch="${age}">
    <span th:case="18">18岁</span>
    <span th:case="19">19岁</span>
    <spa th:case="*">其他</spa>
</div>

注意： 默认选项使用th:case="*" 指定。

1.5 th:each 循环

HTML代码：

<div th:each="name,item:${names}">
    <span th:text="${item.count}"></span>
    <span th:text="${name}"></span>
</div>

Java代码：

@RequestMapping("/")
public ModelAndView index() {
    ArrayList<String> names = new ArrayList<>();
    names.add("java");
    names.add("golang");
    names.add("nodejs");
    ModelAndView modelAndView = new ModelAndView("/index"); 
    modelAndView.addObject("names",names);
    return modelAndView;
}

访问效果如下：

image

其中item为每行的详细值，key值如下：

  • index 下标，从0开始
  • count 第x个，从1开始
  • size 这个集合的大小
  • current 当前行的值

1.6 th:fragment、th:insert、th:replace、th:include 代码片段复用

  • th:fragment标签是声明代码片段，用于解决代码复用的问题，好比Java程序写的公用代码一样，每个需要的地方都可以直接调用；
  • th:insert 引用fragment的代码，保留自己的主标签；
  • th:replace 引用fragment的代码，不保留自己的主标签；
  • th:include 使用类似th:replace，Thymeleaf3.0之后不推荐使用；

footer.html页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="copyright">
    © 著作权归 老王 所有
</div>

<div th:fragment="about">
    关于
</div>

<div th:fragment="links">
    CCTV
</div>

</body>
</html>

声明了两个代码片段，copyright和about。

cat.html页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<div th:replace="footer :: copyright"></div>

<div th:insert="footer :: about"></div>

<div th:include="footer :: links"></div>
</body>
</html>

其中第一个div引用了footer.html 的 copyright 代码片段，第二个div引用了 footer.html 的 about 代码片段。

双冒号的理解： 其中使用“::”双冒号来完成对页面片段的引用，有点像php里面的语法，使用双冒号来表示对类的静态属性和方法进行直接引用。

执行效果如下图：

[图片上传失败...(image-17bbb8-1536148285644)]

总结： 可以很清晰的看出th:insert、th:replace、th:include之间的区别，在于是否保留自己的主标签，th:include 在3.0之后已经不推荐使用了，可以使用th:replace标签替代。

提高班——fragment代码传参

使用fragment我们是可以在html代码中传参的，比如我们定义了一个top.html其中有一个“欢迎XXX”的提示，而这个人名XXX就是需要动态传递的，这样我们可以最大程度的完成代码的复用，这个时候就是一个很好的使用场景，我们需要这样做。

页面main.html代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:replace="footer :: webcome('老王')"></div>

</body>
</html>

页面top.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div th:fragment="webcome(about)">
    <span th:text="'欢迎：'+${about}"></span>
</div>

</body>
</html>

最终的效果：

image

1.7 th:with 定义局部变量

页面代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<div th:with="sum=4-2">
    <span th:text="${sum}"></span>
</div>
</body>
</html>

页面输出结果：2

1.8 th:remove 删除标签

th:remove用于html代码的删除，th:remove值有五个：

  • all 删除本段所有代码
  • body 删除主标签内的所有元素
  • tag 删除主标签，保留主标签所有的元素
  • all-but-first 保留主标签和第一个元素，其他全部删除
  • none 不删除任何标签

示例index.html代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>

<div id="all" th:remove="all">
    <span>all</span>
    <span>1</span>
</div>

<div id="body" th:remove="body">
    <span>body</span>
    <span>2</span>
</div>

<div id="tag" th:remove="tag">
    <span>tag</span>
    <span>3</span>
</div>


<div id="all-but-first" th:remove="all-but-first">
    <span>all-but-first</span>
    <span>4</span>
</div>

<div id="none" th:remove="none">
    <span>none</span>
    <span>5</span>
</div>

</body>
</html>

最终展示效果如下：

image

1.9 其他标签

  • th:style 定义样式 <div th:style="'color:'+${skinColor}">
  • th:onclick 点击事件 <input type="button" value=" Click " th:onclick="'onsub()'">
  • th:href 赋值属性href <a th:href="${myhref}"></a>
  • th:value 赋值属性value <input th:value="${user.name}" />
  • th:src 赋值src <img th:src="${img}" />
  • th:action 赋值属性action <form th:action="@{/suburl}">
  • th:id 赋值属性id <form id="${fromid}">
  • th:attr 定义多个属性 <img th:attr="src=@{/img/stone.jpg},alt=${alt}" />
  • th:object 定义一个对象 <div th:object="${user}">
  • ...

2.表达式使用

2.1 表达式概要

2.1.1 简单表达式

变量表达式：${...}
选择变量表达式：*{...}
消息表达式：#{...}
链接表达式：@{...}
片段表达：~{...}

2.1.2 数据的类型

文字：'one text', 'Another one!',…
数字文字：0, 34, 3.0, 12.3,…
布尔文字：true, false
NULL文字：null
文字标记：one, sometext, main,…

2.1.3 文本操作

字符串拼接：+
字面替换：|The name is ${name}|

2.1.4 算术运算

二进制运算符：+, -, *, /, %
减号(一元运算符)：-

2.1.5 布尔运算

二进制运算符：and, or
布尔否定(一元运算符)：!, false

2.1.6 条件运算符

比较值：>, <, >=, <=
相等判断： ==, !=

2.1.7 条件判断

如果-然后：(if) ? (then)
如果-然后-否则：(if) ? (then) : (else)
违约：(value) ?: (defaultvalue)

所有以上这些表达式都可以组合和嵌套，例如：

'User is of type ' + ({user.isAdmin()} ? 'Administrator' : ({user.type} ?: 'Unknown'))

2.2 表达式使用实例

2.2.1 变量表达式 ${...}

变量表达式的使用，我们前面的代码已经见到了，$是我们平常开发中最常用的表达式，用于把后台Java类的动态数据，映射到页面，例如：

Java代码：

public ModelAndView index() {
    ModelAndView modelAndView = new ModelAndView("/cat");
    modelAndView.addObject("data", "我是老王");
    return modelAndView;
}

HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${data}"></span>
</body>
</html>

最终效果：

[图片上传失败...(image-eb86e0-1536148285644)]

2.2.2 选择表达式 *{...}

选择表达式相当于选择了一个对象，在使用的时候不在需要这个对象的前缀，直接使用属性的key进行内容展示，代码如下：

<div th:object="${goods}">
    <span th:text="${goods.name}"></span>
    <span th:text="*{price}"></span>
    <span th:text="${#dates.format(goods.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
</div>

最终效果：

iMac 7999.0 2018-08-10 14:03:51

总结： *{price} = ${goods.price}只是省去了“goods.”前缀，效果都是一样的。

2.2.3 链接表达式 @{...}

用于转换url，代码如下：

<a th:href="@{/footer(id=666,name=laowang)}">链接</a>

最终呈现的效果：

<a href="/footer?id=666&name=laowang">链接</a>

链接表达式，可以传递参数，用逗号分隔。

服务器根相对路径：@{~/path/to/something}

2.2.4 文本操作

文本操作分为两个：文本拼加、文本替换

文本拼加：

<span th:text="'我叫'+${name}"></span>

文本替换：

文本替换的语法：|内容${tag}|

<span th:text="|我叫${name}，是一名开发工程师。|"></span>
2.2.5 三元表达式

<tr th:class="${row.even}? 'even' : 'odd'">

2.2.6 双括号作用
<p th:text="${val}">...</p>
<p th:text="${{val}}">...</p>

结果：

<p>1234567890</p>
<p>1,234,567,890</p>
2.2.7 嵌入文本标签

虽然标准的标签几乎可以满足所有的业务场景，但某些情况我们更喜欢直接写入HTML文本，例如：

<p>Hello, [[${name}]]</p>

嵌入文本有两种写法“[[...]]”和“[(...)]”，分别的作用就像th:text 和 th:utext 一样，例如：

<p>
    [[${name}]]
</p>
<p>
    [(${name})]
</p>

看到的效果是这样的：

image

2.3 表达式对象概述

表达式里面的对象可以帮助我们处理要展示的内容，比如表达式的工具类dates可以格式化时间，这些内置类的熟练使用，可以让我们使用Thymeleaf的效率提高很多。

2.3.1 表达式基本对象
  • #ctx: 操作当前上下文.
  • #vars: 操作上下文变量.
  • #request: (仅适用于Web项目) HttpServletRequest对象.
  • #response: (仅适用于Web项目) HttpServletResponse 对象.
  • #session: (仅适用于Web项目) HttpSession 对象.
  • #servletContext: (仅适用于Web项目) ServletContext 对象.
2.3.2 表达式实用工具类
  • #execInfo: 操作模板的工具类，包含了一些模板信息，比如：${#execInfo.templateName} .
  • #uris: url处理的工具
  • #conversions: methods for executing the configured conversion service (if any).
  • #dates: 方法来源于 java.util.Date 对象，用于处理时间，比如：格式化.
  • #calendars: 类似于 #dates, 但是来自于 java.util.Calendar 对象.
  • #numbers: 用于格式化数字.
  • #strings: methods for String objects: contains, startsWith, prepending/appending, etc.
  • #objects: 普通的object对象方法.
  • #bools: 判断bool类型的工具.
  • #arrays: 数组操作工具.
  • #lists: 列表操作数据.
  • #sets: Set操作工具.
  • #maps: Map操作工具.
  • #aggregates: 操作数组或集合的工具.

每个类中的具体方法，点击查看：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-b-expression-utility-objects

3.IDEA设置Thymeleaf自动补全

先上效果图：

[图片上传失败...(image-8624d0-1536148285644)]

IDEA默认是开启了Thymeleaf 插件支持的，如果不放心需要验证，请访问：https://www.jetbrains.com/help/idea/2018.2/thymeleaf.html

但仅仅是配置上面的效果，依然是无法正常使用的，原因是你要在html中声明 Thymeleaf 命名空间 xmlns:th="http://www.thymeleaf.org" ，完整代码如下：

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2 th:text="${hi}"></h2>
</body>
</html>

其中关键的代码是：

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

这样当你在代码输入“th:”的时候就会看到 Thymeleaf 的所有标签了。

三、Spring Boot 集成 Thymeleaf

3.1 开发环境

  • Spring Boot 2.0.4
  • Thymeleaf 3.0.9
  • Jdk 8
  • Windows 10
  • IDEA 2018.2

在正式集成Thymeleaf引擎之前，先来看下目录结构如图：

3.2 Spring MVC目录结构

image

除去包名，我们来解释一下这些目录代表的含义：

  • common 通用公共类
  • controller 控制器类
  • dao 数据交互类
  • service 业务逻辑处理类
  • Application.java 启动文件
  • resources 静态文件存储文件夹
  • resources/templates 所有的Thymeleaf目录存放目录
  • resources/application.properties 全局配置类
  • pom.xml Maven 配置文件

3.3 Spring Boot 集成 Thymeleaf 分为四步：

  1. pom.xml 添加 Thymeleaf 模板引擎
  2. application.properties 配置 Thymeleaf 信息
  3. 创建controller类，编写代码
  4. 创建模板，编写html代码

接下来我们具体分别来看具体的步骤。

3.3.1 pom.xml 添加 Thymeleaf 模板引擎

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

3.3.2 application.properties 配置 Thymeleaf 信息

# 启用缓存:建议生产开启
spring.thymeleaf.cache=false
# 建议模版是否存在
spring.thymeleaf.check-template-location=true
# Content-Type 值
spring.thymeleaf.servlet.content-type=text/html
# 是否启用
spring.thymeleaf.enabled=true
# 模版编码
spring.thymeleaf.encoding=utf-8
# 应该从解析中排除的视图名称列表（用逗号分隔）
spring.thymeleaf.excluded-view-names=
# 模版模式
spring.thymeleaf.mode=HTML5
# 模版存放路径
spring.thymeleaf.prefix=classpath:/templates/
# 模版后缀
spring.thymeleaf.suffix=.html
Thymeleaf常用配置说明
配置项 类型 默认值 建议值 说明
spring.thymeleaf.enabled bool true 默认 是否启用
spring.thymeleaf.mode String HTML 默认 模板类型，可以设置为HTML5
spring.thymeleaf.cache bool true 默认 是否启用缓存，生成环境建议设置为true
spring.thymeleaf.prefix String classpath:/templates/ 默认 模版存放路径
spring.thymeleaf.suffix String .html 默认 模版后缀
spring.thymeleaf.servlet.content-type String text/html 默认 Content-Type 值
spring.thymeleaf.encoding String - utf-8 模版编码

3.3.3 创建controller类，编写代码

我们在controller文件夹创建index.java，代码如下：

package com.hello.springboot.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
@Controller
@RequestMapping("/")
public class Index {

    @RequestMapping("/")
    public ModelAndView index() {
        ModelAndView modelAndView = new ModelAndView("/index");
        modelAndView.addObject("name", "王磊的博客");
        return modelAndView;
    }
}

关键代码解读：

  1. @ResponseBody注解：如果使用该注解，返回结果会直接输出，而不是使用模板引擎渲染
  2. 使用ModelAndView对象，指定视图名&添加视图对象

3.3.4 创建模板，编写html代码

我们在resources/templates下创建index.html，代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>王磊的博客</title>
</head>
<body>
<span th:text="${name}"></span>
</body>
</html>

启动调试，在浏览器输入：http://localhost:8080/

效果如下：

image

相关代码GitHub：https://github.com/vipstone/springboot-example.git

四、参考资料

thymeleaf官方文档 Thymeleaf ：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

thymeleaf官方文档 Spring + Thymeleaf ：https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容