目录
一、介绍
Thymeleaf 是新一代 Java 模板引擎,Thymeleaf 支持 HTML 原型,其文件后缀为“.html”,因此它可以直接被浏览器打开,此时浏览器会忽略未定义的 Thymeleaf 标签属性,展示 thymeleaf 模板的静态页面效果;当通过 Web 应用程序访问时,Thymeleaf 会动态地替换掉静态内容,使页面动态显示。
二、Thymeleaf 的特点
动静结合、开箱即用、多方言支持等
三、语法规则
在使用 Thymeleaf 之前,首先要在页面的 html 标签中声明名称空间
xmlns:th="http://www.thymeleaf.org"
Thymeleaf 语法分为以下 2 类:
- 标准表达式语法
变量表达式:${...}
选择变量表达式:*{...}
链接表达式:@{...}
国际化表达式:#{...}
片段引用表达式:~{...}等
- th 属性
th:id 、 th:text、 th:utext、 th:object、 th:each、 th:if 等等、用来替换原有的html属性。
四、springboot中集成Thymeleaf
1、导入依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
</dependency>
2、配置
spring:
thymeleaf:
mode: HTML
cache: false
五、使用
1、在resource目录下新建templates、存放页面资源
index.html如下
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>hello,Thymeleaf</h1>
</body>
</html>
2、在IndexController,新建一个方法,拦截Get请求,拦截路劲为"/index",如下
代码:
@Controller
public class IndexController {
@GetMapping("/index")
public String index(){
return "index";
}
}
启动后访问改路径:http://localhost:8889/index
如此、便是测试成功了
六、将数据存入页面并取出
6.1 存入普通数据
6.1.1 存入普通数据 msg
@GetMapping("/index") public String index(Model model){ model.addAttribute("msg","hello ,springboot"); return "index"; }
取出msg
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <h1>hello,Thymeleaf</h1> <h1 th:text="${msg}"></h1> <h1 th:utext="${msg}"></h1> </body> </html>
访问页面后的结果
6.1.2 存入对象
6.1.2 存入对象
@Controller public class IndexController { @GetMapping("/index") public String index(Model model){ IUser user = new IUser(); user.setUserName("张三"); user.setEmail("123456@qq.com"); user.setPassWord("123"); model.addAttribute("user",user); } }
取出存入对象
<h1 th:utext="${user}"></h1>
测试
取出存入对象的某个值
<div th:object="${user}"> <h1 th:text="${user.userName}"></h1> <h1 th:text="${user.passWord}"></h1> </div>
测试
6.1.3 存入List
6.1.3 存入List
@GetMapping("/index") public String index(Model model){ // model.addAttribute("msg","hello ,springboot"); IUser user1 = new IUser(); user1.setUserName("张三"); user1.setEmail("123456@qq.com"); user1.setPassWord("123"); IUser user2 = new IUser(); user2.setUserName("张四"); user2.setEmail("123456@qq.com"); user2.setPassWord("1234"); IUser user3 = new IUser(); user3.setUserName("张五"); user3.setEmail("123456@qq.com"); user3.setPassWord("12345"); List<IUser> userList = new ArrayList<>(); userList.add(user1); userList.add(user2); userList.add(user3); model.addAttribute("userList",userList); return "index"; }
遍历List并取出1
<h1 th:each="user :${userList}" th:text="${user}" ></h1>
测试
遍历List并取出2
<div th:each="user :${userList}" > <h1 th:text="${user}"></h1> </div>
测试
遍历List并取出3
<div th:each="user :${userList}" > [[${user}]] </div>
测试:
遍历userList,得到user,取出user的某个属性的值,
直接通过以属性的方式获取即可,例如:
<div th:each="user :${userList}" > [[${user.userName}]] </div>
测试
6.2 跳转另一个页面
准备:
@GetMapping("/getUser") @ResponseBody private String getUser(){ return "getUserDate"; }
模拟下,访问此接口,得到User的所有数据并转为Json格式
跳转链接:
<a th:href="@{/getUser}">Thymeleaf写法:查询用户</a> <hr> <a href="/getUser">原生写法:查询用户</a>
两种方法否可以实现跳转:
6.3 判断
@GetMapping("/index") public String index(Model model){ int a =1; model.addAttribute("msg",a); return "index"; }
将int a =1,存入model对象,页面取出后进行判断
<div th:if="${msg<1}"> <h1>a<1</h1> </div> <div th:unless="${msg>2}"> <h1>a<=2</h1> </div>
基于可以根据条件展示不同结果、按钮等等