SpringBoot整合Thymeleaf模板引擎

时间 2020-11-01

标签 javascript html java git web spring 后端浏览器缓存 springboot 栏目 Spring 繁體版

原文原文链接

零、本片要点

介绍Thymeleaf的概念，理解Thymeleaf的便利且强大。
介绍如何快速整合SpringBoot和Thymeleaf。
介绍自动配置原理。

1、Thymeleaf简介

Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎，可以处理HTML，XML，JavaScript，CSS甚至纯文本。javascript

Thymeleaf的主要目标是提供一种优雅且高度可维护的模板建立方法。拿Html为例，它支持html原型，既可让美工在浏览器查看页面的静态效果，也可让开发者填充后端数据。html

2、快速启动

须要引入thymeleaf须要的依赖，以及必要的web依赖。

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

SpringBoot针对Thymeleaf提供了一套优秀的自动配置方案，这一套配置类的属性在org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties，部分源码以下：

// 将application.properties前缀为【spring.thymeleaf】的配置和属性绑定
@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;
	private boolean cache = true;
    //...

不难发现，若是开发者不配置前缀和后缀，视图解析的默认位置会在resources/templates/目录下，且文件后缀为.html。SpringBoot的强大之处就是提供了咱们许多配置上的便利，好比，咱们能够很容易地关闭Thymeleaf的缓存，在application.properties：java

spring.thymeleaf.cache=false

SpringBoot为Thymeleaf提供的自动化配置类是：git

@Configuration(proxyBeanMethods = false)
@EnableConfigurationProperties(ThymeleafProperties.class)
@ConditionalOnClass({ TemplateMode.class, SpringTemplateEngine.class })
@AutoConfigureAfter({ WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class })
public class ThymeleafAutoConfiguration {
    
}

能够看到，这个配置类首先导入了ThymeleafProperties配置类，而后经过@ConditionalOnClass注解标识这个类只有系统中存在TemplateMode和SpringTemplateEngine的时候才会生效，其实也就是引入了Thymeleaf相关依赖就会生效。web

建立测试Controller

@Controller
public class HelloController {

    @GetMapping("/")
    public String index(ModelMap map){
        map.addAttribute("url","/list");
        map.addAttribute("msg","点我点我");
        return "index";
    }
}
@GetMapping("/list")
public String list(Model model){
    List<User> users = new ArrayList<>();
    users.add(new User(UUID.randomUUID().toString(),"summerday",20));
    users.add(new User(UUID.randomUUID().toString(),"天乔巴夏",18));
    model.addAttribute("users",users);
    return "list";
}

因为咱们并无修改过视图解析的配置，咱们须要在/resources/templates/提供名为index.html和list.html的文件。spring

编写Thymeleaf模板

<!--index.html-->
<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Hello</title>
    </head>
    <body>
       <!-- thymeleaf经过th标签加强属性,最终经过标签中的内容覆盖原有标签内容-->
       <a href="http://www.hyhwky.com" th:href="${url}"><p th:text="${msg}"></p> </a>
    </body>
</html>

<!--list.html-->
<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>list</title>
    </head>
    <body>
        <h3>for each</h3>
        <!--说明： th:each="obj,stat:${objects}" 分别表明单个实例,状态(可省略),待遍历对象-->
        <div th:each="user,stat:${users}">
            <input type="hidden" name="id" th:value="${user.id}"/>
            姓名：<input type="text" name="username" th:value="${user.username}"/>
            年龄：<input type="text" name="age" th:value="${user.age}"/>
            索引: <input type="text" th:value="${stat.index}">
        </div>
    </body>
</html>

list页面渲染结果以下：后端

除此以外，Thymeleaf还支持使用js获取Model中的变量：浏览器

<script th:inline="javascript">
		var msg = [[${msg}]];
		console.log(msg)
    </script>

3、源码下载

本文主要介绍了SpringBoot整合Thymeleaf自动配置的原理，以及快速启动demo项目须要的步骤。关于Thymeleaf自己，还有其余许多强大的用法，能够参照官方文档，一一测试：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html缓存

另外，本文的样例代码【包括其余基础标签的使用】均已上传至Gitee：https://gitee.com/tqbx/springboot-samples-learnspringboot

SpringBoot整合Thymeleaf模板引擎

零、本片要点

1、Thymeleaf简介

2、快速启动

3、源码下载

4、参考阅读