Thymeleaf的使用

来源：互联网发布：网络性能指标编辑：程序博客网时间：2024/05/26 09:54

- 标准表达式语法
  - Messages
  - Variables
  - 选择上的表达式
  - 链接URLs
  - 片段
  - 文本值
  - 数字值
  - 布尔值
  - NULL值
  - 文字标记
  - 文本相加
  - 文字替换
  - 算术操作
  - 逻辑操作
  - 比较操作
  - 条件表达式
  - 默认表达式
  - 不操作标记
  - 数据转换格式化
  - 预处理
- 设置文本内容
- 设置属性值
  - 设置任意属性
  - 设置特殊属性
  - 同时设置两个属性
  - 添加属性值
  - 混合值布尔属性
  - 设置任意属性值
  - HTML5属性名
- 迭代
- 条件分支
  - if 和 unless
  - switch
- 模板布局
  - 引入模板片段
  - 模板片段传递参数
  - 移除模板片段
- 本地变量
- 注释
  - 标准HTMLXML注释
  - Thymeleaf编译级注释块
  - Thymeleaf原型注释块
- 直接插入
  - 直接插入表达式
- 文字模板模式
  - 文字语法
  - 文字原型注释添加代码
  - 文字编译级注释删除代码
  - 自然语法
- 解耦模板逻辑

Thymeleaf是一个模板引擎，支持的模板类型有

HTML
XML
TEXT
JAVASCRIPT
CSS
RAW

标准表达式语法

Messages

语法：#{...}
示例：

#{home.welcome(${session.user.name})}home.welcome=Hello {0}!

Variables

语法：${...}
示例：

${today}${param.user.name}${session.user.name}${application.user.name}${person.createCompleteNameWithSeparator('-')}

特殊变量：

选择上的表达式

语法：*{...}
示例：

*{name}= ${user.name} //th:object=${user}= ${#object.name}

链接URLs

语法：@{...}
示例：

@{http://www.thymeleaf.org}@{user/login.html}@{/itemdetails?id=3}@{~/billing/processInvoice}@{//code.jquery.com/jquery-2.0.3.min.js}@{/order/details(orderId=${o.id})}@{/order/{orderId}/details(orderId=${o.id})}

片段

语法：~{...}
示例：

~{footer :: copy}

文本值

语法：'...'
示例：

'I\'m Beach Chou!'

数字值

语法: number
示例：

20163.14f

布尔值

语法: true, false

NULL值

语法：null

文字标记

语法： token
备注：只能使用A-Z, a-z, 0-9, ‘[‘, ‘]’, ‘.’, ‘-‘, ‘_’
示例：

IPhone7

文本相加

语法：expression + expression

文字替换

语法：|…|
备注：内部只能使用变量
示例：

|The name is ${name}|

算术操作

语法：+, -, *, /, %, div, mod
示例：

1 + 1

逻辑操作

语法： and, or, not
示例：

${con} and ${co}

比较操作

语法：gt, lt, ge, le, eq, ne
示例：

3 gt 2

条件表达式

语法：
If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
示例：

${con} ? true : false

默认表达式

语法：
Default: (value) ?: (defaultvalue)
示例：

${con} ?: default

不操作标记

语法： _

数据转换/格式化

语法：${{...}}, *{{...}}
示例：

${{user.lastAccessDate}}

预处理

语法： __...__

设置文本内容

语法：th:text="...", th:utext="..."
备注：text转义，utext不转义

设置属性值

设置任意属性

语法：th:attr="attrname=..."
示例：

th:attr="class='main'"

设置特殊属性

语法： th:name="..."
示例：

th:class="'main'"

同时设置两个属性

语法：

th:alt-title="..."th:lang-xmllang="..."

示例：

th:alt-title="${title}"

添加属性值

语法：

th:attrappend="attr1=...,attr2=..."th:attrprepend="attr1=...,attr2=..."th:classappend="..."th:styleappend="..."

示例：

th:classappend="'main'"

混合值布尔属性

语法：th:name="true"
示例：

th:checked="true"

设置任意属性值

语法：th:*="..."

HTML5属性名

语法： data-th-*=”…” = th:*="..."

迭代

语法：th:each="iter : ${iterated}"
示例：

th:each="prod : ${prods}"th:each="prod, iterStat : ${prods}"迭代状态，默认为prodStat：iterStat.indexiterStat.countiterStat.sizeiterStat.currentiterStat.eveniterStat.odditerStat.firstiterStat.last

条件分支

if 和 unless

语法：

th:if="..."th:unless="..."

switch

语法：

th:switch="..."th:case="..."

模板布局

引入模板片段

语法：

th:fragment="..."th:insert="..."th:replace="..."

示例：

th:insert="~{templatename::selector}"th:insert="~{templatename}"th:insert="~{::selector}"th:insert="~{}"th:insert="_"

模板片段传递参数

示例：

th:fragment="frag (onevar,twovar)"th:replace="::frag (${value1},${value2})"th:replace="::frag (onevar=${value1},twovar=${value2})"

移除模板片段

语法：th:remove="..."
备注：可以使用的值，all, body, tag, all-but-first, none

本地变量

语法：th:with="name=..."
示例：

th:with="firstPer=${persons[0]}"

注释

标准HTML/XML注释

语法：

<!--...-->

示例：

<!-- User info follows -->

Thymeleaf编译级注释块

语法：

<!--/* ... */-->

示例：

<!--/*--><div>you can see me only before Thymeleaf processes me!</div><!--*/-->

Thymeleaf原型注释块

语法：

<!--/*/.../*/-->

示例：

<!--/*/<div th:text="${...}">...</div>/*/-->

直接插入

直接插入表达式

语法：

th:inline="...", none, text, javascript, css[[...]] = th:text="..."[(...)] = th:utext="..."

示例：

var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";

文字模板模式

文字语法

语法：

[#element ...]...[/element][#element ... /]如果element为th:block可以省略

文字原型注释：添加代码

语法：

/*[+...+]*/

示例：

/*[+var msg = "This is a working application";+]*/

文字编译级注释：删除代码

语法：

/*[- */.../* -]*/

示例：

/*[- */var msg = "This is a working application";/* -]*/

自然语法

语法：

/*[[ ... ]]*/ ...;

备注：前面的代码编译起效，后面的静态起效
示例：

var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";

解耦模板逻辑

home.html

<!DOCTYPE html><html><body><table id="usersTable"><tr><td class="username">Jeremy Grapefruit</td><td class="usertype">Normal User</td></tr><tr><td class="username">Alice Watermelon</td><td class="usertype">Administrator</td></tr></table></body></html>

home.th.xml

<?xml version="1.0"?><thlogic>    <attr sel="#usersTable" th:remove="all-but-first">        <attr sel="/tr[0]" th:each="user : ${users}">            <attr sel="td.username" th:text="${user.name}" />            <attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />        </attr>    </attr></thlogic>

sel=”whatever”, selector可以为：

<whatever>
th:fragment=”whatever”
th:ref=”whatever”

0 0