Thymeleaf的基本⽤法
Thymeleaf的基本⽤法
属于个⼈整理的⽂档,⼤部分内容来源⾃⽹络
在这⾥我们没有打算使⽤SpringMVC进⾏整合使⽤或者说跟SpringBoot⼀起使⽤
我们在这⾥单独使⽤Servelet版本-算是为了给⼀些初学者提供部分代码
Thymeleaf是⼀款⽤于渲染XML/XHTML/HTML5内容的模板引擎,类似JSP,Velocity,FreeMaker等,它也可以轻易的与Spring
MVC等Web框架进⾏集成作为Web应⽤的模板引擎。
Thymeleaf最⼤的特点是能够直接在浏览器中打开并正确显⽰模板页⾯,⽽不需要启动整个Web应⽤,但是总是看到说其效率有点低
Thymeleaf在有⽹络和⽆⽹络的环境下皆可运⾏,即它可以让美⼯在浏览器查看页⾯的静态效果,也可以让程序员在服务器查看带数据的动态页⾯效果。这是由于它⽀
Thymeleaf开箱即⽤的特性。它提供标准和spring标准两种⽅⾔,可以直接套⽤模板实现JSTL、OGNL表达式效果,避免每天套模板、改jstl、改标签的困扰。同时开发
1.引⼊提⽰
在html页⾯中引⼊thymeleaf命名空间,即,此时在html模板⽂件中动态的属性使⽤th:命名空间修饰。
这样才可以在其他标签⾥⾯使⽤th:*这样的语法.这是下⾯语法的前提.
2.变量表达式(获取变量值)
同EL表达式有些相似的效果,如果有数据,被替换
完成前后端分离效果(美⼯代码)
代码分析:
1.可以看出获取变量值⽤$符号,对于javaBean的话使⽤变量名.属性名⽅式获取,这点和EL表达式⼀样
2.它通过标签中的th:text属性来填充该标签的⼀段内容,意思是$表达式只能写在th标签内部,不然不会⽣效,上⾯例⼦就是使⽤th:text标签的值替换div标签⾥⾯的值,⾄于
3.访问spring-mvc中model的属性,语法格式为“${}”,如${}可以获取model⾥的ur对象的id属性
4.⽜叉的循环
表达式(引⼊URL)
重点!重点!重点!
引⽤静态资源⽂件(CSS使⽤th:href,js使⽤使⽤th:src)
href链接URL(使⽤th:href)
代码分析
1.最终解析的href为:
/conddemo/
/conddemo/uthymeleaf?name=Dear相对路径,带⼀个参数
/conddemo/uthymeleaf?name=Dear&alis=Dear相对路径,带多个参数
/conddemo/uthymeleaf?name=Dear&alis=Dear相对路径,带多个参数
/conddemo/uthymeleaf/Dear相对路径,替换URL⼀个变量
/conddemo/uthymeleaf/Dear/Dear相对路径,替换URL多个变量
最后的(name=${name})表⽰将括号内的内容作为URL参数处理,该语法避免使⽤字符串拼接,⼤⼤提⾼了可读性
3.@{/uthymeleaf}是Context相关的相对路径,在渲染时会⾃动添加上当前Web应⽤的Context名字,假设context名字为conddemo,那么结果应该是/cond
:href属性修饰符:它将计算并替换使⽤href链接URL值,并放⼊的href属性中。
:href中可以直接使⽤静态地址
4.选择或星号表达式
表达式很像变量表达式,不过它们⽤⼀个预先选择的对象来代替上下⽂变量容器(map)来执⾏*{}
Name:
Surname:
Nationality:
//等价于
Name:
Surname:
Nationality:
1.如果不考虑上下⽂的情况下,两者没有区别;星号语法评估在选定对象上表达,⽽不是整个上下⽂,什么是选定对象?就是⽗标签的值。上⾯的*{title}表达式可以理解
2.当然,美元符号和星号语法可以混合使⽤
⼩插曲:三和四的变量表达式、URL表达式所对应的属性都可以使⽤统⼀的⽅式:=“属性名=属性值”的⽅式来设置,参考
第“七.设置属性值”部分
5.⽂字国际化表达式
j简单看⼀下就可以,⽂字国际化表达式允许我们从⼀个外部⽂件获取区域⽂字信息(.properties),⽤Key索引Value,还可以提供⼀组参数
(可选).
#{}
#{reated(${entryId})}可以在模板⽂件中找到这样的表达式代码:
6.表达式⽀持的语法
字⾯量(Literals)
⽂本⽂字(Textliterals):'onetext','Anotherone!',…
数字⽂本(Numberliterals):0,34,3.0,12.3,…
布尔⽂本(Booleanliterals):true,fal
空(Nullliteral):null
⽂字标记(Literaltokens):one,sometext
⽂本操作(Textoperations)
字符串连接(Stringconcatenation):+
⽂本替换(Literalsubstitutions):|Thenameis${name}|
//Whichiquivalentto:
算术运算(Arithmeticoperations)
⼆元运算符(Binaryoperators):+,-,*,/,%
减号(Minussign(unaryoperator)):-
布尔操作(Booleanoperations)
Binaryoperators:and,or
Booleannegation(unaryoperator):!,not
⽐较和等价(Comparisonsandequality)
Comparators:>,<,>=,<=(gt,lt,ge,le)
Equalityoperators:==,!=(eq,ne)
条件运算符(Conditionaloperators)三元运算符
If-then:(if)?(then)
If-then-el:(if)?(then):(el)
Default:(value)?:(defaultvalue)
⽰例⼀:
⽰例⼆:
Specialtokens:
No-Operation:_
switch
循环
渲染列表数据是⼀种⾮常常见的场景,例如现在有n条记录需要渲染成⼀个表格或li列表标签该数据集合必须是可以遍历的,使
⽤th:each标签
代码分析:
循环,在html的标签中,加⼊th:each=“value:${list}”形式的属性,如可以迭代prods的数据⼜如带状态变量的循环:
利⽤状态变量判断:
7.设置属性值
:attr
任何属性值,语法格式:th:attr="属性名=属性值,[属性名=属性值]"
属性值如果是使⽤表达式的话:通常有URL表达式@{}和变量表达式${}
但此标签语法不太优雅
⽰例:
th:attr="action=@{/subscribe}"//当然也可以直接使⽤th:action
th:attr="src=@{/images/},title=#{logo},alt=#{logo}"//可直接使⽤th:src
th:attr="value=#{}"//可直接使⽤th:value
设置多个属性在同⼀时间,有两个特殊的属性可以这样设置:
th:alt-title和th:lang-xmllang
th:src="@{/images/}"th:alt-title="#{logo}"
2.前置和后置添加属性值
th:attrappend和th:attrprepend
主要对class和style两个属性
class="btn"th:attrappend="class=${''+cssStyle}"
转换后:class="btnwarning"
3.还有两个特定的添加属性
th:classappend和th:styleappend
与上⾯的attrappend功能⼀样
class="row"th:classappend="${}?'odd'"
转换后:奇数⾏class="rowodd",偶数⾏class="row"
8.内嵌变量Utilities
为了模板更加易⽤,Thymeleaf还提供了⼀系列Utility对象(内置于Context中),可以通过#直接访问。
dates:的功能⽅法类
calendars:类似#dates,⾯向ar
numbers:格式化数字的功能⽅法类
strings:字符串对象的功能类,contains,startWiths,prepending/appending等等
objects:对objects的功能类操作
bools:对布尔值求值的功能⽅法
arrays:对数组的功能类⽅法
lists:对lists功能类⽅法
ts
maps
代码⽰例:
${#(dateVar,'dd/MMM/yyyyHH:mm')}
${#ormat(datesArray,'dd/MMM/yyyyHH:mm')}
${#rmat(datesList,'dd/MMM/yyyyHH:mm')}
${#mat(datesSet,'dd/MMM/yyyyHH:mm')}
${#Now()}
${#Today()}
${#y(name)}
${#sEmpty(nameArr)}
${#Empty(nameList)}
${#mpty(nameSet)}
${#With(name,'Don')}
//alsoarray*,list*andt*
${#th(name,endingFragment)}
//alsoarray*,list*andt*
${#(str)}
${#(str)}
${#IgnoreCa(str)}
${#(str)}
${#ReplaceNulls(str)}
${#Alphanumeric(count)}//产⽣随机字符串
eaf布局
10.附录
thymeleaf_3.0.5_中⽂参考⼿册提取码:emk0
本文发布于:2022-11-27 13:32:33,感谢您对本站的认可!
本文链接:http://www.wtabcd.cn/fanwen/fan/90/31281.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
留言与评论(共有 0 条评论) |