目录
1. 简介
Thymeleaf 是一个用于Web和独立环境的现代服务器端Java模板引擎。它主要用于基于MVC的Web应用程序,并可以无缝地集成到Spring框架中。Thymeleaf的语法旨在简化Web开发,同时保持其清晰和可维护性。
2. 使用
2.1 引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在前端界面中引入
xmlns:th="http://www.thymeleaf.org"
2.2 语法
2.2.1 变量表达式
变量表达式即OGNL表达式或Spring EL表达式(在Spring术语中也叫model attributes)。如下所示: ${session.user.name}
它们将以HTML标签的一个属性来表示:
<span th:text="${book.author.name}">
2.2.2 选择(星号)表达式
选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行,如下: *{customer.name}
被指定的object由th:object属性定义:
<div th:object="${book}">
<span th:text="*{title}">...</span>
</div>
2.2.3 文字国际化表达式
文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用Key索引Value,还可以提供一组参数(可选).
#{main.title}
2.2.4 URL表达式
URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写。不需要指定项目名字@{/order/list}
URL还可以设置参数:
@{/order/details(id=${orderId})}
让我们看这些表达式:
<form th:action="@{/createOrder}">
<a href="main.html" th:href="@{/main}">
2.2.5 表达式支持的语法
- 字面(Literals)
- 文本文字(Text literals): ‘one text’, ‘Another one!’,…
- 数字文本(Number literals): 0, 34, 3.0, 12.3,…
- 布尔文本(Boolean literals): true, false
- 空(Null literal): null
- 文字标记(Literal tokens): one, sometext, main,…
- 文本操作(Text operations)
- 字符串连接(String concatenation): +
- 文本替换(Literal substitutions): |The name is ${name}|
- 算术运算(Arithmetic operations)
- 二元运算符(Binary operators): +, -, *, /, %
- 减号(单目运算符)Minus sign (unary operator): -
- 布尔操作(Boolean operations)
- 二元运算符(Binary operators):and, or
- 布尔否定(一元运算符)Boolean negation (unary operator):!, not
- 比较和等价(Comparisons and equality)
- 比较(Comparators): >, <, >=, <= (gt, lt, ge, le)
- 等值运算符(Equality operators):==, != (eq, ne)
- 条件运算符(Conditional operators)
- If-then: (if) ? (then)
- If-then-else: (if) ? (then) : (else)
- Default: (value) ?: (defaultvalue)
例子:
<span th:text="${session.user.username}" th:if="${not #strings.isEmpty(session.user)}"></span>
2.2.6 常用的thymeleaf标签
2.3 配合springboot(例子)
2.3.1 写一个接口
@RequestMapping("/success")
public String hello(Model model, HttpSession httpSession){
model.addAttribute("hello","yxz");
model.addAttribute("hello2","<h2>无敌!!!</h2>");
User user = new User();
user.setPassword("root");
user.setUsername("YXZ");
user.setAge(1);
user.setScore(78);
user.setGender(2);
List<User> uList = new ArrayList();
for (int i = 0; i < 10; i++){
User u = new User();
u.setUsername("yxz"+i);
u.setPassword("111"+i);
uList.add(u);
}
httpSession.setAttribute("user", user);
model.addAttribute("user", user);
model.addAttribute("uList", uList);
return "success";
}
2.3.2 前端界面success.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf</title>
<style>
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div th:text="${hello.toUpperCase()}" th:id="${hello.toUpperCase()}">xxxx</div>
<div th:utext="${hello2}">xxxx</div>
<input th:value="${user.getUsername()}">
<button th:onclick="alert('无敌')">弹出数字</button>
<hr>
<div th:object="${user}">
<span th:text="*{username}"></span>
</div>
<a th:href="" th:if="${user.getAge() == 2}" >年龄</a>
<a th:class="${user.getAge() > 2}?'class1':'class2'" >年龄</a>
<p th:if="${user.score >= 60 and user.score < 85}">B</p>
<p th:if="${user.score < 60}">C</p>
<p th:if="${user.score > 85}">优秀</p>
<span th:switch="${user.gender}">
<p th:case="1">男</p>
<p th:case="2">女</p>
</span>
<table>
<tr th:each="a,aState:${uList}">
<td th:text="${a.username}"></td>
<td th:text="${a.password}"></td>
<td th:text="${aState.index}"></td>
</tr>
</table>
<img th:src="@{/images/img1.png}">
<script>
</script>
</body>
</html>
访问到图片
2.3.3 效果
3. 参考链接
Thymeleaf详细教程(SpringBoot版)
Thymeleaf一篇就够了
4. 心得
很方便很好用!!!学起来也很简单