Thymeleaf是Web和独立环境的现代服务器端Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本。
Thymeleaf的主要目标是提供一种优雅和高度可维护的创建模板的方式。为了实现这一点,它建立在自然模板的概念上,将其逻辑注入到模板文件中,不会影响模板被用作设计原型。这改善了设计的沟通,弥补了设计和开发团队之间的差距。
Thymeleaf也从一开始就设计了Web标准 - 特别是HTML5 - 允许您创建完全验证的模板,如果这是您需要的
springboot 用thymeleaf 还是挺不错的
温馨提示: 点击右边 展示皮肤 –> 选择 经典白 这个主题可能会更加适合。
一、标准表达式语法
它又分为:
- 消息
- 变量
- 选择表达式
- 链接URL
- 片段
- 文字
- 附加文本
- 字面替代
- 算术运算
- 比较与平等
- 条件表达式
- 默认表达式
- 无操作令牌
- 数据转换/格式化
- 预处理
我就只介绍常用的了
${…} 表达式实际上是在上下文中包含的变量的地图上执行的OGNL(Object-Graph Navigation Language)对象。
1、变量
<p>Today is: <span th:text="${today}">13 february 2011</span>.</p>
意味着
<span>
标签中的内容会被表达式${today}
的值所替代,无论模板中它的内容是什么,之所以在模板中“多此一举“地填充它的内容,完全是为了它能够作为原型在浏览器中直接显示出来。
假设today的值为2015年8月14日,那么渲染结果为:<p>Today is: 2015年8月14日.</p>
。可见Thymeleaf的基本变量和JSP一样,都使用${.}
表示获取变量的值。
2、URL
URL在Web应用模板中占据着十分重要的地位,需要特别注意的是Thymeleaf对于URL的处理是通过语法@{…}来处理的。Thymeleaf支持绝对路径URL:
<a th:href="@{http://www.thymeleaf.org}">Thymeleaf</a>
同时也能够支持相对路径URL:
另外,如果需要Thymeleaf对URL进行渲染,那么务必使用th:href
,th:src
等属性,下面是一个例子
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html"
th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
几点说明:
上例中URL最后的(orderId=${o.id})
表示将括号内的内容作为URL参数处理,该语法避免使用字符串拼接,大大提高了可读性@{...}
表达式中可以通过{orderId}
访问Context
中的orderId
变量@{/order}
是Context
相关的相对路径,在渲染时会自动添加上当前Web应用的Context名字,假设context
名字为app
,那么结果应该是/app/order
3、字符串替换
很多时候可能我们只需要对一大段文字中的某一处地方进行替换,可以通过字符串拼接操作完成:
<span th:text="'Welcome to our application, ' + ${user.name} + '!'">
一种更简洁的方式是:
<span th:text="|Welcome to our application, ${user.name}!|">
当然这种形式限制比较多,|…|中只能包含变量表达式${…},不能包含其他常量、条件表达式等。
4、运算符
在表达式中可以使用各类算术运算符,例如+, -, *, /, %
th:with="isEven=(${prodStat.count} % 2 == 0)"
逻辑运算符>, <, <=,>=,==,!=
都可以使用,唯一需要注意的是使用<,>时需要用它的HTML转义符:
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
二、常用的表达式
1、for循环
使用 th:each
标签
<div class="row" >
<div th:each="url,lstat:${links}">
<div class="col-md-2" th:title="${url.description}" title="一个人,信你所信,为你所现" >
<strong th:text="${url.link_name}">这个冬天不太冷</strong>
<a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}" >http://www.lrshuai.top</a>
</div>
</div>
</div>
lstat称作状态变量,属性有:
- index:当前迭代对象的index(从0开始计算)
- count: 当前迭代对象的index(从1开始计算)
- size:被迭代对象的大小
- current:当前迭代变量
- even/odd:布尔值,当前循环是否是偶数/奇数(从0开始计算)
- first:布尔值,当前循环是否是第一个
- last:布尔值,当前循环是否是最后一个
2、条件求值
If/Unless
demo
<div class="row" >
<div th:each="url,lstat:${links}">
<div class="col-md-2" th:title="${url.description}" th:if="${lstat.index}%4 == 0" >
<strong th:text="${url.link_name}">这个冬天不太冷</strong>
<a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}">http://www.lrshuai.top</a>
</div>
<div class="col-md-2 col-md-offset-1" th:title="${url.description}" th:unless="${lstat.index}%4==0">
<strong th:text="${url.link_name}">这个冬天不太冷</strong>
<a href="http://www.lrshuai.top" th:href="${url.link}" th:text="${url.link}" >http://www.lrshuai.top</a>
</div>
</div>
</div>
Thymeleaf中使用th:if和th:unless属性进行条件判断,上面的例子中,
<div>
标签只有在th:if中条件成立时才显示:th:unless于th:if恰好相反,只有表达式中的条件不成立,才会显示其内容。
Switch
Thymeleaf同样支持多路选择Switch结构:
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>
默认属性default可以用*表示:
<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 some other thing</p>
</div>
3、内嵌变量
为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:
- dates : java.util.Date的功能方法类。
- calendars : 类似#dates,面向java.util.Calendar
- numbers : 格式化数字的功能方法类
- strings : 字符串对象的功能类
- objects: 对objects的功能类操作。
- bools: 对布尔值求值的功能方法。
- arrays:对数组的功能类方法。
- lists: 对lists功能类方法
- sets
- maps
说说我常用得方法吧,太多了,你也不一定看完
(1)、字符串太多,显示…
# 这里的含义是 如果 atc.text 这个变量多余200个字符,后面显示...
<p th:text="${#strings.abbreviate(atc.text,200)}">内容内容内容</p>
(2)、数组判断是否为空
<div th:if="${#lists.isEmpty(arrays)} " class="blog-article">
(3)、request 获取绝对路径
<img th:src="${#httpServletRequest.getContextPath()}+${atc.img}" src="/images/logo.jpg">
常用th标签
标签 | 说明 | 例子 |
th:id | 替换id | |
th:text | 文本替换 | |
th:utext | 支持html的文本替换 | |
th:object | 替换对象 | |
th:value | 属性赋值 | |
th:with | 变量赋值运算 | |
th:style | 设置样式 | |
th:onclick | 点击事件 | |
th:each | 属性赋值 | |
th:if | 判断条件 | |
th:unless | 和th:if判断相反 | |
th:href | 链接地址 | |
th:switch | 多路选择 配合th:case 使用 | |
th:case | th:switch的一个分支 | |
th:fragment | 布局标签,定义一个代码片段,方便其它地方引用 | |
th:include | 布局标签,替换内容到引入的文件 | |
th:replace | 布局标签,替换整个标签到引入的文件 | |
th:selected | selected选择框 选中 | |
th:src | 图片类地址引入 | |
th:inline | 定义js脚本可以使用变量 | |
th:action | 表单提交的地址 | |
th:remove | 删除某个属性 | |
th:attr | 设置标签属性,多个属性可以用逗号分隔 | 比如 |
html 有的,它几乎都有相对应的标签