Thymeleaf是Java模板引擎,并且Thymeleaf被Springboot官方推荐,成为JavaWeb领域必备技能,下面重点详解Thymeleaf的语法。
Thymeleaf变量表达式
- 变量表达式:${...}
示例:
- <div th:object="${book}">
Thymeleaf选择变量表达式
选择变量表达式和变量表达式用法类似,一般用于从被选定对象而不是上下文中获取属性值。
- 选择变量表达式:*{...}
示例:
- <p>titile: <span th:text="*{title}">标题</span>.</p>
*{title} 选择变量表达式获取当前指定对象book的title属性值。
Thymeleaf链接表达式
用于静态资源的引用,form表单的请求等链接。
- 链接表达式:@{...}
示例:
- 无参:@{/xxx}
- 有参:@{/xxx(k1=v1,k2=v2)} 对应url结构:xxx?k1=v1&k2=v2
- 引入本地资源:@{/项目本地的资源路径}
- 引入外部资源:@{/webjars/资源在jar包中的路径}
Thymeleaf国际化表达式
- 国际化表达式:#{...}
一般用于国际化的场景,示例如下:
- th:text="#{msg}"
Thymeleaf片段引用表达式
片段表达式~{…}用来标记一个片段模板,并根据需要移动或传递给其他模板。
- 片段引用表达式:~{...}
其中,最常见的用法是使用th:insert或th:replace属性插入片段,示例代码如下:
- <divth:insert="~{thymeleafDemo::title}"></div>
上述代码中,使用th:insert属性将title片段模板引用到该标签中。
Thymeleaf常用内置功能
- ctx :上下文对象;
- vars :上下文变量;
- locale:上下文的语言环境;
- request:(仅在web上下文)的 HttpServletRequest 对象;
- response:(仅在web上下文)的 HttpServletResponse 对象;
- session:(仅在web上下文)的 HttpSession 对象;
- servletContext:(仅在web上下文)的 ServletContext 对象;
这里以常用的Session举例,如下所示:
- // java 代码将用户名放在session中
- session.setAttribute("userinfo",username);
- // Thymeleaf通过内置对象直接获取
- th:text="${session.userinfo}"
Thymeleaf常用内置方法
- strings:字符串格式化方法,常用的Java方法它都有,比如:equals,equalsIgnoreCase,length,trim,indexOf,substring,replace,contains等;
- numbers:数值格式化方法,常用的方法有:formatDecimal等;
- bools:布尔方法,常用的方法有:isTrue,isFalse等;
- arrays:数组方法,常用的方法有:length,isEmpty,contains等;
- lists,sets:集合方法,常用的方法有:toList,size,isEmpty等;
- maps:对象方法,常用的方法有:size,isEmpty,containsKey等;
- dates:日期方法,常用的方法有:format,year,month,hour等;
示例:
- <!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>
Thymeleaf常用 th 属性
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个:
示例:
- <!DOCTYPE html>
- <html lang="en" xmlns:th="http://www.thymeleaf.org"><head>
- <meta charset="UTF-8">
- <title>Thymeleaf 语法</title></head><body>
- <h2>mikechen的互联网架构 Thymeleaf 语法</h2>
- <!--th:text 设置当前元素的文本内容,常用,优先级不高-->
- <p th:text="${thText}" />
- <p th:utext="${thUText}" />
- <!--th:value 设置当前元素的value值,常用,优先级仅比th:text高-->
- <input type="text" th:value="${thValue}" />
- <!--th:each 遍历列表,常用,优先级很高,仅此于代码块的插入-->
- <!--th:each 修饰在div上,则div层重复出现,若只想p标签遍历,则修饰在p标签上-->
- <div th:each="message : ${thEach}"> <!-- 遍历整个div-p,不推荐-->
- <p th:text="${message}" />
- </div>
- <div> <!--只遍历p,推荐使用-->
- <p th:text="${message}" th:each="message : ${thEach}" />
- </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="~{grammar/common::thCommon}"></div>
- <!--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></body></html>