6. 模板引擎 Thymeleaf
Thyme leaf 英译为 百里香的叶子。
模板引擎
以前开发中使用的jsp就是一个模板引擎，但是springboot 以jar的方式，并且使用嵌入式的tomcat，所以默认不支持jsp。
Springboot推荐使用模板引擎，除了jsp，还有用的比较多的freemarker，包括springboot推荐的Thymeleaf。它们的思想都是一样的，如下：
模板引擎的作用：
写一个页面模板，加上后台封装好的数据，交给模板引擎。它按照我们的数据进行表达式解析，填充到指定位置，最终生成想要的内容再写出去。
引入Thymeleaf
怎么引入呢，对于springboot来说，只是一个start的事情。我们在项目中引入一下。
提供三个网址：
Thymeleaf官网:https://www.thymeleaf.org/
Thymeleaf 在Github 的主页:https://github.com/thymeleaf/thymeleaf
Spring官方文档:https://docs.spring.io/spring-boot/docs/2.3.2.RELEASE/reference/htmlsingle/#using-boot-starter
找到对应的pom依赖：
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf-spring5 -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf.extras/thymeleaf-extras-java8time -->
<dependency>
<groupId>org.thymeleaf.extras</groupId>
<artifactId>thymeleaf-extras-java8time</artifactId>
<version>3.0.4.RELEASE</version>
</dependency>
Maven会自动下载jar包，我们可以看到：
Thymeleaf分析
我们首先按照springboot的自动配置原理看一下Thymeleaf的自动配置规则，找到自动配置类：ThymeleafProperties
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
private boolean checkTemplate = true;
private boolean checkTemplateLocation = true;
private String prefix = DEFAULT_PREFIX;
private String suffix = DEFAULT_SUFFIX;
private String mode = "HTML";
private Charset encoding = DEFAULT_ENCODING;
}
我们可以看到默认的前后缀！
因此我们只需要把html页面放到类路径下的templates下，thymeleaf就可以帮我们自动渲染了。
使用Thymeleaf什么都不需要配置，只需要将他放在指定的文件夹下即可！
测试
测试步骤：
-
编写一个TestController
@Controller public class TestController { @RequestMapping("/test") public String test(){ return "test"; } } -
编写一个测试页面 test.html放在templates目录下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>test</h1> </body> </html> -
启动项目请求测试
小结：
-
如果使用thymeleaf，只需要导入对应的依赖即可！
-
html放在templates目录下。
public static final String DEFAULT_PREFIX = "classpath:/templates/"; public static final String DEFAULT_SUFFIX = ".html";
Thymeleaf语法学习
要学习语法，参考官网文档为准，我们找到对应的版本看看：
【做一个简单的练习：我们需要查出一些数据，在页面中展示】步骤如下：
-
修改测试请求，增加数据传输
model.addAttribute("msg","hello thymeleaf"); -
我们要使用thymeleaf，需要在html文件中导入命名空间的约束，方便提示。我们可以去官方文档#3看一下命名空间：
<html xmlns:th="http://www.thymeleaf.org"> -
编写前端页面
<div th:text="${msg}"> </div> -
启动测试
Thymeleaf的使用语法：
-
我们可以使用任意的th:attr来替换html中原生属性的值
-
我们可以写哪些表达式？
练习测试
-
编写一个controller，放一些数据
@Controller public class TestController { @RequestMapping("/test") public String test(Model model) { model.addAttribute("msg","<h1>hello thymeleaf</h1>"); model.addAttribute("users", Arrays.asList("111","222","333")); return "test"; } } -
测试页面取出数据
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>test</h1> <!--所有的html元素都可以被thymeleaf替换接管，th:+元素名，如th:class="" --> <div th:text="${msg}"></div> <div th:utext="${msg}"></div> <hr> <!--建议第一种写法--> <h3 th:each="user : ${users}" th:text="${user}"></h3> <hr> <h3 th:each="user : ${users}" >[[${user}]]</h3> </body> </html> -
启动项目测试！
记住一句话：
需要使用什么，根据官方文档来查询，才是最重要的，要熟练使用官方文档！