第07课:Spring

第07课:Spring Boot 集成 Thymeleaf 模板引擎

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 标签会动态地替换掉静态内容,使页面动态显示数据。

我的个人博客站点也是用 Spring Boot + Thymeleaf 模板搭建的。

依赖导入

在 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">

Thymeleaf 相关配置

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

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

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

Thymeleaf 的使用

访问静态页面

这个和 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 显示。

每个站长在开发自己的网站时,都需要开发 404 和 500 页面,有些站长会在 404 页面导入一些公益的信息,比如丢失的孩子信息,其实也挺好的,都是在做好事,我很支持这么做,我也看到很多类似的 404 页面,非常棒。

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

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 来测试一下数据:

thymeleaf中处理对象

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 模板获取不到。

其他常用 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,遇到对应的标签或者方法,查阅官方文档即可。

总结

Thymeleaf 在 Spring Boot 中使用非常广泛,本节课主要分析了 Thymeleaf 的优点,以及如何在 Spring Boot 中集成并使用 Thymeleaf 模板,包括依赖、配置,相关数据的获取、以及一些注意事项等等。最后列举了一些 Thymeleaf 中常用的标签。

在实际项目中多使用,多查阅就能熟练掌握,Thymeleaf 中的一些标签或者方法不用死记硬背,用到什么去查阅什么,关键是要会在 Spring Boot 中集成,用的多了就熟能生巧了。

课程源代码下载地址:

戳我下载

上一篇
下一篇
目录