什么是 Thymeleaf

  • Thymeleaf 是新一代的 Java 模板引擎,类似于 Velocity、FreeMarker 等传统引擎,其语言和 HTML 很接近,而且扩展性更高;
  • Thymeleaf 的主要目的是将优雅的模板引入开发工作流程中,并将 HTML 在浏览器中正确显示。同时能够作为静态引擎,让开发成员之间更方便协作开发;
  • Spring Boot 官方推荐使用模板,而且 Spring Boot 也为 Thymeleaf 提供了完整的自动化 配置解决方案;
  • Thymeleaf 使用教程请戳 Tutorial: Using Thymeleaf,配合 Spring 使用的教程请戳 Tutorial: Thymeleaf + Spring

整合过程

准备过程

正式开始整合过程之前,这里先给出本文的搭建环境,方便大家进行后续内容的学习。

  • JDK 11(理论上其他版本的 JDK 也是可以的,但是更为推荐 JDK 1.8 及以后的版本)
  • IDEA(这里没有啥要求,但我个人的话是出新的版本我就会更新,虽然臃肿,但是更新了确实好用 😂)
  • SpringBoot 2.x(现在主流应该都是 2.x 版本,1.x 的都是老一点的版本了)

添加 Thymeleaf 依赖

添加 Thymeleaf 依赖有两种方式:

  1. 第一种

在新建项目时添加,在 Templeate Engines 中勾选 Thymeleaf;

SpringBoot 整合 Thymeleaf 实例 - 图1

  1. 第二种

对于忘记在新建项目时未添加 Thymeleaf 依赖的项目,可以直接在项目的 pom.xml 中手动添加依赖即可;

  1. <dependency>
  2. <groupId>org.springframework.boot</groupId>
  3. <artifactId>spring-boot-starter-thymeleaf</artifactId>
  4. </dependency>

编写实体类和 Controller

  1. 新建实体类 User

这里因为使用 Lombok,所以省去了各种 settergetter,同时还省去了各种构造方法和重写 toString() 等方法,大大简化了代码。而我们所要做的,仅仅是在 pom.xml 中添加 Lombok 的依赖,然后在我们的实体类中加入对应的注解即可。

以下是在 pom.xml 中插入 Lombok 依赖的对应代码。

  1. <dependency>
  2. <groupId>org.projectlombok</groupId>
  3. <artifactId>lombok</artifactId>
  4. <optional>true</optional>
  5. </dependency>

然后我们就可以编写我们的实体类,这里主要用到了 @Data@Component@AllArgsConstructorNoArgsConstructor 四个注解,其中各个注解的含义如下:

  • @Component:把类实例化到 Spring 容器,相当于在配置文件中配置;
  • @Data :给类的所有属性提供 getset 方法,此外还有 equals、canEqual、hashCode、toString 方法以及 默认参数为空的构造方法
  • @AllArgsConstructor:为类提供一个 全参构造方法,但此时不再提供默认构造方法;
  • @NoArgsConstructor:因为使用了 AllArgsConstructor 会导致类没有默认空参构造方法,所以此时需要它为类提供一个 无参构造方法
  1. package com.cunyu.pojo;
  2. import lombok.AllArgsConstructor;
  3. import lombok.Data;
  4. import lombok.NoArgsConstructor;
  5. import org.springframework.stereotype.Component;
  6. /**
  7. * @author : cunyu
  8. * @version : 1.0
  9. * @className : User
  10. * @date : 2020/7/29 16:20
  11. * @description : User 实体类
  12. */
  13. @Component
  14. @Data
  15. @AllArgsConstructor
  16. @NoArgsConstructor
  17. public class User {
  18. private int age;
  19. private String name;
  20. private String email;
  21. }
  1. 编写 Controller

此时主要需要注意的是 setViewName()addObject(),前者表示方法对应的前端页面,也就是我们模板中对应文件名的 .html 文件,而后者则主要给属性注入值,然后将属性传递到前端模板。

  1. package com.cunyu.controller;
  2. import com.cunyu.pojo.User;
  3. import org.springframework.stereotype.Controller;
  4. import org.springframework.web.bind.annotation.GetMapping;
  5. import org.springframework.web.bind.annotation.RequestMapping;
  6. import org.springframework.web.servlet.ModelAndView;
  7. /**
  8. * @author : cunyu
  9. * @version : 1.0
  10. * @className : UserController
  11. * @date : 2020/7/29 16:22
  12. * @description : UserController
  13. */
  14. @Controller
  15. public class UserController {
  16. // 访问 ip:port/index
  17. @GetMapping("/index")
  18. public ModelAndView index() {
  19. ModelAndView modelAndView = new ModelAndView();
  20. // 设置跳转的视图,即位于 templates/index.html
  21. modelAndView.setViewName("index");
  22. modelAndView.addObject("title", "Thymeleaf 使用");
  23. modelAndView.addObject("desc", "Spring Boot 整合 Thymeleaf");
  24. User author = new User(25, "村雨遥", "747731461@qq.com");
  25. modelAndView.addObject("author", author);
  26. return modelAndView;
  27. }
  28. }

创建Thymeleaf 模板

第上面的代码中,我们设置了跳转的视图为 index,所以我们需要在 src/main/resources/templates 中创建 index.html

SpringBoot 整合 Thymeleaf 实例 - 图2

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <!-- 即 Controller 中的 title 属性 -->
  7. <title th:text="${title}"></title>
  8. </head>
  9. <body>
  10. <!-- 即 Controller 中的 desc 属性 -->
  11. <h1 th:text="${desc}" th:align="center"></h1>
  12. <!-- 即 Controller 中的 author 信息 -->
  13. <h2 th:align="center">=====作者信息=====</h2>
  14. <p th:text="${author?.name}"></p>
  15. <p th:text="${author?.age}"></p>
  16. <p th:text="${author?.email}"></p>
  17. </body>
  18. </html>

测试

启动项目,然后在浏览器中访问 http://localhost:8080/index,如果出现下图中的信息,说明整合成功。

SpringBoot 整合 Thymeleaf 实例 - 图3

注意事项

为了方便使用,我们在使用 Thymeleaf 模板时,可以添加一些自己的配置。而添加的位置则是项目的配置文件 application.yml,项目默认配置文件应该是 application.properties,但 SpringBoot 更加推荐使用 yml 来配置,所以我们这里需要手动将其改为 yml 的格式。

  1. spring:
  2. thymeleaf:
  3. cache: false
  4. prefix: classpath:/templates/
  5. suffix: .html
  6. mode: HTML
  7. encoding: UTF-8
  8. servlet:
  9. content-type: text/html

总结

好了,以上就是我们今天的所有内容了。今天主要介绍了 Themeleaf 的相关简介,然后对利用 SpringBoot 整合 Thymeleaf 的过程进行了描述,最后则是使用 Thymeleaf 中常用的一些相关配置的注意事项。