Spring Boot 集成 Thymeleaf 模板引擎

关注

发布于: 2021 年 01 月 15 日

1. Thymeleaf 介绍

Thymeleaf 是适用于 Web 和独立环境的现代服务器端 Java 模板引擎。
Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板 - 可以在浏览器中正确显示的 HTML，也可以用作静态原型，从而在开发团队中实现更强大的协作。

以上翻译自 Thymeleaf 官方网站。传统的 JSP+JSTL 组合是已经过去了，Thymeleaf 是现代服务端的模板引擎，与传统的 JSP 不同，Thymeleaf 可以使用浏览器直接打开，因为可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来一定的便利。

什么意思呢？就是说在本地环境或者有网络的环境下，Thymeleaf 均可运行。由于 thymeleaf 支持 html 原型，也支持在 html 标签里增加额外的属性来达到 “模板+数据” 的展示方式，所以美工可以直接在浏览器中查看页面效果，当服务启动后，也可以让后台开发人员查看带数据的动态页面效果。比如：

<div class="ui right aligned basic segment">      <div class="ui orange basic label" th:text="${blog.flag}">静态原创信息</div></div><h2 class="ui center aligned header" th:text="${blog.title}">这是静态标题</h2>

复制代码

类似与上面这样，在静态页面时，会展示静态信息，当服务启动后，动态获取数据库中的数据后，就可以展示动态数据，th:text 标签是用来动态替换文本的，这会在下文说明。该例子说明浏览器解释 html 时会忽略 html 中未定义的标签属性（比如 th:text），所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示数据。

2. 依赖导入

在 Spring Boot 中使用 thymeleaf 模板需要引入依赖，可以在创建项目工程时勾选 Thymeleaf，也可以创建之后再手动导入，如下：

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

复制代码

另外，在 html 页面上如果要使用 thymeleaf 模板，需要在页面标签中引入：

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

复制代码

3. Thymeleaf 相关配置

因为 Thymeleaf 中已经有默认的配置了，我们不需要再对其做过多的配置，有一个需要注意一下，Thymeleaf 默认是开启页面缓存的，所以在开发的时候，需要关闭这个页面缓存，配置如下。

spring:  thymeleaf:    cache: false #关闭缓存

复制代码

否则会有缓存，导致页面没法及时看到更新后的效果。比如你修改了一个文件，已经 update 到 tomcat 了，但刷新页面还是之前的页面，就是因为缓存引起的。

4. Thymeleaf 的使用

4.1 访问静态页面

这个和 Thymeleaf 没啥关系，应该说是通用的，我把它一并写到这里的原因是一般我们做网站的时候，都会做一个 404 页面和 500 页面，为了出错时给用户一个友好的展示，而不至于一堆异常信息抛出来。Spring Boot 中会自动识别模板目录（templates/）下的 404.html 和 500.html 文件。我们在 templates/ 目录下新建一个 error 文件夹，专门放置错误的 html 页面，然后分别打印些信息。以 404.html 为例：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    这是404页面</body></html>

复制代码

我们再写一个 controller 来测试一下 404 和 500 页面：

@Controller@RequestMapping("/thymeleaf")public class ThymeleafController {
    @RequestMapping("/test404")    public String test404() {        return "index";    }
    @RequestMapping("/test500")    public String test500() {        int i = 1 / 0;        return "index";    }}

复制代码

当我们在浏览器中输入 localhost:8080/thymeleaf/test400 时，故意输入错误，找不到对应的方法，就会跳转到 404.html 显示。
当我们在浏览器中输入 localhost:8088/thymeleaf/test505 时，会抛出异常，然后会自动跳转到 500.html 显示。

【注】这里有个问题需要注意一下，前面的课程中我们说了微服务中会走向前后端分离，我们在 Controller 层上都是使用的 @RestController 注解，自动会把返回的数据转成 json 格式。但是在使用模板引擎时，Controller 层就不能用 @RestController 注解了，因为在使用 thymeleaf 模板时，返回的是视图文件名，比如上面的 Controller 中是返回到 index.html 页面，如果使用 @RestController 的话，会把 index 当作 String 解析了，直接返回到页面了，而不是去找 index.html 页面，大家可以试一下。所以在使用模板时要用 @Controller 注解。

4.2 Thymeleaf 中处理对象

我们来看一下 thymeleaf 模板中如何处理对象信息，假如我们在做个人博客的时候，需要给前端传博主相关信息来展示，那么我们会封装成一个博主对象，比如：

