文章目录
1、Thymeleaf概述
官网部分翻译:反正就是各种好
-
Thymeleaf是用来开发Web和独立环境项目的服务器端的Java模版引擎
-
Spring官方支持的服务的渲染模板中,并不包含jsp。而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。
1.1、特点
-
动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
-
开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
-
多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
-
与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。
1.2、与SpringBoot整合
1、导入依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
2、编写一个配置类:自欧东配置模板的前缀和后缀
@Component
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafConfig {
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 = "classpath:/templates/";
private String suffix = ".html";
private String mode = "HTML";
private Charset encoding;
}
3、编写application.yml文件
spring:
thymeleaf:
cache: false #关闭thymeleaf的缓存
4、编写一个Controller
@Controller
public class ThymeleafController {
@RequestMapping("/hello")
public String test(Model model){
model.addAttribute("msg","你好啊!");
return "hello";
}
}
5、编写前端界面:hello.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>
<h1 th:text="${msg}"></h1>
</body>
</html>
6、测试结果
2、Thymeleaf常用语法
Thymeleaf的主要作用是把model中的数据渲染到html中,因此其语法主要是如何解析model中的数据,我们主要通过以下方面来学习:
- 变量、方法、条件判断、循环、运算【逻辑运算、布尔运算、比较运算、条件运算】
- 其他
2.1、变量_变量案例
1、新建一个实体类:User
@Data
@NoArgsConstructor
@AllArgsConstructor
@Component
public class User {
private String name;
private Integer age;
}
2、在模型中添加数据
@RequestMapping("/test")
public String test(Model model){
user.setName("陈志辉");
user.setAge(21);
model.addAttribute(user);
return "test";
}
3、前端界面获取
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 th:text="${user.getName()}"></h1>
<h1 th:text="${user.getAge()}"></h1>
</body>
</html>
注意:Thymeleaf通过${}来获取model中的变量,这不是el表达式,这个是ognl表达式,只是在语法上较为相似!区别在于表达式写在一个名为:th:text的标签属性中,这个叫做指令。
2.2、变量_动静结合
1、指令
Thymeleaf崇尚模板是纯正的html代码,脱离模板引擎,在纯静态环境下也可以直接运行,现在如果我们直接在html中编写${}这样的表达式,显然在静态环境下就会出错,这不符合Thymeleaf的理念。
Thymeleaf中所有的表达式都需要写在“指令”中,指令是HTML5中的自定义属性,在Thymeleaf中所有的指令都是以th:
开头,因为表达式${user.name}是写在自定义属性中,因此在静态环境下,表达式的内容会被当做是普通的字符串,浏览器会自动忽略这些指令,这样就不会报错了
如果我们不经过SpringMVC,而是直接通过浏览器打开编写的页面,这样的话,在静态环境下,th指令不会被是被,但是也不会报错,而是现实< span >标签的缺省默认值“请跟我来”
指令的设计,正式Thymeleaf的高明之处,也是它优于其他模板引擎的原因,动静结合的设计,使得无论是前端开发人员或是后端开发人员都完美契合。
2、向下兼容
如果浏览器不支持html5,那我们需要怎么做?
如果不支持th:这样命名空间写法,那么可以把th:text改成data-th-text,Thymeleaf也可以兼容
3、escape
另外,rh—text出于安全考虑,会把表达式读取到的值进行处理,防止html的注入
例如:< p >你好< /p >将会被格式化成 l t ; p lt;p lt;pgt; 你好 l t ; / p lt;/p lt;/pgt;
如果想要不进行格式化输出,而是要输出原始内容,则使用th:utext来代替
2.3、变量_ognl表达式的语法
刚才获取的变量值,我们使用的是经典的对象.属性名
方式,但是有些情况下,我们的属性名可能本身也是变量,那需要怎么做?
ognl提供类似js的语法方式:
${user.name} 可以协作 ${user[‘name’]}
2.4、变量——自定义变量
1、案例
<h2>
<p>Name: <span th:text="${user.name}">Jack</span>.</p>
<p>Age: <span th:text="${user.age}">21</span>.</p>
</h2>
如果我们想要获取用户的所有信息的话,分别进行展示,这样当数量获取比较多的时候们是不是要频繁的写user.
就会导致非常的麻烦,因此我们可以使用thymeleaf的自定义变量来解决这个问题
2、示例
<h2 th:object="${user}">
<p>Name: <span th:text="*{name}">Jack</span>.</p>
<p>Age: <span th:text="*{age}">21</span>.</p>
</h2>
主要的步骤就是:
- .我们先在h2上用th:object="${user}"获取到user的值,并且保存
- .然后在h2的任意元素上,通过*{属性名}的方式,来获取user中的属性,这样就省去了大量的user.前缀
3、方法
3.1、方法
1、ognl表达式中的方法调用
<h2 th:object="${user}">
<p>FirstName: <span th:text="*{name.split(' ')[0]}">Jack</span>.</p>
<p>LastName: <span th:text="*{name.split(' ')[1]}">Li</span>.</p>
</h2>
- 这里我们调用了name(是一个字符串)的split方法
2、Thymeleaf内置对象
Thymeleaf中提供了一些内置对象,并且在这些对象中提供了一些方法,方便我们来调用,获取这些对象,需要使用#对象名
来应用
- 一些环境相关对象
对象 | 作用 |
---|---|
#ctx | 获取Thymeleaf自己的Context对象 |
#request | 如果是web程序,可以获取到HttpServletRequest对象 |
#response | 如果是web程序,可以获取到HttpServletResponse对象 |
#session | 如果是web程序,可以获取到HttpSession对象 |
#servletContext | 如果是web程序,可以获取到HttpServletContext对象 |
- Thymeleaf提供的全局对象
对象 | 作用 |
---|---|
#dates | 处理java.util.date的工具对象 |
#calendars | 处理java.util.calendar的工具对象 |
#numbers | 处理数字格式化的方法 |
#strings | 处理字符串的方法 |
#bools | 用来判断布尔值的方法 |
#arrays | 用来处理数组的方法 |
#lists | 用来处理List集合的方法 |
#sets | 用来处理set集合的方法 |
#maps | 用来处理map集合的方法 |
3、举例
我们在环境变量中添加日期类型对象
@RequestMapping("/test2")
public String test2(Model model){
model.addAttribute("today",new Date());
return "test2";
}
在页面中处理
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
今天是:<span th:text="${#dates.format(today,'yyyy-MM-dd')}"></span>
</p>
</body>
</html>
3.2、方法_字面值
有时候我们需要在指令中填写基本类型如:字符串、数值、布尔,并不希望被Thymeleaf解析为变量,这个时候称为字面值
- 字符串字面值:
使用一对单引号引用的内容就是字符串的字面值
<p>
你正在观看 <span th:text="'thymeleaf'"></span> 的字符串常量值.
</p>
- 数字字面值:不需要任何的特殊语法,写什么就是什么,可以直接进行算数运算
<p>今年是 <span th:text="2018"></span></p>
<p>两年后将会是 <span th:text="2018 + 2"></span></p>
- 布尔字面值:布尔类型的字面值是true或是false
<div th:if="true">
你填的是true
</div>
这里引用一个th:if标签,跟vue中的v-if很相似
3.3、方法_拼接
我们常常会用到普通字符串与表达式拼接的情况:字符串字面值需要用’’,拼接起来非常麻烦,Thymeleaf对此进行了简化,使用一对|即可
- 常规
<span th:text="'欢迎您:' + ${user.name} + '!'"></span>
- 使用Thymeleaf之后
<span th:text="|欢迎您:${user.name}|"></span>
4、运算
需要注意: $ {} 内部的是通过ognl表达式引擎解析的,外部才是通过Thymeleaf引擎解析的,因此运算尽量放在${}外面进行
- 算术运算:支持的算术运算符:+、-、*、/、%
<span th:text="${user.age}"></span> //21
<span th:text="${user.age}%2 == 0"></span> //false
- 比较运算:
(1)支持的比较运算>、<、>=、<=、但是<和>不能直接使用,因为xml会解析为标签,需要使用别名
,注意== and !=不仅可以比较数值,类似equals的功能
(2)可以使用的别名:gt(>)、lt(<)、ge(>=)、le(<=)、not(!)、eq(==)、ne(!=)
- 条件运算
(1)三元运算
<span th:text="${user.sex} ? '男':'女'"></span>
(2)默认值:有时候我们取的值可能为空,这个时候就需要做非空判断,可以用表达式 ?: 默认值简写
<span th:text="${user.name} ?: '二狗'"></span>
当前面的表达式值为null的时候,就会使用后面的默认值,注意:?:之间没有空格
5、循环
1、常规
循环也是非常频繁使用的需求,我们使用th:each指令来完成;
假如有用户的集合:users在Context中
<tr th:each="user : ${users}">
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
其中${users}
是要遍历的结合,可以是一些类型
- lterable,实现ltberable接口的类
- Enumeration,枚举
- Interator,迭代器
- Map,遍历得到的是Map.Entry
- Array,数组及其他一切符合数组结果的对象
2、在迭代的同时,获取迭代的状态对象
<tr th:each="user,stat : ${users}">
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
stat对象包含以下属性:
- index,从0开始的角标
- count,元素的个数,从1开始
- size,元素的总个数
- current,当前遍历得到的数
- even/odd,返回是否为奇偶boolean值
- first/last,返回是否为第一或最后boolean值
6、逻辑判断
有了if和else,我们就能实现一切功能
Thymeleaf中使用th:if 和 th:unless,两者的意思恰好相反
<span th:if="${user.age} > 24">老油条</span>
如果表达式的值为true,那么标签则会被渲染到页面上,否则不进行渲染
以下情况被认定是true:
- 表达式的值为true
- 表达式的值为非0的数
- 表达式的值为非0的字符
- 表达式的值为字符串,但不是“false”、“no”、“off”
- 表达式不是布尔、字符串、数字、字符的任何一种
7、分支控制switch
这里需要使用到两个指令: th:switch 和 th:case
<div th:switch="${user.role}">
<p th:case="'admin'">用户是管理员</p>
<p th:case="'manager'">用户是经理</p>
<p th:case="*">用户是别的玩意</p>
</div>
需要注意的是,一旦有一个th:case城里,其他的则不再进行判断,与java中的switch一样,另外th:case=“*”表示默认放在最后
8、JS模板
模板引擎不仅可以渲染html,也可以对JS中的进行预处理,而且为了在纯静态环境下可以运行,其Thymeleaf代码可以被注释起来
<script th:inline="javascript">
const user = /*[[${user}]]*/ {};
const age = /*[[${user.age}]]*/ 20;
console.log(user);
console.log(age)
</script>
- 在script标签中通过th:inline="javascipt"来表明这是要特殊处理的js脚本
- 语法结构
const user = /*[[Thymeleaf表达式]]*/ "静态环境下的默认值";
因为Thymeleaf被注释起来,因此在静态环境下,js代码也不会报错,而是采用表达式后面跟着的默认值,且User对象会被直接处理为json格式