Thymeleaf
Spring Boot中推荐使用Thymeleaf作为模板引擎,因为Thymeleaf提供了完美的Spring MVC支持,它是一个跟Velocity、FreeMarker类似的模板引擎,它可以完全替代JSP。相较与其他的模板引擎,它有如下三个极吸引人的特点
Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持html原型,然后在html标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释html时会忽略未定义的标签属性,所以thymeleaf的模板可以静态地运行;当有数据返回到页面时,
Thymeleaf标签会动态地替换掉静态内容,使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和Spring标准两种方言,可以直接套用模板实现JSTL、OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Thymeleaf 提供Spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
依赖
<!-- 引入thymeleaf依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
开始使用
前端html页面标签中引入如下:
<html xmlns:th="http://www.thymeleaf.org">
一、Html部分
获取变量方式
<Badge text="Html" type="warning"/>
<div>
<p>1、获取对象中的userName属性:[[${user.userName}]]</p>
<p>2、获取集合中的元素:[[${users[0].userName}]]</p>
<p>3、获取Map中的元素:[[${userMap['user2'].userName}]]</p>
<p>4、获取数组中的元素:[[${userArr[0].userName}]]</p>
</div>
处理转义文本
<Badge text="Html" type="warning"/>
<div th:with="html='<h3>Html</h3>'">
<p>1、转义字符输出 <p th:text="${html}"></p>
<p>2、无需字符转义 <p th:utext="${html}"></p>
</div>
链接表达式
<Badge text="Html" type="warning"/>
<div>
<a th:href="@{/user/details(userId=${user.userId})}">设置单个URL参数</a>
<a th:href="@{/user/details(userId=${user.userId},name=${user.userName})}">设置多个URL参数</a>
<a th:href="@{/user/{userId}/details(userId=${user.userId})}">设置rest风格参数</a>
</div>
数字对象
<Badge text="Html" type="warning"/>
Thymeleaf主要使用org.thymeleaf.expression.Numbers这个类来处理数字,在模板中使用#numbers来表示这个对象。
<div th:with="num=1000">
1、整数格式化
<p>[[${#numbers.formatInteger(num,5)}]]</p>
<p th:each="arrNum : ${#numbers.arrayFormatInteger(arr,5)}">[[${arrNum}]]</p>
<p>[[${#numbers.listFormatInteger(list,5)}]]</p>
<p>[[${#numbers.setFormatInteger(set,5)}]]</p>
2、小数格式化
<p>[[${#numbers.formatDecimal(10.992, 3, 2)}]]</p>
<p th:each="arrNum : ${#numbers.arrayFormatDecimal(arr, 3, 2)}">[[${arrNum}]]</p>
<p>[[${#numbers.listFormatDecimal(list, 3, 2)}]]</p>
<p>[[${#numbers.setFormatDecimal(set, 3, 2)}]]</p>
3、标识千位分隔符
<p>POINT使用"."作为分隔符:[[${#numbers.formatInteger(num,5,'POINT')}]]</p>
<p>COMMA使用","作为分隔符:[[${#numbers.formatInteger(num,5,'COMMA')}]]</p>
<p>WHITESPACE使用" "作为分隔符:[[${#numbers.formatInteger(num,5,'WHITESPACE')}]]</p>
4、货币格式化
<p>[[${#numbers.formatCurrency(10.99)}]]</p>
<p>arrayFormatCurrency、listFormatCurrency、setFormatCurrency和上面一样,就不演示了</p>
5、百分比格式化
<p>[[${#numbers.formatPercent(0.23456, 2, 3)}]]</p>
</div>
字符串对象
<Badge text="Html" type="warning"/>
Thymeleaf主要使用org.thymeleaf.expression.Strings这个类来处理数字,在模板中使用#strings来表示这个对象。
<div th:with="html='<h3>框架</h3>'">
1、toString与length方法
<p>toString方法:[[${#strings.toString(user)}]]</p>
<p>length方法:[[${#strings.length(user)}]]</p>
2、非空判断与默认值处理
<p>isEmpty方法:[[${#strings.isEmpty(user.userName)}]]</p>
<p>defaultString方法:[[${#strings.defaultString(user.sex, '无性别')}]]</p>
3、包含判断
<p>contains方法:[[${#strings.contains(user.userName, '张三')}]]</p>
<p>containsIgnoreCase方法:[[${#strings.containsIgnoreCase(user.userName, '张三')}]]</p>
<p>startsWith方法:[[${#strings.startsWith(user.userName, '张')}]]</p>
<p>endsWith方法:[[${#strings.endsWith(user.userName, '三')}]]</p>
4、截取与替换
<p>indexOf方法:[[${#strings.indexOf('abcde', 'z')}]]</p>
<p>substring方法:[[${#strings.substring('abcde', 1, 3)}]]</p>
<p>substringAfter方法:[[${#strings.substringAfter('abcde', 'a')}]]</p>
<p>substringBefore方法:[[${#strings.substringBefore('abcde', 'c')}]]</p>
<p>replace方法:[[${#strings.replace('abcde', 'c', '1')}]]</p>
5、追加与拼接
<p>prepend方法:[[${#strings.prepend(3, 'e')}]]</p>
<p>append方法:[[${#strings.append('abcd', 'e')}]]</p>
<p>concat方法:[[${#strings.concat('abcd', 'e', 'b')}]]</p>
<p>concatReplaceNulls方法:[[${#strings.concatReplaceNulls('**', '123', null, 'abc')}]]</p>
6、分割与连接
<p class="text-left" th:each="array : ${#strings.arraySplit('a-b-c', '-')}">arraySplit方法:[[${array}]]</p>
<p>listSplit方法:[[${#strings.arrayJoin(new String[]{'a','b','c'}, '-')}]]</p>
<p>listSplit、setSplit、listJoin、setJoin和上面一样,就不演示了</p>
7、大小写转换
<p>toUpperCase:[[${#strings.toUpperCase('spring boot')}]]</p>
<p>toLowerCase:[[${#strings.toLowerCase('Spring Boot')}]]</p>
<p>capitalize:[[${#strings.capitalize('spring boot')}]]</p>
<p>unCapitalize:[[${#strings.unCapitalize('Spring boot')}]]</p>
<p>capitalizeWords:[[${#strings.capitalizeWords('spring boot')}]]</p>
<p>capitalizeWords:[[${#strings.capitalizeWords('spring-boot', '-')}]]</p>
8、其他处理
<p>trim:[[${#strings.trim(' spring boot ')}]]</p>
<p>abbreviate:[[${#strings.abbreviate('SpringBooot', 9)}]]</p>
<p>randomAlphanumeric:[[${#strings.randomAlphanumeric(5)}]]</p>
</div>
日期对象
<Badge text="Html" type="warning"/>
Thymeleaf主要使用org.thymeleaf.expression.Dates这个类来处理日期,在模板中使用#dates来表示这个对象。
<div>
1、格式化日期
<p>[[${#dates.format(date)}]]</p>
<p>[[${#dates.formatISO(date)}]]</p>
<p>[[${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}]]</p>
2、获取日期字段
<p>获取当前的年份:[[${#dates.year(date)}]]</p>
<p>获取当前的月份:[[${#dates.month(date)}]]</p>
<p>获取当月的天数:[[${#dates.day(date)}]]</p>
<p>获取当前的小时:[[${#dates.hour(date)}]]</p>
<p>获取当前的分钟:[[${#dates.minute(date)}]]</p>
<p>获取当前的秒数:[[${#dates.second(date)}]]</p>
<p>获取当前的毫秒:[[${#dates.millisecond(date)}]]</p>
<p>获取当前的月份名称:[[${#dates.monthName(date)}]]</p>
<p>获取当前是星期几:[[${#dates.dayOfWeek(date)-1}]]</p>
</div>
常用语法
<Badge text="Html" type="warning"/>
# 表达式
<p><strong>字符串常量</strong> - <span th:text="'hello , word'"></span></p>
<p><strong>数字常量</strong> - <span th:text="2019 + 2"></span></p>
<p><strong>布尔值常量</strong> - <span th:text="${result}"></span></p>
<p><strong>空值常量</strong> - <span th:text="${result == null}"></span></p>
#字符串拼接
<p><strong>方法一</strong> - <span th:text="${#strings.append('abc', 'd')}"></span></p>
<p><strong>方法二</strong> - <span th:text="${#strings.concat('abc', 'd')}"></span></p>
<p><strong>方法三</strong> - <span th:text="${'abc' + 'd'}"></span></p>
<p><strong>方法四</strong> - <span th:text="'abc' + 'd'"></span></p>
<p><strong>方法五</strong> - <span th:text="abc + d"></span></p>
<p><strong>方法六</strong> - <span th:text="|abc| + |d|"></span></p>
#算数运算符
<p><strong>3 + 2 = </strong> <span th:text="${3 + 2}"></span></p>
<p><strong>5 - 2 = </strong> <span th:text="${5 - 2}"></span></p>
<p><strong>5 * 2 =</strong> <span th:text="${5* 2}"></span></p>
<p><strong>5 / 2 =</strong> <span th:text="5.0 / 2"></span></p>
<p><strong>5 % 2 =</strong> <span th:text="5 % 2"></span></p>
#关系运算
<p><strong>1 > 1 = </strong> <span th:text="${1 gt 1}"></span></p>
<p><strong>1 < 1 = </strong> <span th:text="${1 lt 1}"></span></p>
<p><strong>1 >= 1 = </strong> <span th:text="${1 ge 1}"></span></p>
<p><strong>1 <= 1 = </strong> <span th:text="${1 le 1}"></span></p>
<p><strong>1 == 1 = </strong> <span th:text="${1 eq 1}"></span></p>
<p><strong>1 != 1 = </strong> <span th:text="${1 ne 1}"></span></p>
#三目运算符
<p><strong>方法一</strong> <span th:text="${1 != 1} ? |条件成立| : |条件不成立|"></span></p>
<p><strong>方法二</strong> <span th:text="${value == 'ruoyi'} ? ${value} : |默认值|"></span></p>
<p><strong>方法三(不成立返回空)</strong> <span th:text="${1 != 1} ? |条件成立|"></span></p>
#属性设置
<p>1、单个属性值设置:<input type="submit" value="提交" th:attr="value=#{user.login.success}"></input></p>
<p>2、多个属性值设置:<input type="submit" value="提交" th:attr="value=#{user.login.success},class='btn btn-primary'"></input></p>
<p>3、设置单个HTML节点属性:<input type="submit" value="提交" th:value="#{user.login.success}"></input></p>
<p>4、设置多个HTML节点属性:<input type="submit" value="提交" th:value="#{user.login.success}" th:class="'btn btn-primary'"></input></p>
<p>5、属性值后面拼接:<div id="imgDiv" th:attrappend="id='-dataId'"></div></p>
<p>6、属性值前面拼接:<div id="imgDiv" th:attrprepend="id='dataId-'"></div></p>
<p>7、属性添加style样式:<div style="text-align: left;" th:styleappend="'color:red'">style样式</div></p>
<p>8、属性添加class样式:<div class="btn btn-primary btn-xs" th:classappend="'btn-rounded'">class样式</div></p>
#条件判断
<ul th:with="value=ruoyi">
<li>
<p><strong>方法一</strong> - <span th:if="0">数字类型,如果为0,不显示</span></p>
<p><strong>方法二</strong> - <span th:if="false">false、off、no 不显示</span></p>
<select th:with="sex=1" th:switch="${sex}">
<option th:case="0">男</option>
<option th:case="1">女</option>
</select>
</li>
</ul>
#list数据迭代
<table>
<tr th:each="user : ${users}">
<td th:text="${user.userName}"></td>
</tr>
</table>
#map数据迭代
<table>
<tr th:each="map : ${userMap}">
<td th:text="${map.key}"></td>
<td th:text="${map.value.userName}"></td>
</tr>
</table>
#数据状态对象
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>从0开始的索引</th>
<th>从1开始的索引</th>
<th>数据集合大小</th>
<th>是否第一次迭代</th>
<th>是否最后一次迭代</th>
<th>是否偶数次迭代</th>
<th>是否奇数次迭代</th>
</tr>
</thead>
<tbody>
<tr th:each="user,state : ${users}">
<td th:text="${user.userName}"></td>
<td th:text="${state.index}"></td>
<td th:text="${state.count}"></td>
<td th:text="${state.size}"></td>
<td th:text="${state.first}"></td>
<td th:text="${state.last}"></td>
<td th:text="${state.even}"></td>
<td th:text="${state.odd}"></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>从0开始的索引</th>
<th>从1开始的索引</th>
<th>数据集合大小</th>
<th>是否第一次迭代</th>
<th>是否最后一次迭代</th>
<th>是否偶数次迭代</th>
<th>是否奇数次迭代</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.userName}"></td>
<td th:text="${userStat.index}"></td>
<td th:text="${userStat.count}"></td>
<td th:text="${userStat.size}"></td>
<td th:text="${userStat.first}"></td>
<td th:text="${userStat.last}"></td>
<td th:text="${userStat.even}"></td>
<td th:text="${userStat.odd}"></td>
</tr>
</tbody>
</table>
#星号表达式
<table class="table">
<thead>
<tr>
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}" th:object="${user}">
<td th:text="*{userId}"></td>
<td th:text="*{userName}"></td>
</tr>
</tbody>
</table>
模板片段
<Badge text="Html" type="warning"/>
<div th:with="year=2019">
<div th:with="result=true">
<p class="text-danger">定义与引用模板片段(~{模板名称::选择器})</p>
th:insert : 保留自己的主标签,保留th:fragment的主标签。
<div th:insert="~{fragment/footer.html :: copy}"></div>
th:replace :不要自己的主标签,保留th:fragment的主标签。
<div th:replace="~{fragment/footer.html :: copy}"></div>
th:include :保留自己的主标签,不要th:fragment的主标签。
<div th:include="~{fragment/footer.html :: copy}"></div>
</div>
</div>
<div th:with="userName='张三',deptName='技术部'">
1、使用常量传参
<div th:replace="~{fragment/param.html :: welcome('张三','技术部')}"></div>
2、使用变量传参
<div th:replace="~{fragment/param.html :: welcome(${userName},${deptName})}"></div>
3、不传入参数情况(不会出现异常)
<div th:replace="~{fragment/param.html :: welcome_1}"></div>
4、不显示指定片段参数
<div th:replace="~{fragment/param.html :: welcome_1(val1='张三', val2='技术部')}"></div>
5、片断块引用
<table class="table">
<thead>
<tr>
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
</div>
选择器的基础语法
<Badge text="Html" type="warning"/>
<div>
1、选择直接子节点id为footerA的div
<p><div th:insert="~{fragment/select.html :: /div[@id='footerA']}"></div></p>
2、选择全部子节点中id为footerB的div
<p><div th:insert="~{fragment/select.html :: //div[@id='footerB']}"></div></p>
3、选择class为content的span节点
<p><div th:insert="~{fragment/select.html :: span[@class='content']}"></div></p>
4、选择class为footerG的span(有多个),选出第一个
<p><div th:insert="~{fragment/select.html :: //span[@class='footerG'][0]}"></div></p>
5、选择class为footerContent并且id为footerE的span(多级筛选)
<p><div th:insert="~{fragment/select.html :: //div[@class='footerContent']//span[@id='footerE']}"></div></p>
</div>
删除模板
<Badge text="Html" type="warning"/>
# 普通方法
<p><div th:if="false">我是当前节点<div>我是子节点</div></div></p>
# all删除包含标签和所有的子节点
<table class="table">
<thead>
<tr th:remove="all">
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
# body不包含标记删除,但删除其所有的子节点
<table class="table">
<thead>
<tr th:remove="body">
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
# tag包含标记的删除,但不删除它的子节点
<table class="table">
<thead>
<tr th:remove="tag">
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
# 删除所有包含标签的孩子,除了第一个
<table class="table">
<thead>
<tr th:remove="all-but-first">
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
#什么也不做
<table class="table">
<thead>
<tr th:remove="none">
<th>用户ID</th>
<th>用户名</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.userId}"></td>
<td th:text="${user.userName}"></td>
</tr>
</th:block>
</tbody>
</table>
模板注释
<Badge text="Html" type="warning"/>
<!-- 你看的见我 -->
<!--/* 你看不见我 */-->
内联语法显示文本
<Badge text="Html" type="warning"/>
<div th:with="html='<h3>若依框架</h3>'">
1、text标签显示
<p><div th:text="${html}"></div></p>
2、内联显示
<p><div>[[${html}]]</div></p>
3、utext标签显示
<p><div th:utext="${html}"></div></p>
4、内联显示
<p><div>[(${html})]</div></p>
5、关闭内联语法
<p><div th:inline="none">[[${html}]]</div></p>
</div>
二、javascript
<script th:inline="javascript">
var userName = [[${user.userName}]]
// alert(userName);
</script>
# 注释
<script th:inline="javascript">
<!-- test1
function test1{
}
!-->
/*[+ test2
function test2{
}
+]*/
/*[- test3 */
function test3{
}
/* -]*/
</script>
# 序列化
<script th:inline="javascript">
// javabean
var user = {"id":1,"name":"张三"};
//alert(user.name);
// list
var users = [{"id":1,"name":"张三"},{"id":2,"name":"李四"}];
//alert(users.length);
// map
var map = {"user1":{"id":1,"name":"张三"},"user2":{"id":1,"name":"李四"}};
//alert(map.user1.name);
</script>
三、CSS部分
变量使用
<Badge text="CSS" type="warning"/>
<div th:with="color='red'">
<style th:inline="css">
.my-text{
color: [[${color}]]
}
</style>
</div>
注释
<Badge text="CSS" type="warning"/>
<style th:inline="css">
<!-- test1
.test1{
color: [[${color}]]
}
!-->
/*[+ test2
.test2{
color: [[${color}]]
}
+]*/
/*[- test3 */
.test3{
color: [[${color}]]
}
/* -]*/
</style>
四、直接调用后台接口
- 后端定义一个Service 并注解命名
@Service("dict")
定义一个方法为:getType(String dictType)
- 前端调用
th:with="type=${@dict.getType('形参')}"
@Service("dict")
public class DictService
{
@Autowired
private ISysDictTypeService dictTypeService;
/**
* 根据字典类型查询字典数据信息
*
* @param dictType 字典类型
* @return 参数键值
*/
public List<SysDictData> getType(String dictType)
{
return dictTypeService.selectDictDataByType(dictType);
}
}
html方式调用后台
<Badge text="Html" type="warning"/>
<div>
用户状态: <select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
<option value="">所有</option>
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
javascript方式调用后台
<Badge text="JS" type="warning"/>
注意script需要添加th:inline="javascript"
<script th:inline="javascript">
var datas = [[${@dict.getType('sys_normal_disable')}]];
// alert(datas[0].dictValue);
</script>
五、自定义Th标签
在使用Thymeleaf模板引擎开发页面时,我们可以自定义一些通用的标签,来简化开发、降低代码量,下面我以开发中常见的下拉选为例,使用Thymeleaf自定义一个下拉选择字典数据的公共组件。
- 创建自定义标签构建类
import java.util.ArrayList;
import java.util.List;
import org.thymeleaf.context.ITemplateContext;
import org.thymeleaf.model.IModel;
import org.thymeleaf.model.IModelFactory;
import org.thymeleaf.model.IProcessableElementTag;
import org.thymeleaf.processor.element.AbstractElementTagProcessor;
import org.thymeleaf.processor.element.IElementTagStructureHandler;
import org.thymeleaf.templatemode.TemplateMode;
import org.unbescape.html.HtmlEscape;
/**
* 自定义标签<dict:select>实现下拉框
*
* @author
*/
public class SelectElementTagProcessor extends AbstractElementTagProcessor
{
private static final String TAG_NAME = "select";
private static final int PRECEDENCE = 1000;
private ISysDictTypeService dictService = SpringUtils.getBean(ISysDictTypeService.class);
public SelectElementTagProcessor(final String dialectPrefix)
{
super(TemplateMode.HTML, // 处理thymeleaf 的模型
dialectPrefix, // 标签前缀名
TAG_NAME, // 标签属性名
true, // Apply dialect prefix to tag name
null, // No attribute name: will match by tag name
false, // No prefix to be applied to attribute name
PRECEDENCE); // Precedence (inside dialect's own precedence)
}
@Override
protected void doProcess(final ITemplateContext context, final IProcessableElementTag tag,
final IElementTagStructureHandler structureHandler)
{
// html空格占位符
List<String> options = new ArrayList<>();
// 获取相关属性值
String classValue = tag.getAttributeValue("class");
final String id = tag.getAttributeValue("id");
final String name = tag.getAttributeValue("name");
final String style = tag.getAttributeValue("style");
final Boolean headerKey = Boolean.parseBoolean(tag.getAttributeValue("headerKey"));
final String headerValue = tag.getAttributeValue("headerValue");
final String dict = tag.getAttributeValue("dict");
if (StringUtils.isNotEmpty(dict))
{
List<SysDictData> dictDatas = dictService.selectDictDataByType(dict);
for (SysDictData dictData : dictDatas)
{
StringBuilder option = new StringBuilder();
option.append("<option value=\"");
option.append(dictData.getDictValue());
option.append("\">");
option.append(dictData.getDictLabel());
option.append("</option>");
options.add(option.toString());
}
if (headerKey != null && headerValue != null)
{
StringBuilder defaultOption = new StringBuilder();
defaultOption.append("<option value=\"").append(headerKey).append("\"");
defaultOption.append(">").append(headerValue).append("</option>");
options.add(0, defaultOption.toString());
}
}
// 创建模型
final IModelFactory modelFactory = context.getModelFactory();
final IModel model = modelFactory.createModel();
model.add(modelFactory.createText("\n\t"));
// 添加模型元素
IProcessableElementTag openElementTag = modelFactory.createOpenElementTag("select", "class", classValue);
if (StringUtils.isNotEmpty(id))
{
openElementTag = modelFactory.setAttribute(openElementTag, "id", id);
}
if (StringUtils.isNotEmpty(name))
{
openElementTag = modelFactory.setAttribute(openElementTag, "name", name);
}
if (StringUtils.isNotEmpty(style))
{
openElementTag = modelFactory.setAttribute(openElementTag, "style", style);
}
model.add(openElementTag);
model.add(modelFactory.createText("\n\t\t"));
model.add(modelFactory.createText(HtmlEscape.unescapeHtml(String.join("\n\t\t", options))));
model.add(modelFactory.createText("\n\t"));
model.add(modelFactory.createCloseElementTag("select"));
// 替换页面标签
structureHandler.replaceWith(model, false);
}
}
创建自定义标签注册类
<Badge text="Java" type="warning"/>
import java.util.HashSet;
import java.util.Set;
import org.thymeleaf.dialect.AbstractProcessorDialect;
import org.thymeleaf.processor.IProcessor;
import org.thymeleaf.standard.StandardDialect;
/**
* 自定义字典标签
*
* @author
**/
public class DictDialect extends AbstractProcessorDialect
{
/**
* 定义方言名称
*/
private static final String NAME = "Dict";
/**
* 定义方言属性
*/
public static final String PREFIX = "dict";
public DictDialect()
{
super(NAME, PREFIX, StandardDialect.PROCESSOR_PRECEDENCE);
}
@Override
public Set<IProcessor> getProcessors(final String dialectPrefix)
{
final Set<IProcessor> processors = new HashSet<>();
processors.add(new SelectElementTagProcessor(dialectPrefix));
return processors;
}
}
模板引擎加入配置
import java.util.Collection;
import java.util.Collections;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.thymeleaf.dialect.IDialect;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.thymeleaf.templateresolver.ITemplateResolver;
/**
* Thymeleaf配置.
*
* @author
*/
@Configuration
public class ThymeleafConfig
{
@Autowired
private Collection<ITemplateResolver> templateResolvers = Collections.emptySet();
@Autowired(required = false)
private Collection<IDialect> dialects = Collections.emptySet();
@Bean
public SpringTemplateEngine templateEngine()
{
SpringTemplateEngine engine = new SpringTemplateEngine();
for (ITemplateResolver templateResolver : this.templateResolvers)
{
engine.addTemplateResolver(templateResolver);
}
for (IDialect dialect : this.dialects)
{
engine.addDialect(dialect);
}
engine.addDialect(new DictDialect());
return engine;
}
}
使用自定义标签
其中sys_normal_disable为字典的类型。
用户状态:
<dict:select id="status" name="status" dict="sys_normal_disable" headerKey="*" headerValue="所有"></dict:select>
六、自定义内置对象
Thymeleaf中提供了一些内置对象,并且在这些对象中提供了一些方法,方便我们来调用。获取这些对象,需要使用#对象名来引用。我们也可以自定义内置对象,下面使用Thymeleaf自定义时间工具内置对象。
1 实现IExpressionObjectFactory接口
import java.util.HashSet;
import java.util.Set;
import org.thymeleaf.context.IExpressionContext;
import org.thymeleaf.expression.IExpressionObjectFactory;
public class DateUtilsObjectFactory implements IExpressionObjectFactory
{
/**
* 自定义内置对象名称
*/
private static final String EXPRESSION_OBJECT_NAME = "dateUtils";
/**
* 返回表达式对象的名称
*/
@Override
public Set<String> getAllExpressionObjectNames()
{
Set<String> names = new HashSet<>();
names.add(EXPRESSION_OBJECT_NAME);
return names;
}
/**
* 创建内置对象的应用的实例
*/
@Override
public Object buildObject(IExpressionContext context, String expressionObjectName)
{
if (EXPRESSION_OBJECT_NAME.equals(expressionObjectName))
{
return new DateUtils();
}
return null;
}
/**
* 是否缓存该对象
*/
@Override
public boolean isCacheable(String expressionObjectName)
{
return false;
}
}
2 定义内置对象的表达式方言
import org.thymeleaf.dialect.IExpressionObjectDialect;
import org.thymeleaf.expression.IExpressionObjectFactory;
/**
* 自定义的时间工具对象
*
* @author
*/
public class DateUtilsExpDialect implements IExpressionObjectDialect
{
@Override
public String getName()
{
return "DateUtils Dialect";
}
@Override
public IExpressionObjectFactory getExpressionObjectFactory()
{
return new DateUtilsObjectFactory();
}
}
3 内置对象添加到模板引擎配置
public class ThymeleafConfig
{
....
@Bean
public SpringTemplateEngine templateEngine()
{
....
engine.addDialect(new DateUtilsExpDialect());
return engine;
}
}
4 使用自定义内置对象调用方法,其中dateUtils为DateUtils.java类。
<span th:text="${#dateUtils.getDate()}"></span>
<span th:text="${#dateUtils.dateTimeNow('yyyy-MM-dd HH:mm:ss')}"></span>
七、默认四大作用域存值/取值
1 request
request.setAttribute("requestParam", id);
<p th:xxxx="${requestParam}"></p>
var requestParam= '[[${requestParam}]]';
2 session
session.setAttribute("sessionParam", id);
<p th:xxxx="${session.sessionParam}"></p>
var sessionParam = '[[${session.sessionParam}]]';
3 application
application.setAttribute("applicationParam", id);
<p th:xxxx="${application.applicationParam}"></p>
var applicationParam = '[[${application.applicationParam}]]';
4 spring/model
mmap.put("modelParam", id);
<p th:xxxx="${modelParam}"></p>
var modelParam = '[[${modelParam}]]';
TIP
取值时,推荐使用单引号或双引号包裹,避免当值为null时,前台的语法错误,如:var param = ;
八、Thymeleaf中的事件
list循环显示
<ul class="layui-timeline" th:each="item:${list}">
<li class="layui-timeline-item" >
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h3 class="layui-timeline-title" th:text="${item.time}" style="color: white;"></h3>
<p style="margin-bottom: 15px; background: #f0f0f0; padding: 20px;">
<a th:href="@{content(id=${item.id})}" th:text="${item.title}"></a>
</p>
</div>
</li>
</ul>
onclick事件
th:οnclick="goContent([[${list.id}]]);"
<a href="javascript:void(0);" class="btn btn-success total_btn" onclick="checkTotal()">去结算</a>
OR
<input type="button" th:onclick="'javascript:fungetone(\''+${con.uid}+'\');'" value = "修改" />
使用 | 竖线(转义) 更为简洁
<input type="button" th:onclick="|javascript:fungetone(${con.uid})|" value = "修改" />
th:οnchange="'javascript:del(\''+${id}+'\')'"
超链接并传递数据
<a th:href="@{content(id=${list.id})}" th:text="${list.title}"></a>
数据回显
<select name="boxid" id="father" class="form-control" >
<option value="0">请选择</option>
<option th:each="item:${oneLevelList}"
th:value="${item.id}"
th:selected="*{boxid}==${item.id}"
th:text="${item.name}">
</option>
</select>
当 *{boxid}==${item.id} 作用域的 boxid == item.id 时选中
<input name="boxid" th:field="*{boxid}" class="form-control" type="text">
回显使用 th:field="*{boxid}"
Form表单提交
这里要用到jquery
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
<form id="xxxId" >
<input type="text" name="a" >
<input type="text" name="b" >
<input type="text" name="c" >
<button id="submit" class="btn btn-primary" type="button">提交</button>
</form>
$('#submit').click(function () {
var d = {};
var t = $('form').serializeArray();
//t的值为[{name: "a1", value: "xx"},
//{name: "a2", value: "xx"}...]
$.each(t, function () {
d[this.name] = this.value;
});
alert(JSON.stringify(d));
});
富文本渲染
纯文本内容用
th:text="${content}"
支持图片显示用
th:utext="${content}"
引用公共部分代码
<div class="container" th:replace="top::top"></div>
和
<div class="container" th:fragment="top">
TIP
th:replace的作用为引入公共页面或者公共页面的某一部分。
th:fragment的作用为选定公共部分,供th:replace引用。
注意:第一个top为上述公共部分的文件名,第二个top为th:fragment的值。这样便可以解决公共部分代码的抽取。
fragment加载语法如下: templatename::selector:”::”前面是模板文件名,后面是选择器 ::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment templatename:只写模板文件名,则加载整个页面
条件判断标签
下面代码的作用为是:如果code等于0的话就会显示<h2>
标签中的内容
<div th:if=" ${code} eq 0">
<h2>用户名或密码不正确</h2>
</div>
多个判断 必须用 and 连接
th:if="(${t.pid}==${s.id}) and ${t.recycle!=1}"
九、转义
竖线本来用于转换字符,意思就是
<span th:text="|Welcome to our application, ${user.name}!|">
=
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">