简介
thymeleaf 是java的模板渲染引擎(类似于freemarker,velocity),优点嘛就是分割了设计和开发团队,互不干扰,入侵性比较小.主要可以处理 html,xml,text,javascript,css,raw 这已经全活儿了. 意思是绝对够用了,好了,开始吧.
基础语法
- step1: 增加th 标签库,要不h5页面不识别会报错. <code><html xmlns:th="http://www.thymeleaf.org"></code> 接下来就可以使用<code>th:</code> 标签了.
-
文本操作
- <code>th:text</code> 文本 ,支持国际化.<code>#{key}</code> 或可以获取到*.properties中的国际化文字.
- <code>context</code>,从上下文中获取数据 <code> ${x} ${param.x} ${session.x} ${application.x}</code>
- 转意语法 对于<,>需要转意, 也可以通过 <code>th:utext</code> 来渲染源数据.
- 文本连接 <code> <span th:text="'The name of the user is ' + ${user.name}"></code>
- 文本替换<code><span th:text="|Welcome to our application, ${user.name}!|"></code> 如果不想使用+ 好连接,则可以使用竖线包裹,则自动替换变量
- 标准语法
-
变量
QQ图片20161009163125.png
星号表达式({})*
星号表达式跟<code>#{}</code>一样,都是取值的方法,不过. #{}直接从上下文中取值, 星号表达式则是使用<code>th:object</code> 在外层取值,包括的节点下取值就可以使用星号表达式直接取值了. 井号表达式的简化形式.-
链接<code>@{}</code>
主要应用于<code>th:href</code> 表示链接,可以 是- 相对位置 nowpage.html
- 上下文定位 /nowpage.html
- 绝对定位 ~/nowpage.html (根目录)
- 网络位置 //code.jquery.com/jquery-2.0.3.min.js
模板片段 <code>th:insert th:replace</code>
** 三目表达式** <code><tr th:class="${row.even}? 'even' : 'odd'">
...
</tr></code>条件判断(需要转意)
<code><div th:if="${prodStat.count} > 1"></code> 这里要使用gt进行转意">"不操作(一般用于三目吧,实在想不出用再那里)
<code><span th:text="${user.name} ?: _">no user authenticated</span></code>日期转换(一般这里使用Calendar对象)
<code><span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 february 2011</span></code>预处理表达式(可以直接调用类方法)
高级应用,了解下<code>${expression}</code>一般配合message进行调用方法.
设置dom属性
<code>th:attr th:value th:action th:href ....</code> 很多dom属性这里应该都支持.
<code>th:attrappend th:attrprepend</code> 属性增加(聚合)
循环
- 基本循环
<code>
<tr th:each="prod : ${prods}">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr></code> - 获取序列
<code>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr></code>
条件
<code>th:if th:unless</code>两个正好相反.
<code>th:switch th:case</code>
布局
前面已经介绍过 fragments 了.通过使用th:fragment 构造一个片段.使用<code>th:insert th:include th:replace</code>进行引入片段. 比如<code><div th:insert="footer :: copy"></div></code> 常用的三种语法有
- <code>~{templatename::selector</code> 引入某个模板的某个片段
- <code>~{templatename}</code> 引入某个模板
- <code> ~{::selector}</code> 引入当前模板的某个片段
一般定位是通过th:fragment 指定一个片段名称,也可以不指定名称 比如指定一个id ,则可以通过 ,~{templatename:: #id} 进行引入.
参数化模板 模板可以进行传参. 一般采用两种方式
- th:fragment 声明变量 比如<code>th:fragment="frag (param1,param2)"</code>之后再通过<code>th:replace="::frag (${v1},${v2})"</code>进行传参.
- th:fragment 不声明变量 ,可以直接传递参数过来<code><div th:replace="::frag (onevar=${value1},twovar=${value2})"></code> 或者使用<code><div th:replace="::frag" th:with="onevar=${value1},twovar=${value2}"></code>
本地变量
<code>th:with</code> 可以赋多个值.<code><div th:with="firstPer=${persons[0]},secondPer=${persons[1]}"></code>
注释
<code></code> 注释
<code></code> 解析后会删除.
区块操作<code>th:block</code>
区块操作主要用于便捷操作,比如循环,可以在dom外部形成包裹,解析之后block模块会被注释掉.
内联表达式(inlining)
<code>[[...]] [(...)]</code> 可以通过th:inline="none" 禁止内联. 一般使用场景为text,js,css 可以动态生成js 或者css
Others
其他内容大部分属于高级内容,暂不记录了.这里记录的内容gou
