Thymeleaf的使用

最新推荐文章于 2024-07-19 22:43:24 发布

丘比奇

最新推荐文章于 2024-07-19 22:43:24 发布

阅读量5.6k

点赞数 4

分类专栏： handbook 文章标签： thymeleaf

本文链接：https://blog.csdn.net/beachchou/article/details/52967049

版权

handbook 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
示例：

2016
3.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.index
iterStat.count
iterStat.size
iterStat.current
iterStat.even
iterStat.odd
iterStat.first
iterStat.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>