SpringBoot第十篇:thymeleaf详解
作者:追梦1819
原文:https://www.cnblogs.com/yanfei1819/p/10931435.html
版权声明:本文为博主原创文章,转载请附上博文链接!
引言
SpringBoot 对 Web 的支持,官方推荐的是模板引擎 thymelaf。本章中,作者原意是直接讲解 SpringBoot 与 Thymelaf 的集成。但是在示例完成时,发现集成并不难。核心关注点应该是 Thymelaf 模板引擎本身的用法。故本章将其单独提出来讲解。集成部分待下一章详解。
简介
Thymeleaf 是一款用于渲染XML/XHTML/HTML5内容的模板引擎。类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring MVC等Web框架进行集成作为Web应用的模板引擎。与其它模板引擎相比,Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个Web应用。在开发团队中实现更强大的协调作用。
功能特性
-
原型即页面;
-
国际化支持;
-
开箱即用;
-
与 Spring 完美集成。
标准表达式语法
1、 ${...}
变量表达式,Variable Expressions
变量表达式可使用 thymleaf 的内置对象和内置方法。例如:
<p>Today is: <span th:text="${today}">13 february 2011</span>.</p>
2、@{...}
链接表达式,Link URL Expressions
用于静态资源的引用,form表单的请求等链接。例如:
无参:@{/xxx}
有参:@{/xxx(k1=v1,k2=v2)} 对应url结构:xxx?k1=v1&k2=v2
引入本地资源:@{/项目本地的资源路径}
引入外部资源:@{/webjars/资源在jar包中的路径}
3、#{...}
消息表达式,Message Expressions
信息表达式通常用于国际化。
4、~{...}
代码块表达式,Fragment Expressions
代码表达式主要用来页面布局的,支持两种语法结构:
- 推荐:
~{templatename::fragmentname}
- 支持:
~{templatename::#id}
注意:
- templatename:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html,要注意文件的路径;
- fragmentname:片段名,Thymeleaf通过th:fragment声明定义代码块,即:
th:fragment="fragmentname"
; - id:HTML的id选择器,使用时要在前面加上#号,不支持class选择器;
- 代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用:
th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中;
th:replace:将代码块片段整个替换使用了th:replace的HTML标签中;
th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中。
5、*{...}
选择(星号)变量表达式,Selection Variable Expressions
选择表达式很像变量表达式,不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行。
变量表达式使用频率最高,其功能也是非常的丰富。所以我们先从简单的代码块表达式开始,然后是消息表达式,再是链接表达式,最后是变量表达式,随带介绍选择变量表达式。
内置对象和方法
1、内置对象
- ctx :上下文对象。
- vars :上下文变量。
- locale:上下文的语言环境。
- request:(仅在web上下文)的 HttpServletRequest 对象。
- response:(仅在web上下文)的 HttpServletResponse 对象。
- session:(仅在web上下文)的 HttpSession 对象。
- servletContext:(仅在web上下文)的 ServletContext 对象。
2、内置方法
-
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等。
表达式支持的语法
字面(Literals)
- 文本文字(Text literals):
'one text', 'Another one!',…
- 数字文本(Number literals):
0, 34, 3.0, 12.3,…
- 布尔文本(Boolean literals):
true, false
- 空(Null literal):
null
- 文字标记(Literal tokens):
one, sometext, main,…
文本操作(Text operations)
- 字符串连接(String concatenation):
+
- 文本替换(Literal substitutions):
|The name is ${name}|
算术运算(Arithmetic operations)
- 二元运算符(Binary operators):
+, -, *, /, %
- 减号(单目运算符)Minus sign (unary operator):
-
布尔操作(Boolean operations)
- 二元运算符(Binary operators):
and, or
- 布尔否定(一元运算符)Boolean negation (unary operator):
!, not
比较和等价(Comparisons and equality)
- 比较(Comparators):
>, <, >=, <= (gt, lt, ge, le)
- 等值运算符(Equality operators):
==, != (eq, ne)
条件运算符(Conditional operators)
- If-then:
(if) ? (then)
- If-then-else:
(if) ? (then) : (else)
- Default: (value) ?:
(defaultvalue)
常用 th 属性
html有的属性,Thymeleaf基本都有,而常用的属性大概有七八个。其中th属性执行的优先级从1~8,数字越低优先级越高。
- th:text :设置当前元素的文本内容,相同功能的还有th:utext,两者的区别在于前者不会转义html标签,后者会。优先级不高:order=7;
- th:value:设置当前元素的value值,类似修改指定属性的还有th:src,th:href。优先级不高:order=6;
- th:each:遍历循环元素,和th:text或th:value一起使用。注意该属性修饰的标签位置,详细往后看。优先级很高:order=2;
- th:if:条件判断,类似的还有th:unless,th:switch,th:case。优先级较高:order=3;
- th:insert:代码块引入,类似的还有th:replace,th:include,三者的区别较大,若使用不恰当会破坏html结构,常用于公共代码块提取的场景。优先级最高:order=1;
- th:fragment:定义代码块,方便被th:insert引用。优先级最低:order=8;
- th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。优先级一般:order=4;
- th:attr:修改任意属性,实际开发中用的较少,因为有丰富的其他th属性帮忙,类似的还有th:attrappend,th:attrprepend。优先级一般:order=5
总结
总体来说,thymelaf 的使用还是很简单的。
这篇文章参照了 thymelaf 官方文档 ,所列举的都为常用的一些用法或者语法。当然,如果读者的英文阅读能力不错,推荐将 官方文档 通读一遍,细枝末节之处将更加清晰。另一方面,如果读者的基础比较强,作者建议去阅读 thymelaf 的源码。模板引擎,其实大体的原理都接近。此处篇幅所限,不做深入讲解。
后续如果有时间,作者将跟大家一起学习、分享源码系列。
源码:我的GitHub
参考
![](https://img2018.cnblogs.com/blog/1183871/201905/1183871-20190527163006503-1962736544.png)
本文来自博客园,作者:追梦1819,转载请注明原文链接:https://www.cnblogs.com/yanfei1819/p/10931435.html