Thymeleaf
Thymeleaf是一款用于渲染XML/HTML5内容的模板引擎，类似JSP。它可以轻易的与SpringMVC等Web框架进行集成作为Web应用的模板引擎。SpringBoot推荐使用Thymeleaf编写动态页面。
Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。
Thymeleaf在有服务和无服务的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果
没有服务时，Thymeleaf的模板可以展示静态数据；当有数据返回到页面时，Thymeleaf会动态地替换掉静态内容，使页面动态显示。
-
创建SpringBoot项目
-
引入SpringMVC和Thymeleaf起步依赖
<!--添加Thymeleaf起步依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
- 创建视图index.html
<!DOCTYPE html>
<!-- 引入thymeleaf命名空间，方便使用thymeleaf属性 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf入门</title>
</head>
<body>
<!-- 静态页面显示中北小萌新，动态页面使用后端传来的msg数据代替 -->
<!-- thymeleaf支持el表达式 -->
<h2 th:text="${msg}">中北小萌新</h2>
</body>
</html>
- template中的html文件不能直接访问，需要编写Controller跳转到页面中
@Controller
public class PageController {
// 页面跳转
@GetMapping("/show")
public String showPage(Model model){
model.addAttribute("msg","Hello Thymeleaf");
return "index";
}
}
- 进行springboot配置
#日志格式
logging.pattern.console=%d{HH:mm:ss.SSS} %clr(%-5level) --- [%-15thread] %cyan(%-50logger{50}):%msg%n
- 启动项目，访问http://localhost:8080/show及静态页面
变量输出
| 语法 | 作用 |
|---|---|
| th:text | 将model中的值作为内容放入标签中 |
| th:value | 将model中的值放入input标签的value属性中 |
准备模型数据
@GetMapping("/show")
public String showPage(Model model){
model.addAttribute("msg","Hello Thymeleaf");
return "index";
}
在视图展示model中的值
<span th:text="${msg}"></span>
<hr/>
<input th:value="${msg}">
操作字符串&时间
Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的。
操作字符串
操作字符串的内置对象为strings。
| 方法 | 说明 |
|---|---|
| ${#strings.isEmpty(key)} | 判断字符串是否为空，如果为空返回true，否则返回false |
| ${#strings.contains(msg,‘T’)} | 判断字符串是否包含指定的子串，如果包含返回true，否则返回false |
| ${#strings.startsWith(msg,‘a’)} | 判断当前字符串是否以子串开头，如果是返回true，否则返回false |
| ${#strings.endsWith(msg,‘a’)} | 判断当前字符串是否以子串结尾，如果是返回true，否则返回false |
| ${#strings.length(msg)} | 返回字符串的长度 |
| ${#strings.indexOf(msg,‘h’)} | 查找子串的位置，并返回该子串的下标，如果没找到则返回-1 |
| ${#strings.substring(msg,2,5)} | 截取子串，用法与JDK的subString方法相同 |
| ${#strings.toUpperCase(msg)} | 字符串转大写 |
| ${#strings.toLowerCase(msg)} | 字符串转小写 |
使用方式：
<span th:text="${#strings.isEmpty(msg)}"></span>
<hr/>
<span th:text="${#strings.contains(msg,'s')}"></span>
<hr/>
<span th:text="${#strings.length(msg)}"></span>
操作时间
操作时间的内置对象为dates
| 方法 | 说明 |
|---|---|
| ${#dates.format(key)} | 格式化日期，默认的以浏览器默认语言为标准进行格式化 |
| ${#dates.format(key,‘yyyy/MM/dd’)} | 按照自定义的格式做日期转换 |
| ${#dates.year(key)} | 取年 |
| ${#dates.month(key)} | 取月 |
| ${#dates.day(key)} | 取日 |
准备数据
model.addAttribute("date",new Date(130,0,1));
使用内置对象操作时间
<span th:text="${#dates.format(date)}"></span>
<hr/>
<span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span>
<hr/>
<span th:text="${#dates.year(date)}"></span>
<span th:text="${#dates.month(date)}"></span>
<span th:text="${#dates.day(date)}"></span>
条件判断
| 语法 | 作用 |
|---|---|
| th:if | 条件判断 |
准备数据
model.addAttribute("sex","女");
进行条件判断
<div>
<span th:if="${sex} == '男'">
性别：男
</span>
<span th:if="${sex} == '女'">
性别：女
</span>
</div>
| 语法 | 作用 |
|---|---|
| th:switch/th:case | th:switch/th:case与Java中的switch语句等效。th:case="“表示Java中switch的default，即没有case的值为true时显示th:case=”"的内容。 |
准备数据
model.addAttribute("id","12");
进行条件判断
<div th:switch="${id}">
<span th:case="1">ID为1</span>
<span th:case="2">ID为2</span>
<span th:case="3">ID为3</span>
<span th:case="*">ID为*</span>
</div>
迭代遍历
| 语法 | 作用 |
|---|---|
| th:each | 迭代器，用于循环迭代集合 |
遍历集合
编写实体类
public class User {
private String id;
private String name;
private int age;
// 省略getter/setter/构造方法
}
准备数据
List<User> users = new ArrayList();
users.add(new User("1","sxt",23));
users.add(new User("2","baizhan",22));
users.add(new User("3","admin",25));
model.addAttribute("users",users);
在页面中展示数据
<table border="1" width="50%">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- 遍历集合的每一项起名为user -->
<tr th:each="user : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
</tr>
</table>
遍历Map
准备数据
Map<String,User> map = new HashMap();
map.put("user1",new User("1","sxt",23));
map.put("user2",new User("2","baizhan",22));
map.put("user3",new User("3","admin",25));
model.addAttribute("map",map);
遍历map
<table border="1" width="50%">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Key</th>
</tr>
<!-- 遍历出的是一个键值对对象，key获取键，value获取值 -->
<tr th:each="m : ${map}">
<td th:text="${m.value.id}"></td>
<td th:text="${m.value.name}"></td>
<td th:text="${m.value.age}"></td>
<td th:text="${m.key}"></td>
</tr>
</table>
使用状态变量
thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：
| 状态变量 | 含义 |
|---|---|
| index | 当前迭代器的索引，从0开始 |
| count | 当前迭代对象的计数，从1开始 |
| size | 被迭代对象的长度 |
| odd/even | 布尔值，当前循环是否是偶数/奇数，从0开始 |
| first | 布尔值，当前循环的是否是第一条，如果是返回true，否则返回false |
| last | 布尔值，当前循环的是否是最后一条，如果是则返回true，否则返回false |
使用状态变量
<!--冒号前的第一个对象是遍历出的对象，第二个对象是封装状态变量的对象-->
<tr th:each="user,status : ${users}">
<td th:text="${user.id}"></td>
<td th:text="${user.name}"></td>
<td th:text="${user.age}"></td>
<td th:text="${status.index}"></td>
<td th:text="${status.count}"></td>
<td th:text="${status.size}"></td>
<td th:text="${status.odd}"></td>
<td th:text="${status.even}"></td>
<td th:text="${status.first}"></td>
<td th:text="${status.last}"></td>
</tr>
获取域中的数据
thymeleaf也可以获取request，session，application域中的数据，方法如下：
准备数据
request.setAttribute("req","HttpServletRequest");
session.setAttribute("ses","HttpSession");
session.getServletContext().setAttribute("app","application");
获取域数据
request:<span th:text="${req}"></span><hr/>
session: <span th:text="${session.ses}"/><hr/>
application: <span th:text="${application.app}"/>
URL写法
在Thymeleaf中路径的写法为@{路径}
<a th:href="@{http://www.baidu.com}">百度</a>
<a th:href="@{http://www.baidu.com?id=1&name=sxt}">静态参数一</a>
<a th:href="@{http://www.baidu.com(id=2,name=bz)}">静态参数二</a>
添加动态参数
准备数据
model.addAttribute("id","100");
model.addAttribute("name","bzcxy");
在URL中添加参数
<a th:href="@{'http://www.baidu.com?id='+${id}+'&name='+${name}}">动态参数一</a>
<a th:href="@{http://www.baidu.com(id=${id},name=${name})}">动态参数二</a>
添加RESTful风格的参数
<a th:href="@{http://www.baidu.com/{id}/{name}(id=${id},name=${name})}">restful格式传递参数方式</a>
相关配置
在SpringBoot配置文件中可以进行Thymeleaf相关配置
| 配置项 | 含义 |
|---|---|
| spring.thymeleaf.prefix | 视图前缀 |
| spring.thymeleaf.suffix | 视图后缀 |
| spring.thymeleaf.encoding | 编码格式 |
| spring.thymeleaf.servlet.content-type | 响应类型 |
| spring.thymeleaf.cache=false | 页面缓存，配置为false则不启用页面缓存，方便测试 |
spring:
thymeleaf:
prefix: classpath:/templates/
suffix: .html
encoding: UTF-8
cache: false
servlet:
content-type: text/html
如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
