1. Thymeleaf 简介
Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。
简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下两个个极吸引人的特点：
它支持 html 原型
Jsp中EL表达式和JSTL标签能完成工作，它都几乎都能完成
2 环境搭建
1 导入 依赖如下：
1
2
3
4
5
|
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
|
2 在resources目录下创建templates 目录，用于存放.html文件
3 搭建完毕
案例演示
例如: 写一个简单的页面访问
1 控制器代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| package com.hqyj.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class TestController {
@RequestMapping("/test")
public String test(Model model){
model.addAttribute("info","你好");
return "test";
}
}
|
2 在templates 目录下创建test.html文件， test页面代码如下：
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span th:text="${info}">世界</span>
</body>
</html>
|
3 当直接使用浏览器打开时，浏览器展示结果如下。
当通过 Web 应用程序访问时，浏览器展示结果如下。
3 Thymeleaf 变量表达式
Thymeleaf 作为一种模板引擎，它拥有自己的语法规则，常用的变量表达式
| 属性 |
描述 |
实例 |
| th:text |
文本替换，转义特殊字符 |
|
| th:value |
替换 value 属性 |
<input** th:value = “${user.name}” **/> |
| th:each |
遍历，支持 Iterable、Map、数组等 |
<tr** th:each=”m:${session.map}”**> <td** th:text=”${m.getKey()}”**> <td** th:text=”${m.getValue()}”**> |
| th:if |
根据条件判断是否需要展示此标签 |
|
| th:selected |
select 选择框选中 |
— <option** th:selected=”${name==’a’}”**> 成都 <option** th:selected=”${name==’b’}”**> 北京** |
案例演示：
1 定义test页面控制方法，代码如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| @GetMapping("/test")
public String test(Model model){
Student student = new Student();
student.setName("李四");
student.setSex("男");
student.setAihao("玩游戏");
student.setJiguan("四川");
model.addAttribute("stu",student);
List<String> list = new ArrayList<>();
list.add("看电影");
list.add("玩游戏");
list.add("逛街");
model.addAttribute("aihao",list);
return "test";
}
|
2 test.html页面渲染代码如下：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label>姓名:</label>
<input type="text" th:value="${stu.name}">
<br>
<label>性别:</label>
<input type="radio" th:if="${stu.sex=='男'}" checked>男
<input type="radio" th:if="${stu.sex=='女'}" checked>女
<br>
<label>爱好:</label>
<ul th:each="x:${aihao}">
<li>
<input type="checkbox" name="aihao" th:if="${stu.aihao==x}" checked>
<input type="checkbox" name="aihao" th:if="${stu.aihao!=x}" >
<span th:text="${x}"></span>
</li>
</ul>
<br>
<label>籍贯:</label>
<select>
<option th:selected="${stu.jiguan=='北京'}">北京</option>
<option th:selected="${stu.jiguan=='四川'}">四川</option>
<option th:selected="${stu.jiguan=='上海'}">上海</option>
</select>
</body>
</html>
|
