11.1 认识 Thymeleaf
Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发
模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,甚至在 JavaScript 中也会用到模板引擎技术,Java 生态下的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等。
Thymeleaf 对网络环境不存在严格的要求,既能用于 Web 环境下,也能用于非 Web 环境下。在非 Web 环境下,他能直接显示模板上的静态数据;在 Web 环境下,它能像 Jsp 一样从后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的,以 HTML 标签为载体,Thymeleaf 要寄托在 HTML 标签下实现。
SpringBoot 集成了 Thymeleaf 模板技术,并且 Spring Boot 官方也推荐使用 Thymeleaf 来替代 JSP 技术,Thymeleaf 是另外的一种模板技术,它本身并不属于 Spring Boot,Spring Boot只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web 开发中,我们往往会选择使用 Jsp 去完成页面的动态渲染,但是 jsp 需要翻译编译运行,效率低
Thymeleaf 的官方网站:www.thymeleaf.org
Thymeleaf 官方手册:www.thymeleaf.org/doc/tutoria…
11.2 SpringBoot集成 Thymeleaf
11.2.1 新建一个springboot项目,项目名称:037-springboot-thymeleaf-first
创建 Spring Boot 项目,添加 web 和 Thymeleaf 依赖\
按照这种方式创建后,pom.xml 文件下会自动添加如下依赖
<!--SpringBoot 集成 Thymeleaf 的起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot 开发 web 项目的起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
复制代码
11.2.2 在Springboot的核心配置文件application.properties中对Thymeleaf进行配置
#thymeleaf 页面的缓存开关,默认 true 开启缓存
#建议在开发阶段关闭 thymeleaf 页面缓存,目的实时看到页面
spring.thymeleaf.cache=false
复制代码
其实什么都不用配置就可以工作,因为基本 Thymeleaf 的配置都有默认值
#前缀:
#thymeleaf 模版前缀,默认可以不写
spring.thymeleaf.prefix=classpath:/templates/
#后缀:
#thymeleaf 模版后缀,默认可以不写
spring.thymeleaf.suffix=.html
复制代码
11.2.3 创建 ThymeleafControlle去映射到模板页面(和 SpringMVC基本一致)
@Controller
public class ThymeleafController {
@RequestMapping(value = "/thymeleaf/index")
public String index(Model model) {
model.addAttribute("data","SpringBoot 成功集成 Thymeleaf 模版!");
return "index";
}
}
复制代码
11.2.4 在src/main/resources 的templates 下新建一个 index.html页面用于展示数据
HTML 页面的元素中加入以下属性:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SpringBoot 集成 Thymeleaf</title>
</head>
<body >
<!--Thymeleaf 前端框架以 Html 为载体-->
<span th:text="${data}"></span>
<span th:text="${data}"></span>
<p th:text="${data}"></p>
<div th:text="${data}"></div>
</body>
</html>
复制代码
11.2.5 启动程序,
右键->查看页面源代码
注 意 : Springboot 用 使 用 thymeleaf 作 为 视 图 展 示 , 约 定 将 模 板 文 件 放 置 在src/main/resource/templates 目录下,静态资源放置在 src/main/resource/static 目录下
11.3 Thymeleaf 的表达式
11.3.6 新建一个springboot项目,项目名称:038-springboot-thymeleaf-expression
1)创建SpringBoot的web项目并使用模版引擎
2)pom.xml中应该有如下两个依赖
<!--SpringBoot 集成 Thymeleaf 模版引擎的起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--SpringBoot 的 web 项目起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
复制代码
3)在 application.properties中设置 thymeleaf 参数
#设置 thymeleaf 页面缓存失效
spring.thymeleaf.cache=false
#thymeleaf 模版前缀,默认值,可选项
spring.thymeleaf.prefix=classpath:/templates/
#thymeleaf 模版后缀,默认值,可选项
spring.thymeleaf.suffix=.html
复制代码
4)创建实体 User 实体类
创建 User 实体类,为后续演示提供数据
@Data
public class User {
private Integer id;
private String name;
private String phone;
private String address;
}
复制代码
5)创建 ThymeleafController 类
@Controller
public class ThymeleafController {
@RequestMapping(value = "/thymeleaf/index")
public String index(Model model) {
model.addAttribute("data","SpringBoot 集成 Thymeleaf 模版!");
return "index";
}
}
复制代码
6)在src/main/resources/templates 在创建 html 页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf'Index</title>
</head>
<body>
<span th:text="${data}"></span>
</body>
</html>
复制代码
7)测试
11.3.7 标准变量表达式
注意:th:text="" 是Thymeleaf 的一个属性,用于文本的显示
8)语法 ... 9)说明 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和EL中的{...}\ 9)说明\ 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和 EL 中的 ... 9)说明 标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和EL中的{} 相同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据
10)案例演示
创建一个方法,将用户信息存放到 model 中,th