public class Blogger {    private Long id;    private String name;    private String pass;	// 省去set和get}

复制代码

然后在 controller 层中初始化一下：

@GetMapping("/getBlogger")public String getBlogger(Model model) {	Blogger blogger = new Blogger(1L, "倪升武", "123456");	model.addAttribute("blogger", blogger);	return "blogger";}

复制代码

我们先初始化一个 Blogger 对象，然后将该对象放到 Model 中，然后返回到 blogger.html 页面去渲染。接下来我们再写一个 blogger.html 来渲染 blogger 信息：

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><html lang="en"><head>    <meta charset="UTF-8">    <title>博主信息</title></head><body><form action="" th:object="${blogger}" >    用户编号：<input name="id" th:value="${blogger.id}"/><br>    用户姓名：<input type="text" name="username" th:value="${blogger.getName()}" /><br>    登陆密码：<input type="text" name="password" th:value="*{pass}" /></form></body></html>

复制代码

可以看出，在 thymeleaf 模板中，使用 th:object="${}" 来获取对象信息，然后在表单里面可以有三种方式来获取对象属性。如下：

使用 th:value="*{属性名}"
使用 th:value="${对象.属性名}"，对象指的是上面使用 th:object 获取的对象
使用 th:value="${对象.get方法}"，对象指的是上面使用 th:object 获取的对象

可以看出，在 Thymeleaf 中可以像写 java 一样写代码，很方便。我们在浏览器中输入 localhost:8080/thymeleaf/getBlogger 来测试一下数据：

4.3 Thymeleaf 中处理 List

处理 List 的话，和处理上面介绍的对象差不多，但是需要在 thymeleaf 中进行遍历。我们先在 Controller 中模拟一个 List。

@GetMapping("/getList")public String getList(Model model) {    Blogger blogger1 = new Blogger(1L, "倪升武", "123456");    Blogger blogger2 = new Blogger(2L, "达人课", "123456");    List<Blogger> list = new ArrayList<>();    list.add(blogger1);    list.add(blogger2);    model.addAttribute("list", list);    return "list";}

复制代码

接下来我们写一个 list.html 来获取该 list 信息，然后在 list.html 中遍历这个 list。如下：

<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><html lang="en"><head>    <meta charset="UTF-8">    <title>博主信息</title></head><body><form action="" th:each="blogger : ${list}" >    用户编号：<input name="id" th:value="${blogger.id}"/><br>    用户姓名：<input type="text" name="password" th:value="${blogger.name}"/><br>    登录密码：<input type="text" name="username" th:value="${blogger.getPass()}"/></form></body></html>

复制代码

可以看出，其实和处理单个对象信息差不多，Thymeleaf 使用 th:each 进行遍历，${} 取 model 中传过来的参数，然后自定义 list 中取出来的每个对象，这里定义为 blogger。表单里面可以直接使用 ${对象.属性名} 来获取 list 中对象的属性值，也可以使用 ${对象.get方法} 来获取，这点和上面处理对象信息是一样的，但是不能使用 *{属性名} 来获取对象中的属性，thymeleaf 模板获取不到。

4.4 其他常用 thymeleaf 操作

我们来总结一下 thymeleaf 中的一些常用的标签操作，如下：

| 标签 | 功能 | 例子 |

| ------------ | --------------------- | ------------------------------------------------------------ |

| th:value | 给属性赋值 | <input th:value="${blog.name}" /> |

| th:style | 设置样式 | th:style="'display:'+@{(${sitrue}?'none':'inline-block')} + ''" |

| th:onclick | 点击事件 | th:onclick="'getInfo()'" |

| th:if | 条件判断 | <a th:if="${userId == collect.userId}" > |

| th:href | 超链接 | <a th:href="@{/blogger/login}">Login</a> /> |

| th:unless | 条件判断和th:if相反 | <a th:href="@{/blogger/login}" th:unless=${session.user != null}>Login</a> |

| th:switch | 配合th:case | <div th:switch="${user.role}"> |

| th:case | 配合th:switch | <p th:case="'admin'">administator</p> |

| th:src | 地址引入 | <img alt="csdn logo" th:src="@{/img/logo.png}" /> |

| th:action | 表单提交的地址 | <form th:action="@{/blogger/update}"> |

Thymeleaf 还有很多其他用法，这里就不总结了，具体的可以参考 Thymeleaf 的官方文档（v3.0）。主要要学会如何在 Spring Boot 中去使用 thymeleaf，遇到对应的标签或者方法，查阅官方文档即可。

5. 总结

Thymeleaf 在 Spring Boot 中使用非常广泛，本节课主要分析了 thymeleaf 的优点，以及如何在 Spring Boot 中集成并使用 thymeleaf 模板，包括依赖、配置，相关数据的获取、以及一些注意事项等等。最后列举了一些 thymeleaf 中常用的标签，在实际项目中多使用，多查阅就能熟练掌握，thymeleaf 中的一些标签或者方法不用死记硬背，用到什么去查阅什么，关键是要会在 Spring Boot 中集成，用的多了就熟能生巧。

课程源代码下载地址：戳我下载

发布于: 2021 年 01 月 15 日阅读数: 61

原文链接:【http://xie.infoq.cn/article/c5fdad5cf1959e327d2c1ac48】。文章转载请联系作者。

武哥聊编程

关注

人之所以能，是相信能！ 2017.12.22 加入

我的微信公众号：武哥聊编程

发布

暂无评论

创作场景

Spring Boot 集成 Thymeleaf 模板引擎

1. Thymeleaf 介绍

2. 依赖导入

3. Thymeleaf 相关配置

4. Thymeleaf 的使用

4.1 访问静态页面

4.2 Thymeleaf 中处理对象

4.3 Thymeleaf 中处理 List

4.4 其他常用 thymeleaf 操作

5. 总结

武哥聊编程

评论