特征
Thymeleaf是用来开发Web应用和独立环境项目的服务端Java模版引擎
为什么使用Thymeleaf
在之前最开始的时候我们使用的是JSP进行渲染页面,但是,Spring官方所支持的服务渲染模板中,并不包含jsp。
而是Thymeleaf和Freemarker等,而Thymeleaf与SpringMVC的视图技术,及SpringBoot的自动化配置集成非常完美,几乎没有任何成本,你只用关注Thymeleaf的语法即可。
Thymeleaf的特点
- 动静结合:Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。
- 开箱即用:它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每天套模板、该jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
- 多方言支持:Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。
- 与SpringBoot完美整合,SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以像以前操作jsp一样来操作Thymeleaf。代码几乎没有任何区别,就是在模板语法上有区别。
语法使用
这里就直接讲语法了,部署非常简单,只需要在springboot的pom文件中引入启动器就行
引入语法库
xmlns:th="http://www.thymeleaf.org
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:href="@{/img/logo.ico}" rel="SHORTCUT ICON">
<title>首页</title>
</head>
<body>
<h1>首页</h1>
</body>
</html>
我们应该会注意到,该文件是HTML5,可以由任何浏览器正确显示,因为它不包括任何⾮HTML标签
我们也可以看到,这个模板并不是⼀个真正有效的HTML5文档,因为HTML5规范,是不允许在HTML标签属性中使⽤th:**这种⾮标准的属性。
事实上,我们在标签中添加了⼀个xmlns:th属性,这也不是HTML5标准:
那么如何使这个HTML5模板有效呢?
HTML5规范中要求⽤户⾃定义属性以data-前缀开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link data-th-href="@{/img/logo.ico}" rel="SHORTCUT ICON">
<title>persons</title>
</head>
<body>
<span data-th-text="${msg}"></span>
</body>
</html>
这两种形式是完全等同的,并且是可互换的
语法
替换原内容
Thymeleaf 最为显著的特征是增强属性
,任何属性都可以通过th:xx
来完成交互,例如th:src
最终会覆盖src
属性。
表达式
变量表达式:${…} → 用来获取属性值或者进行运算
<span data-th-text="${msg}"></span>
<div th:if="${personsIPage != null}" th:text="${personsIPage.getRecords()}"></div>
<div th:text="${1 == 2}"></div>
选择变量表达式:*{…} → 获取对象属性,但是可以先获取对象,是一种简写风格,推荐使用
<form id="userForm" th:object="${user}">
<input id="id" name="id" th:value="*{id}"/>
<input id="username" name="username" th:value="*{username}"/>
<input id="password" name="password" th:value="*{password}"/>
</form>
消息表达式:#{…} → 用于获取国际化语言翻译值,在获取的时候可以传值
<span data-th-text="#{home.welcome}"></span>
<!--如果传递值需要在properson文件中标识,多个值有索引区分-->
<!--home.welcome = i Beavering a nesta tiena de comestibles {0}!-->
<span data-th-text="#{home.welcome(${msg})}"></span>
链接表达式:@{…} → 直接拿到静态路径
<link th:href="@{/img/logo.ico}" rel="SHORTCUT ICON">
<script th:src="@{/jquery/jquery.js}"></script>
<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
<!--携带多参数-->
<a th:href="@{/order/details(id=3)}"></a>
<a th:href="@{/order/details(id=3,action='show_all')}"></a>
片段表达式:〜{…} → 选择页面片段到当前页面,可以是其他的页面,也是是当期页面的代码
使用方法:首先通过th:fragment
定制片段 ,然后通过th:replace
填写片段路径和片段名。
<!--使用方法:首先通过 th:fragment 定制片段 ,然后通过 th:replace 填写片段路径和片段名-->
<!-- ~{ viewName } 表示引入完整页面-->
<div th:replace="~{页面的文件名字}"></div>
<!-- 在指定页面寻找片段 其中selector可为片段名、jquery选择器等-->
<div th:replace="~{component::nav}"></div>
<!--当前页面引入-->
<div th:replace="~{::new}"></div>
<!--简写-->
<span th:replace="component::logo"></span>
<!--定义一个组件-->
<div th:fragment="new">当前页面的</div>
内置对象
七大基础对象:
${#ctx}
: 上下文对象,可用于获取其它内置对象。
${#vars}
: 上下文变量。
${#locale}
:上下文区域设置。
${#request}
: HttpServletRequest对象。
${#response}
: HttpServletResponse对象。
${#session}
: HttpSession对象。
${#servletContext}
: ServletContext对象。
常用工具类
工具类中常用方法后边慢慢增加
#strings
:字符串工具类
#lists
:List 工具类
#arrays
:数组工具类
#sets
:Set 工具类
#maps
:常用Map方法。
#objects
:一般对象类,通常用来判断非空
#bools
:常用的布尔方法。
#execInfo
:获取页面模板的处理信息。
#messages
:在变量表达式中获取外部消息的方法,与使用#{…}语法获取的方法相同。
#uris
:转义部分URL / URI的方法。
#conversions
:用于执行已配置的转换服务的方法。
#dates
:时间操作和时间格式化等。
#calendars
:用于更复杂时间的格式化。
#numbers
:格式化数字对象的方法。
#aggregates
:在数组或集合上创建聚合的方法。
#ids
:处理可能重复的id属性的方法。
条件判断
通常判断是否显示
<div th:if="${1==1}">
<div>true的时候显示</div>
</div>
<!-- 取反-->
<div th:unless="${1 != 1}">
<div>false的时候显示</div>
</div>
循环
常用来遍历集合
<!-- 遍历list集合-->
<ul th:each="person : ${personsIPage.getRecords()}">
<li th:text="${person.toString()}"></li>
</ul>
<!-- 迭代过程状态变量使用-->
<!-- 如果缺省状态变量名,则迭代器会默认帮我们生成以变量名开头的状态变量 xxStat → personsIPageStat-->
<span th:each="personsIPage, start:${personsIPage.getRecords()}">
index = [[${start.index}]]
count = [[${start.count}]]
size = [[${start.size}]]
<br>
</span>
日期处理
可以通过时间工具类#dates
来对日期进行格式化
<input type="text" th:value="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}"/>
内联写法
我们需要在js中使用服务端返回的变量的时候需要使用
标准格式为:[[${xx}]]
<script th:inline="javascript">
//可以读取服务端变量,也可以调用内置对象的方法。例如获取用户变量和应用路径:
var user = [[${personsIPage}]];`
var APP_PATH = [[${#request.getContextPath()}]];
var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]];
</script>
<!--
内联表达式仅在页面生效,引入的js中是无效的,因为Thymeleaf只负责解析一级视图,不能识别外部标签JS里面的表达式。
-->