一、概念
1、Thymeleaf是Web和独立环境的开源的Java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至纯文本;
2、Thymeleaf可以在Web(基于Servlet)和非Web环境中工作,它更适合在基于MVC的Web应用程序的视图层提供XHTML / HTML5 ,但它甚至可以在脱机环境中处理任何XML文件。它提供完整的Spring Framework集成
3、在Web应用程序中,Thymeleaf旨在成为JSP的完全替代品,并实现自然模板的概念:模板文件,可以直接在浏览器中打开,仍然可以正确显示为网页;
二、环境配置
1、如果用maven需要下载thymeleaf-2.1.4.RELEASE.jar(http://www.thymeleaf.org/download.html ),然后在pom里添加依赖
2、整合spring的需要下载thymeleaf-spring4-2.1.4.RELEASE.jar(http://www.thymeleaf.org/download.html ),然后添加依赖
3、servlet配置
View Code
4、html
引用命名空间: <html xmlns:th="http://www.thymeleaf.org">
可避免编辑器出现html验证错误,但是不加对Thymeleaf的功能也没有影响;
三、语法
1、表达式
${name} 可用值表达式,变量取值(变量名name又后台传入);
*{name} 所有可用值表达式,从可用值中查找name,如果有上下文,比如上层(即父标签)是object,则查object中的name属性(th:object="")。
#{nmae} 消息表达式,国际化时使用,也可以使用内置的对象,比如date格式化数据;(消息通常指:外部文本抽取模板代码片段到模板文件外面, 使外部文本可以存在另一个文件中)
@{name} 链接表达式,用来配合link,src,href使用的
~{name} 片段表达式,用来引入公共部分代码片段,并进行传值操作使用;
示例:
服务器变量 map.put("msgutext","<b>1111</b>");
html内容:
<div th:utext="${msgutext}"></div> 显示结果为粗体的1111 <div th:text="${msgutext}"></div> 显示结果为:<b>1111</b>
2、运算符
数学:+,-,*,/,%
比较:gt,lt,ge,le,eq,ne
逻辑:and,or,not,!
条件:? : ,?: (默认值,例: value ?: defaultvalue,条件语句也可以不只要?号,相当于没有else)
其他:+(字符串连接),_(禁止转义),||(替换,内容可包含非参数内容,如:<a href="" th:href="@{|xx${value}|}"
3、支持的html5操作
(基本所有属性都支持了,只是在前边加了一个th:)
常用th标签
th:id 替换id
th:text 替换标签内文本
th:utext html文本替换,可使文本内的标签生效
th:object 替换对象
th:value 属性赋值
th:with 变量赋值运算,例<div th:with="isEven=${prodStat.count}%2==0"></div>
th:style 替换样式
th:onclick 点击事件
th:each 属性赋值
th:if 条件判断,例:<a th:if="${userId == collect.userId}" >
th:unless 条件判断
th:href 链接地址
th:switch switch选择,和th:case一起使用
th:fragmetn 布局标签
th:include
th:replace
th:selected
th:src
th:inline
th:action
th:remove
th:attr 设置任意标签属性,一般较少用到,因为所有的属性都有对应的th:
include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove
4、内嵌数据类型
(内置于Contex中,可通过#直接访问)
dates java.util.Date的功能方法,${#dates.createNow()}
calendars java.util.Calendar
numbers 数字
strings 字符串
objects objects功能类
bools 布尔值
arrays 数组功能类
lists list功能类
sets 集合功能类
maps 字典功能类
内置基本对象(可通过#访问)
ctx,vars,locale,request,response,session,servletContext
5、遍历
<tr th:each="data:${getdata}">
<td th:text="${data.id}"></td>
<td th:text="${data.name}"></td>
...
</tr>
大部分java集合类型都可以用此来遍历
同时th:each还提供了一个变量可以保存迭代状态
状态包含以下属性:
index 索引,从0开始
count 计数,从1开始
size 集合内元素总数
current 当前迭代对象
even/odd 奇偶数个,bool类型
first 是否是第一个,bool类型
last 是否是最后一个,bool类型
<li th:each="emp, status: ${employees}" th:class="${status.odd} ? 'odd': 'even'">
<span class="list" th:text="${emp.name}"></span>
<span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span>
<span class="list" th:text="${{emp.birthday}}"></span>
<span class="list status" th:text="|index: ${status.index}; count: ${status.count}; size: ${status.size}; first: ${status.first}|"></span> </li>
</li>
<!--如果没有指定第二个参数的名字,有默认的以参数名+Stat为名字,如上没有指定status则可以使用empStat提取上边参数-->
示例:
<li th:each="emp, status: ${employees}" th:class="${status.odd} ? 'odd': 'even'">
<span class="list" th:text="${emp.name}"></span>
<span class="list" th:text="${emp.gender == 1} ? '男': '女'"></span>
<span class="list" th:text="${{emp.birthday}}"></span>
<span class="list status" th:text="|index: ${status.index}; count: ${status.count}; size: ${status.size}; first: ${status.first}|"></span> </li>
</li>
<!--如果没有指定第二个参数的名字,有默认的以参数名+Stat为名字,如上没有指定status则可以使用empStat提取上边参数-->
6、条件(if,switch)
示例:
1)if
<tr th:each="test:${test}">
<td th:if="${test.score} gt 0 and ${test.score} lt 60">差</td>
<td th:if="${test.score} ge 60 and ${test.score} le 70">中</td>
...
</tr>
2)if unless
<tr th:each="test:${test}">
<td th:if="${test.score} gt 0 and ${test.score} lt 60">不及格</td>
<td th:unless="${test.score} gt 0 and ${test.score} lt 60">及格</td>
</tr>
3)switch
<tr th:each="test:${test}">
<td th:switch="${test.male}">
<span th:case="1">男</span>
<span th:case="2">女</span>
<span th:case="*">未知</span>
</td>
</tr>
7、其他
1)外围包裹th:block标签:主要用于在代码外部加一层条件,而不用多写一个div
2)日期格式化:
<td th:text="${#dates.format(content.createDate,'yyyy-MM-dd HH:mm:ss')}"></td>
3)字符串长度截取:
<td th:if="${#strings.length(content.title) gt 5 } " th:text="${#strings.substring(content.title,0,5) + '…'}"></td>
4)下拉选择:
<select name="subId" id="subId" lay-verify="" >
<option value="">请选择</option>
<option th:each="channelsub:${subchannels}" th:selected="${channelsub.id == subId}" th:value="${channelsub.id}" th:text="${channelsub.name}"></option>
</select>
5)传值到js
<script th:inline="javascript">
var size= [[${test.size()}]];
</script>
6)传值到css
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>