SpringBoot(十六) Thymeleaf模板引擎 - 快速入门

Thymeleaf是现代化服务器端的Java模板引擎,不同与其它几种模板的是Thymeleaf的语法更加接近HTML,并且具有很高的扩展性。在2.0以前,最为人吐槽的是性能跌到无底线。据说Thymeleaf3.0性能成倍的提高了。

Thymeleaf特点

  1. 支持无网络环境下运行,由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。所以它可以让前端小姐姐在浏览器中查看页面的静态效果,又可以让程序员小哥哥在服务端查看带数据的动态页面效果。
  2. 开箱即用,为Spring提供方言,可直接套用模板实现JSTL、 OGNL表达式效果,避免每天因套用模板而修改JSTL、 OGNL标签的困扰。同时开发人员可以扩展自定义的方言。
  3. SpringBoot官方推荐模板,提供了可选集成模块(spring-boot-starter-thymeleaf),可以快速的实现表单绑定、属性编辑器、国际化等功能。

Thymeleaf 3中的一些变化和特性

模板变化

推荐你去掉模板中的 th:inline=“text” 属性。因为在HTML或XML模板中,不再需要该属性去支持文本中内联表达式的特性。

完整的HTML5 标记支持

不在强制要求标签闭合,属性加引号等等

模板类型

Thymeleaf 3 移除了之前版本的模板类型,新的模板类型为:HTML、XML、TEXT、JAVASCRIPT、CSS、RAW

文本型模板

文本型模板使得Thymeleaf可以支持输出CSS、Javascript和文本文件。在你想要在CSS或Javascript文件中使用服务端的变量时;或者想要输出纯文本的内容时。

构建项目

pom.xml

添加 ThymeleafWebDevtoolsLombok 依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>com.ray</groupId>
<artifactId>springboot2-16</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>

<name>springboot2-16</name>
<description>Demo project for Spring Boot</description>

<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>

<dependencies>
<!--thymeleaf模板引擎 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- Web 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!--热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<!-- 单元测试依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- Lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.0</version>
</dependency>
</dependencies>

<build>
<plugins>
<!-- Spring Boot Maven 插件 -->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>


</project>

为了方便开发,项目案例采用了热部署工具dev-tools ,这样我们在修改页面之后,IDEA会自动加载,从而达到实现热更新的效果。

application.yml

  1. 在 Spring Boot 项目中加入 Thymeleaf 依赖,即可启动其默认配置。如果想要自定义配置,可以在 application.yml 配置
  2. Thymeleaf默认开启了页面缓存,在开发的时候,应该关闭缓存。此外,通常我们还会指定页面的存放路径。(默认是classpath:/templates/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    # THYMELEAF (ThymeleafAutoConfiguration)
    spring:
    thymeleaf:
    #开启模板缓存(默认值:true)
    cache: false
    #模板编码
    encoding: UTF-8
    #要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值:HTML)
    mode: HTML5
    #在构建URL时添加到视图名称前的前缀(默认值:classpath:/templates/)
    prefix: classpath:/templates/
    #在构建URL时添加到视图名称后的后缀(默认值:.html)
    suffix: .html
    #Content-Type的值(默认值:text/html)
    servlet:
    content-type: text/html

Thymeleaf实战

实体类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.ray.springboot216.entity;

import lombok.AllArgsConstructor;
import lombok.Data;

/**
* @author Ray
* @date 2018/7/31 0031
*/
@Data
@AllArgsConstructor
public class User {

private String username;
private String password;
}

控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* @author Ray
* @date 2018/7/31 0031
*/
@Controller
@RequestMapping(value = "/test01")
public class TestController01 {

@RequestMapping(value = "/")
public ModelAndView index(){
List<User> userList = new ArrayList<>();
User user = new User("Ray", "123");
userList.add(user);
user = new User("Rain", "456");
userList.add(user);
ModelAndView modelAndView = new ModelAndView("test01.html");
modelAndView.addObject("userList", userList);
return modelAndView;
}
}

HTML

注意: 添加thymeleaf 命名空间,将静态页面转换为动态的视图,需要进行动态处理的元素将使用”th:”前缀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf-1</title>
</head>
<body>
<table>
<tr>
<td>用户名</td>
<td>密码</td>
</tr>

<tr th:each="user : ${userList}">
<td th:text="${user.username}">test-username</td>
<td th:text="${user.password}">test-password</td>
</tr>
</table>
</body>
</html>

测试

访问文件

访问地址

http://localhost:8080/test01/

总结

Thymeleaf 做到了不破坏 Html 自身内容的数据逻辑分离。

-------------- 本文结束  感谢您的阅读 --------------