Thymeleaf模板引擎
Thymeleaf 应该是目前最受欢迎的模板引擎技术了,Spring Boot 官方也推荐 Java web 开发中使用该技术来替代 JSP 技术,主要由于其“原型即页面”的理念与 Spring Boot 倡导的快速开发非常契合,同时 Thymeleaf 模板引擎技术也确实拥有其他技术所不具备的优点。
Thymeleaf 3
Thymeleaf 于 2016 年 5 月 8 日正式发布了 thymeleaf-3.0.0.RELEASE 版本,目前的大部分项目开发过程中也是使用 Thymeleaf 3.0 及以上版本,因此在这里简单的介绍一下 Thymeleaf 3 的特性。
-
完整的 HTML5 标记支持,全新的解析器
-
自带多种模板模式,也可扩展支持其他模板格式。
-
在 web 和非 web 环境(离线)下都可以正常工作
-
对 Spring web 开发的支持非常完善
-
独立于 Servlet API
Thymeleaf快速上手
新建一个项目
- 导入thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
导入约束
- 在 resources/templates 目录新建模板文件 thymeleaf.html ,Thymeleaf 模板引擎的默认后缀名即为 html,新增文件后,首先在模板文件的 标签中导入 Thymeleaf 的名称空间
- 导入该名称空间主要是为了 Thymeleaf 的语法提示和 Thymeleaf 标签的使用
<html lang="en" xmlns:th="http://www.thymeleaf.org">
新建一个Controller
- 后端通过Model对象存数据
@Controller
public class ThymeleafController {
@RequestMapping("/tc")
public String tc(Model model){
model.addAttribute("msg","Hello Thymeleaf");
return "thymeleaf";
}
}
thymeleaf.html
- 前端通过thymeleaf语法取出数据
- 直接打开该页面显示内容是:默认
- 启动项目,通过请求访问内容是:Hello Thymeleaf
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--取出后端存的数据-->
<div>
<h2 th:text="${msg}">默认</h2>
</div>
</body>
</html>
Thymeleaf属性
th:text 对应的是 HTML5 中的 text 属性,除 th:text 属性外,Thymeleaf 也提供了其他的标签属性来替换 HTML5 原生属性的值,属性节选如下:
- th:background 对应 HTML5 中的背景属性
- th:class 对应 HTML5 中的 class 属性
- th:href 对应 HTML5 中的链接地址属性
- th:id 和 th:name 分别对应 HTML5 中的 id 和 name 属性…
- th:block 比较特殊,它是 Thymeleaf 提供的唯一的一个 Thymeleaf 块级元素,其特殊性在于 Thymeleaf 模板引擎在处理th:block的时候会删掉它本身,而保留其内容。
可以使用ModelMap存放多个数据
Thymeleaf 语法规则
表达式语法
- 变量表达式: ${…}
- 选择变量表达式: *{…}
- 信息表达式: #{…}
- 链接 URL 表达式: @{…}
- 分段表达式: ~{…}
字面量
- 字符串: ‘one text’, ‘Another one!’ …
- 数字: 0, 34, 3.0, 12.3 …
- 布尔值: true, false
- Null 值: null
- 字面量标记:one, sometext, main …
文本运算
- 字符串拼接: +
- 字面量置换: |The name is ${name}|
算术运算
- 二元运算符: +, -, *, /, %
- 负号(一元运算符): (unary operator): -
布尔运算
- 二元运算符: and, or
- 布尔非(一元运算符): !, not
比较运算
- 比较: >, <, >=, <= (gt, lt, ge, le)
- 相等运算符: ==, != (eq, ne)
- 比较运算符也可以使用转义字符,比如大于号,可以使用 Thymeleaf 语法 gt 也可以使用转义字符>
条件运算符
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
特殊语法
- 无操作: _
Thymeleaf 模板引擎使用注意事项
必须引入名称空间
- 即使不引入以上名称空间,静态资源访问以及模板动态访问都不会报错,因此有些开发者可能会忽略这个事情。但是建议在开发过程中最好引入该名称空间,因为引入之后会有 Thymeleaf 代码的语法提示,能够提升开发效率,也减少人为造成的低级错误。
<html lang="en" xmlns:th="http://www.thymeleaf.org"></html>
禁入模板引擎
- Thymeleaf 的默认缓存设置是通过配置文件的 spring.thymeleaf.cache 配置属性决定的,通过如上 Thymeleaf 模板的配置属性类 ThymeleafProperties 可以发现该属性默认为 true,因此 Thymeleaf 默认是使用模板缓存的,该设置有助于改善应用程序的性能,因为模板只需编译一次即可,但是在开发过程中不能实时看到页面变更的效果,除非重启应用程序,因此建议将该属性设置为 false,在配置文件中修改如下:
spring.thymeleaf.cache=false
IDEA 中通过 Thymeleaf 语法读取变量时爆红问题
- 如下图所示,在刚开始使用 Thymeleaf 开发时可能会碰到这种问题,在模板文件中通过 Thymeleaf 语法读取变量时,该变量名称下会出现红色波浪线,也就是错误的标志。
- 只是由于 IDEA 中默认开启了表达式参数验证,即使在后端的 model 数据中添加了该变量,但是对于前端文件是无法感知的,因此会报这个错误,可以在 IDEA 中默认将验证关闭或者将提示级别修改掉也可以。