一、thymeleaf 简介
thymeleaf 是一种现代化服务端的模板引擎，能处理 HTML，XML，JavaScript，CSS 甚至纯文本数据。
常见的模板引擎：thymeleaf、freemarker 和 JSP，Spring Boot 中默认是不支持 JSP。
官网文档：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
二、thymeleaf 基本使用
1、创建 Spring Boot 工程，选中 web 模块
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
2、引入 thymeleaf 所依赖的 starter
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
3、编写 Controller，在方法中存放数据，然后返回视图页面
@Controller
public class HelloController {
@GetMapping("/data")
public String data(Model model){
model.addAttribute("user", "<h1>zhangsan</h1>");
model.addAttribute("users", Arrays.asList("zs","lisi"));
return "data";
}
}
4、在 resources 目录下创建 templates 文件夹，然后创建 data.html 文件
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p th:text="${user}">user</p>
<div th:each="u:${users}" th:text="${u}"></div>
</body>
</html>
5、启动应用程序，访问：http://localhost:8080/data ，结果如图
三、thymeleaf 获取值
-
${x}
x
-
${param.x}
x
-
${session.x}
x
-
${application.x}
x
例子：
1、Controller 层代码
@GetMapping("/test1")
public String test1(Model model, HttpServletRequest request){
HttpSession session = request.getSession();
ServletContext application = session.getServletContext();
model.addAttribute("name", "张三");
session.setAttribute("name", "王五");
application.setAttribute("name", "赵六");
return "test1";
}
2、在 resources / templates 目录下，新建 test1.html 文件，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf 从上下文中获取数据</title>
<script>
var name = '[[${name}]]';
console.info('从thymeleaf 上下文中获取: ' + name);
var sessionName = '[[${session.name}]]';
console.info('从 session 作用域中获取: ' + sessionName);
var applicationName = '[[${application.name}]]';
console.info('从 application 作用域中获取: ' + applicationName);
</script>
</head>
<body>
从thymeleaf 上下文中获取name: <span th:text="${name}"></span> <br>
从 请求参数中获取 name: <span th:text="${param.name}"></span> age: <span th:text="${param.age}"></span><br>
从 session 作用域中获取 name: <span th:text="${session.name}"></span> <br>
从 application 作用域中获取 name: <span th:text="${application.name}"></span> <br>
</body>
</html>
3、运行结果
四、text 与 utext的区别 ，以及行内写法
1、Controller 层代码
@GetMapping("/test2")
public String test2(Model model){
model.addAttribute("hello","<h1>hello SpringBoot!!</h1>");
return "test2";
}
2、在 resources / templates 目录下，新建 test2.html 文件，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>text 与 utext的区别 ，以及行内写法</title>
</head>
<body>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr>
<div>[[${hello}]]</div>
<div>[(${hello})]</div>
</body>
</html>
3、运行结果
五、表达式基本对象
-
#ctx
-
#vars:
-
#locale
-
#request
HttpServletRequest
-
#response
HttpServletResponse
-
#session
HttpSession
-
#servletContext
ServletContext
例子：获取 语言信息
1、Controller 层代码
@GetMapping("/test3")
public String test3(Model model){
return "test3";
}
2、在 resources / templates 目录下，新建 test3.html 文件，内容如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>获取 浏览器语言</title>
</head>
<body>
Established locale country: <span th:text="${#locale.country}">US</span>
</body>
</html>
3、运行结果
六、日期格式化
1、Controller 层代码
@GetMapping("/test4")
public String test4(Model model){
model.addAttribute("today", new Date());
return "test4";
}
2、在 resources / templates 目录下，新建 test4.html 文件，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf 日期格式化</title>
</head>
<body>
today is <span th:text="${#dates.format(today, 'yyyy-MM-dd HH:mm:ss')}"></span>
</body>
</html>
3、运行结果
七、*{} 表达式
1、创建pojo类，名为 User
/**
省略get/set 方法
*/
public class User {
private int id;
private String name;
private Date birthDate;
}
2、Controller 层代码
@GetMapping("/test5")
public String test5(Model model){
User user = new User();
user.setId(1);
user.setName("张无忌");
user.setBirthDate(new Date());
model.addAttribute("user", user);
return "test5";
}
3、在 resources / templates 目录下，新建 test5.html 文件，内容如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>*{...}表达式</title>
</head>
<body>
<div th:object="${user}">
<h1 th:text="*{id}"></h1>
<h1 th:text="*{name}"></h1>
<h1 th:text="*{#dates.format(birthDate, 'yyyy-MM-dd')}"></h1>
</div>
<hr>
<div>
<h1 th:text="${user.id}"></h1>
<h1 th:text="${user.name}"></h1>
<h1 th:text="${#dates.format(user.birthDate, 'yyyy-MM-dd')}"></h1>
</div>
</body>
</html>
4、运行结果