Spring Boot整合Thymeleaf及Thymeleaf入门

文章目录

1. Thymeleaf简介

Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎。与传统 Java 模板引擎，如FreeMarker等不同的是，Thymeleaf 支持 HTML 原型。它可以让前端工程师在浏览器中直接查看页面的静态效果，也可以让后端工程师结合服务器传来的数据查看动态页面效果。

SpringBoot 提供了 Thymeleaf 自动化配置解决方案，因此Spring Boot与Thymeleaf完美整合。像Thymeleaf这样的页面模板，一般用于前后端不分的开发中。但是在如今流行的前后端开发中，像邮件发送的场景，同样可以使用到页面模板来编写更美观的页面内容。

2. Spring Boot整合Thymeleaf

2.1 添加依赖

在Spring Boot项目中添加以下依赖：

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

Spring Boot 2.x中已默认配置版本号就是最新的Thymeleaf版本

如果不是最新版本，也可以自行配置

    <properties>
        <java.version>1.8</java.version>
        <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
        <!-- 布局功能的支持程序 要求2以上版本-->
        <thymeleaf-layout-dialect.version>2.4.1</thymeleaf-layout-dialect.version>
    </properties>

2.2 Spring Boot提供的自动配置

ThymeleafAutoConfiguration类定义如下：

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

从该类的注解可以看到：
1.自动配置类ThymeleafAutoConfiguration的属性定义在 ThymeleafProperties类中，2.@ConditionalOnClass注解配置了当classpath路径（classpath，默认指的是项目编译后的路径，等价于 main/java + main/resources + 第三方jar包的根目录）中有 TemplateMode类和SpringTemplateEngine类的时候，该配置类才生效。所以需要引入Thymeleaf依赖才会使该配置类生效。
3.@AutoConfigureAfter表示在加载完WebMvcAutoConfiguration、WebFluxAutoConfiguration类后才加载当前的ThymeleafAutoConfiguration类。

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

通过上面源码可以看到视图解析器规定了我们的Thymeleaf的默认位置在resourses/templates目录下，文件名后缀html。
而且通过 @ConfigurationProperties 注解，将 application.properties 前缀为 spring.thymeleaf 的配置和这个类中的属性绑定。我们可以在配置文件application.properties 中修改默认的配置。

2.3 自定义配置

开发时，为了查看页面的实时更新，清除缓存，实现热部署。也就是修改了html后不用重启，刷新页面就能看到效果。不过这儿特别强调一下，修改完html后一定要ctrl+f9重新build一下。再回到浏览器刷新，就可以看到效果了。

#关闭缓存
spring.thymeleaf.cache=false

3. 简单使用示例

3.1 首先创建实体类

public class User {
  private int id;
  private String username;
  private String phone;

  public int getId() {
    return id;
  }

  public void setId(int id) {
    this.id = id;
  }

  public String getUsername() {
    return username;
  }

  public void setUsername(String username) {
    this.username = username;
  }

  public String getPhone() {
    return phone;
  }

  public void setPhone(String phone) {
    this.phone = phone;
  }
}

3.2 创建Controller

@Controller
public class TestController {
  @GetMapping("/show")
  public String show(Model model){
    List<User> userList=new ArrayList<>();
    for (int i = 0; i <10 ; i++) {
      User user=new User();
      user.setId(i);
      user.setUsername("小"+i);
      user.setPhone("1786453987"+i);
      userList.add(user);
    }
     model.addAttribute("userList",userList);
    return "show";
  }
}

3.3 创建Thymeleaf
在resource目录下新建templates目录，其中创建show.html,注意引入thymeleaf的名称空间：xmlns:th=“http://www.thymeleaf.org”，以获取语法提示。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8" >
  <title>Title</title>
</head>
<body>
<table border="1">
  <tr>
    <th>编号</th>
    <th>用户名</th>
    <th>手机号码</th>
  </tr>
  <tr th:each="user : ${userList}">
      <td th:text="${user.id}"></td>
      <td th:text="${user.username}"></td>
      <td th:text="${user.phone}"></td>
  </tr>

</table>
</body>
</html>