开发传统Java WEB工程时，我们可以使用JSP页面模板语言，但是在SpringBoot中已经不推荐使用了。Thymeleaf是SpringBoot官方所推荐使用的。
Thymeleaf的特点
-
动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，它既可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
-
开箱即用：它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
-
多方言支持：Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
-
与SpringBoot完美整合，SpringBoot提供了Thymeleaf的默认配置，并且为Thymeleaf设置了视图解析器，我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别，就是在模板语法上有区别。
Thymeleaf 字面量
文本字面量
用单引号'...'包围的字符串为文字面量，表示单引号本身需要转义\'。
<p> Now you are looking at a <span th:text="'working web application'">template file</span>. </p>
数字字面量
所见即所得，0,1,2,3…。
<p>The year is <span th:text="2013">1492</span>.</p>
boolean字面量
<div th:if="${user.isAdmin()} == false"> ... <!-- false在花括号外面，解析识别由Thymleaf自身完成 --> <div th:if="${user.isAdmin() == false}"> ... <!-- false写在花括号里面，解析识别由OGNL或者SpringEL负责 -->
null字面量
<div th:if="${variable.something} == null">
字符串拼接
方式一：
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
方式二：
使用“|”减少了字符串的拼接
<span th:text="|当前是第${page}页，共${page}页|"></span>
三目运算符
<span th:text="${sex eq 0} ? '男' : '女'">未知</span>
基本运算和关系判断
算术运算：+ , - , * , / , %
关系比较: > , < , >= , <= ( gt , lt , ge , le )
相等判断：== , != ( eq , ne )
标准表达式语法
${...} 变量表达式
用于访问 容器上下文环境 中的变量,例如:
<span th:text="${information}">
*{...} 选择变量表达式
选择表达式计算的是选定的对象 (th:object对象属性绑定的对象)，例如：
<div th:object="${session. user}" > Name: <span th: text=" *{firstName}" >Sebastian. Surname: <span th: text=" *{lastName}" >Pepper. Nationality: <span th: text=" *{nationality}" >Saturn. </div>
#{...} 消息表达式
一般用于 显示页面静态文本。将可能需要根据需求而整体变动的静态文本放在properties文件中,方便维护。通常与th:text属性一起使用。例如:
<!-- 新建 application.properties --> <p th: text=" #{application. username}" > <!-- 引用 application.properties 文件中的变量。 -->
@{...} 链接url表达式
用于链接。可以链接目录下的静态资源,也可以链接到后端请求处理接口,如:
<link th:src="@{/resources/css/bootstrap.min.css}" /> <li><a th:href="@{/forIndex}">首页</a></li> <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
工具对象表达式#maps
常用于 日期、集合、数组对象的访问 。这些工具对象就像是java对象,可以访问对应java对象的方法来进行各种操作。
<div th:if="${#maps.size(stu)!=0}"> ...do something... </div>
常用的对象表达式总结如下：
| #dates | java.util的实用方法。对象:日期格式、组件提取等。 |
| #calendars | 类似#dates，与java.util.Calendar对象对应 |
| #numbers | 格式化数字对象的工具方法 |
| #strings | 与java.lang.String对应的工具方法：contains、startsWith、prepending/appending等等 |
| #objects | 用于对象的工具方法 |
| #bools | 用于布尔运算的工具方法 |
| #arrays | 用于数组的工具方法 |
| #lists | 用于列表的工具方法 |
| #sets | 用于set的工具方法 |
| #maps | 用于map的工具方法 |
| #aggregates | 用于创建数组或集合的聚合的工具方法 |
| #messages | 用于在变量表达式内部获取外化消息的工具方法，与#{…}语法获取的方式相同 |
| #ids | 用于处理可能重复出现（例如，作为遍历的结果）的id属性的工具方法 |
| #httpServletRequest | 用于web应用中获取request请求的参数 |
| #session | 用于web应用中获取session的参数 |
常用属性
Thymeleaf语法的使用,都是通过在html页面的标签中添加th:xx关键字来实现模板套用,且其属性与html页面标签基本类似。
常用属性有:
| th:attr |
设置属性值。 <div th:attr="action=@{/subscribe}"> 多个属性一起设置，用逗号隔开。 <div th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> 设置自定义属性。 <div th:oldLogoUrl="#{logo}" /> |
| th:each |
对象遍历,用于遍历展示或者遍历录入。 <tr th:each="prod : ${prods}"> |
| th:action |
定义后台控制器路径,类似<form>标签的action属性。 <form th:action="@{/login}">...</form> |
| th:field |
常用于表单字段绑定。通常与th:object一起使用。 属性绑定、集合绑定。 注意：th:field取值时，后台不能用reques.setAttribute(）来传值，可以用model.addAttribute()来传值；而这两种方式th:value都可以接收。 <input type="text" value="" th:field="*{username}"/> |
| th:object |
用于表单数据对象绑定，将表单绑定到后台controller的一个JavaBean参数。常与th:field一起使用进行表单数据绑定。 @RequestMapping(value = "/login", method = RequestMethod.POST)
<form th:action="@{/login}" th:object="${loginBean}">...</form> |
| th:href |
定义超链接,类似<a>标签的href 属性。 <a th:href="@{/login}" th:unless=${session.user != null}>Login</a> /> |
| th:id |
id声明,类似html标签中的id属性。 <div th:id = "stu+(${rowStat.index}+1)"></div> |
| th:if |
条件判断。如果为否则标签不显示。 <div th:if="${rowStat.index} == 0">... do something ...</div> |
| th:include | 布局标签,替换内容到引入的文件 <head th:include="layout :: htmlhead" th:with="title='xx'"></head> /> |
| th:fragment | 布局标签,定义代码片段,其它引用 <div th:fragment="alert"> |
| th:src |
用于外部资源引入,类似于<script>标签的src属性,常与@{}一起使用。 <script th:src="@{/resources/js/jquery/jquery.json-2.4.min.js}" |
| th:text |
文本显示，用th:text不会解析html。 <td th:text="${username}" ></td> |
| th:utext | 用th:utext会解析html，在页面中显示相应的样式 |
| th:value |
属性赋值，类似<option>标签的value属性。 <input th:value="${user.name}" /> |
| th:inline |
定义js脚本可以使用变量。 <script th:inline="javascript"> |
| th:remove |
用于移除标签。 <a th:remove="${status}!=0?all:none" >未提交</a> 其中th:remove的参数有如下几种：
|
| th:style |
用于设置标签style。 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" |
| th:onclick |
用于设置点击事件。 <button th:οnclick="'getCollect()'"></button> |
Thymeleaf 遍历
遍历表格
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'"> <td th:text="${prod.name}">Onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> </tr>
若不指定状态变量，Thymeleaf会默认生成一个名为“变量名Stat”的状态变量：
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'"> <td th:text="${prod.name}">Onions</td> <td th:text="${prod.price}">2.41</td> <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> </tr>
遍历下拉框
model.addObject("supplierTypeList",sysCommonTypeInfoBoDao.selSysCommonTypeInfo2List(sysCommonTypeInfoBo)); <select id="supTypeSelect"> <option value="">请选择供应商分类</option> <option th:each="supplierType : ${supplierTypeList}" th:attr="value=${supplierType.id}" th:text="${supplierType.name}"></option> </select>
遍历状态：
- 当前遍历索引，从0开始，index属性
- 当前遍历索引，从1开始，count属性
- 总元素数量，size属性
- 每一次遍历的iter变量,current属性
- 当前遍历是even还是odd，even/odd布尔属性
- 当前遍历是第一个，first布尔属性
- 当前遍历是最后一个，last布尔属性
Thymeleaf 条件运算
th:if
th:if 不只运算布尔条件，它对以下情况也运算为true:
- 值不为null
值为boolean且为true
值为数字且非0
值为字符且非0
值是字符串且不是：“false”,“off”，“no”
值不是boolean、数字、字符、字符串
- 如果值为null，则th:if运算结果为false
th:unless
相当于if 中的 else，使用 if 和 unless 可以实现状态的判断显示达到 if-else 逻辑判断的效果
<td th:if="${test.Score} gt 0 and ${test.Score} lt 60">不及格</td> <td th:unless="${test.Score} gt 0 and ${test.Score} lt 60">及格</td>
th:switch 和 th:case
如果要实现if else if else 判断表达式，在thymeleaf要使用th:switch代替，th:case="*"表示默认，需写在最后
<div th:switch="${user.role}"> <p th:case="'admin'" >User is an administrator</p> <p th:case="#{roles.manager}" >User is a manager</p> <p th:case="*" >User is the manager</p> </div>
Thymeleaf 常用操作整理
在js中获取后台数据
<script th:inline="javascript">
var tag = [[${obj.tag}]];
</script>
select下拉框预选中
<select th:value="${questionBean.review}" id="review" name="review" class="form-control"> <option th:selected="${questionBean.review}=='0'" value="0">已发布</option> <option th:selected="${questionBean.review}=='1'" value="1">审核中</option> <option th:selected="${questionBean.review}=='2'" value="2">通过审核</option> <option th:selected="${questionBean.review}=='3'" value="3">未通过审核</option> </select>
