官方文档(基于3.0版本)，基于springboot项目的，建议直接从第三章Using Texts开始查阅：https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
Thymeleaf是spring boot推荐使用的模板语法，除此之外常见的模板语法还有Freemarker和jsp。jsp应该是java程序员最早接触的模板引擎，而Freemarker也很常见。
一.th属性
常用th属性解读
html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。
1.th:text : 设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。
2.th:value : 设置当前元素的value值，类似修改指定html标签属性的还有th:src,th:href。
3.th:each : 遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细看后文。
4.th:if : 条件判断，类似的还有th:unless，th:switch，th:case。
5.th:insert : 代码块引入，类似的还有th:replace，th:include，三者区别很大，若使用不恰当会破坏html结构，常用于公共代码块的提取复用。
6.th:fragment : 定义代码块，方便被th:insert引用。
7.th:object : 声明变量，一般和*{}一起配合使用，达到偷懒的效果。
- th:attr : 修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙。
常用th属性使用
使用Thymeleaf属性需要注意一下五点：
一.若要使用Thymeleaf语法，首先要声明名称空间
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
二.设置文本内容th:text ，设置input的值th:value ，循环输出th:each ，条件判断th:if，插入代码块th:insert，定义代码块th:fragment，声明变量th:object
三.th:each 的用法需要格外注意，打个比方：如果你要循环一个div中的p标签，则th:each属性必须放在p标签上。若你将th:each放在div上，则循环的将是整个div。
四.变量表达式中提供了很多内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。
五.th:insert,th:replace,th:include三种插入代码块的效果相似，但区别很大。
举个栗子，后续会详细说明：
别忘了引入maven依赖，本文用的是springboot环境：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
项目结构：
捕获.PNG
<!DOCTYPE html>
<!--名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf 语法</title>
</head>
<body>
<h2>hymeleaf 语法</h2>
<!--th:text 设置当前元素的文本内容，常用，优先级不高-->
<p th:text="${thText}" />
<p th:utext="${thUText}"/>
<!--th:value 设置当前元素的value值，常用，优先级仅比th:text高-->
<input type="text" th:value="${thValue}" />
<!--th:object 声明变量，和*{} 一起使用-->
<div th:object="${thObject}">
<p>ID: <span th:text="*{id}" /></p><!--th:text="${thObject.id}"-->
<p>TH: <span th:text="*{thName}" /></p><!--${thObject.thName}-->
<p>DE: <span th:text="*{desc}" /></p><!--${thObject.desc}-->
</div>
<!--th:each 遍历列表，常用，优先级很高，仅此于代码块的插入-->
<!--th:each 修饰在div上，则div层重复出现，若只想p标签遍历，则修饰在p标签上-->
<div th:each="message : ${thEach}"> <!-- 遍历整个div-p，不推荐-->
<p th:text="${message}" />
</div>
<!--只遍历p，推荐使用-->
<div>
<p th:each="user : ${ulist}" th:object="${user}">
<span th:text="*{id}"></span>
<span th:text="*{name}"></span>
<span th:text="*{phone}"></span>
</p>
</div>
<!--th:if 条件判断，类似的有th:switch，th:case，优先级仅次于th:each, 其中#strings是变量表达式的内置方法-->
<p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>
<!--th:insert 把代码块插入当前div中，优先级最高，类似的有th:replace，th:include，~{} ：代码块表达式 -->
<div th:insert="~{template/footer :: copy}"></div>
<div th:replace="~{template/footer :: copy}"></div>
<div th:include="~{template/footer :: copy}"></div>
</body>
</html>
后台给负责给变量赋值，和跳转页面。
@RequestMapping("/admin")
public String toAdmin(Model model){
PageHelper.startPage(1,10);
PageHelper.orderBy("id desc");
List<InterUser> ulist = interUserService.selectInterUserList();
model.addAttribute("ulist",ulist);
model.addAttribute("thText","thText1");
model.addAttribute("thUText","thUText1");
model.addAttribute("thValue","thValue1");
model.addAttribute("thEach", Arrays.asList("th:each", "遍历列表"));
model.addAttribute("thIf", "msg is not null");
model.addAttribute("thObject", new ThObject(1L, "th:object", "用来偷懒的th属性"));
return "/admin/admin";
}
二.标准表达式语法
变量表达式：
${...}
链接表达式：
@{...}
消息表达式：
#{...}
代码块表达式：
~{...}
选择变量表达式
*{...}
变量表达式使用频率最高，其功能也是非常的丰富。所以我们先从简单的代码块表达式开始，然后是消息表达式，再是链接表达式，最后是变量表达式，随带介绍选择变量表达式。
~{...}代码块表达式
支持两种语法
推荐：
~{templatename :: fragmentname}
支持：
~{templatename :: #id}
templatename : 模板名，Thymeleaf会根据模板名解析完整路径：/resources/templates/templatename.html，要注意文件的路径。
<div th:insert="~{template/footer :: copy}"></div>
<div th:replace="~{template/footer :: copy}"></div>
<div th:include="~{template/footer :: copy}"></div>
捕获.PNG
fragment : 片段名，Thymeleaf通过th:fragment声明定义代码块，即th:fragment="fragmentname"
id : HTML的id选择器，使用时要在前面加上#号，不支持class选择器
代码块的声明:
此项目中所有需要复用的html代码块为了统一都放入了/resources/templates/template/文件夹下
footer.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
</body>
</html>
代码块表达式的使用
代码块表达式需要配合th属性（th:insert，th:replace，th:include）一起使用。
th:insert：将代码块片段整个插入到使用了th:insert的HTML标签中，
th:replace：将代码块片段整个替换使用了th:replace的HTML标签中，
th:include：将代码块片段包含的内容插入到使用了th:include的HTML标签中，
用一个官方例子来区分三者的不同。
<!--三种不同的引入方式-->
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
生成的html如下：
<!--th:insert是在div中插入代码块，即多了一层div-->
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<!--th:replace是将代码块代替当前div，其html结构和之前一致-->
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<!--th:include是将代码块footer的内容插入到div中，即少了一层footer-->
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
#{...}消息表达式
消息表达式一般用于国际化的场景。结构：th:text="#{msg}"
@{...}链接表达式
链接表达式好处
不管是静态资源的引用，form表单的请求，凡是链接都可以用@{...} 。这样可以动态获取项目路径，即便项目名变了，依然可以正常访问
#修改项目名，链接表达式会自动修改路径，避免资源文件找不到
server.context-path=/emp
链接表达式结构
无参：
@{/xxxx}
有参：
@{/xxxx(k1=v1,k2=v2)}
//对应的url结构如下
xxxx?k1=v1&k2=v2
引入本地资源
@{/项目本地的资源路径}
引入外部资源：
@{/webjars/资源在jar包中的路径}
举例：
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{/main/css/itdragon.css}" rel="stylesheet">
<form class="form-login" th:action="@{/user/login}" th:method="post" >
<a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/login.html(l='en_US')}">English</a>
${...}变量表达式
变量表达式有丰富的内置方法，使其更强大，更方便。
变量表达式功能
一、可以获取对象的属性和方法
二、可以使用ctx，vars，locale，request，response，session，servletContext内置对象
三、可以使用dates，numbers，strings，objects，arrays，lists，sets，maps等内置方法（重点介绍）
常用的内置对象
一、ctx ：上下文对象。
二、vars ：上下文变量。
三、locale：上下文的语言环境。
四、request：（仅在web上下文）的 HttpServletRequest 对象。
五、response：（仅在web上下文）的 HttpServletResponse 对象。
六、session：（仅在web上下文）的 HttpSession 对象。
七、servletContext：（仅在web上下文）的 ServletContext 对象
这里以常用的Session举例，用户刊登成功后，会把用户信息放在Session中，Thymeleaf通过内置对象将值从session中获取。
// java 代码将用户名放在session中
session.setAttribute("userinfo",username);
// Thymeleaf通过内置对象直接获取
th:text="${session.userinfo}"
常用的内置方法
一、strings：字符串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
二、numbers：数值格式化方法，常用的方法有：formatDecimal等
三、bools：布尔方法，常用的方法有：isTrue，isFalse等
四、arrays：数组方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
五、lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
六、maps：对象方法，常用的方法有：size，isEmpty，containsKey，containsValue等
七、dates：日期方法，常用的方法有：format，year，month，hour，createNow等
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>Thymeleaf 内置方法</h2>
<h3>#strings</h3>
<div th:if="${not #strings.isEmpty(itdragonStr)}">
<p>Old Str : <span th:text="${itdragonStr}"></span></p>
<p>toUpperCase : <span th:text="${#strings.toUpperCase(itdragonStr)}"></span></p>
<p>toLowerCase : <span th:text="${#strings.toLowerCase(itdragonStr)}"></span></p>
<p>equals : <span th:text="${#strings.equals(itdragonStr,'itdragonblog')}"></span></p>
<p>equalsIgnoreCase : <span th:text="${#strings.equalsIgnoreCase(itdragonStr,'itdragonblog')}"></span></p>
<p>indexOf ： <span th:text="${#strings.indexOf(itdragonStr,'r')}"></span></p>
<p>substring : <span th:text="${#strings.substring(itdragonStr,2,8)}"></span></p>
<p>replace : <span th:text="${#strings.replace(itdragonStr,'it','IT')}"></span></p>
<p>startsWith : <span th:text="${#strings.startsWith(itdragonStr,'it')}"></span></p>
<p>contains : <span th:text="${#strings.contains(itdragonStr,'IT')}"></span></p>
</div>
<h3>#numbers</h3>
<div>
<p>formatDecimal 整数部分随意，小数点后保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,0,2)}"></span></p>
<p>formatDecimal 整数部分保留五位数，小数点保留两位，四舍五入：<span th:text="${#numbers.formatDecimal(itdragonNum,4,2)}"></span></p>
</div>
<h3>#bools </h3>
<div th:if="${#bools.isTrue(itdragonBool)}">
<p th:text="${itdragonBool}"></p>
</div>
<h2>#arrays </h2>
<div th:if="${not #arrays.isEmpty(itdragonArray)}">
<p>length : <span th:text="${#arrays.length(itdragonArray)}"></span></p>
<p>contains : <span th:text="${#arrays.contains(itdragonArray,5)}"></span></p>
<p>containsAll : <span th:text="${#arrays.containsAll(itdragonArray,itdragonArray)}"></span></p>
</div>
<h3>#lists </h3>
<div th:if="${not #lists.isEmpty(itdragonList)}">
<p>size : <span th:text="${#lists.size(itdragonList)}"></span></p>
<p>contains : <span th:text="${#lists.contains(itdragonList,0)}"></span></p>
<p>sort : <span th:text="${#lists.sort(itdragonList)}"></span></p>
</div>
<h3>#maps </h3>
<div th:if="${not #maps.isEmpty(itdragonMap)}">
<p>size : <span th:text="${#maps.size(itdragonMap)}"></span></p>
<p>containKey : <span th:text="${#maps.containsKey(itdragonMap,'thName')}"></span></p>
<p>containValue : <span th:text="${#maps.containsValue(itdragonMap,'#maps')}"></span></p>
<p><span th:text="${itdragonMap.thName}"></span></p>
</div>
<h3>#dates </h3>
<div>
<p>format : <span th:text="${#dates.format(itdragonDate)}"></span></p>
<p>custom format : <span th:text="${#dates.format(itdragonDate,'yyyy-MM-dd HH:mm:ss')}"></span></p>
<p>day : <span th:text="${#dates.day(itdragonDate)}"></span></p>
<p>month : <span th:text="${#dates.month(itdragonDate)}"></span></p>
<p>monthName : <span th:text="${#dates.monthName(itdragonDate)}"></span></p>
<p>year : <span th:text="${#dates.year(itdragonDate)}"></span></p>
<p>dayOfWeek : <span th:text="${#dates.dayOfWeek(itdragonDate)}"></span></p>
<p>dayOfWeekName : <span th:text="${#dates.dayOfWeekName(itdragonDate)}"></span></p>
<p>hour : <span th:text="${#dates.hour(itdragonDate)}"></span></p>
<p>minute : <span th:text="${#dates.minute(itdragonDate)}"></span></p>
<p>second : <span th:text="${#dates.second(itdragonDate)}"></span></p>
<p>createNow : <span th:text="${#dates.createNow()}"></span></p>
</div>
</body>
</html>
后台负责给变量赋值，和跳转页面。
@RequestMapping("/tofunc")
public String toFunc(ModelMap map){
map.put("itdragonStr","itdragonBlog");
map.put("itdragonBool",true);
map.put("itdragonArray",new Integer[]{1,2,3,4});
map.put("itdragonList", Arrays.asList(1,3,2,4,0));
Map itdragonMap = new HashMap();
itdragonMap.put("thName","${#...}");
itdragonMap.put("desc","变量表达式内置方法");
map.put("itdragonMap",itdragonMap);
map.put("itdragonDate",new Date());
map.put("itdragonNum",888.888D);
return "admin/func";
}
网友评论