thymeleaf參考手冊
1、創建html
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"></html>
另外:xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout".
th:* attributes :
layout:* attributes</code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre>
注意:html 中的標籤必須嚴格規範,標籤必須閉合,即<div />技術或者</div>類似結束
- 1
- 2
2、使用文本
語法 | 說明 |
---|---|
{home.welcome} | 使用國際化文本,國際化傳參直接追加(value…) |
${user.name} | 使用會話屬性 |
@{} | <link rel="stylesheet" type="text/css" media="all"href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> |
– | – |
${} 中預存對象(表達式中基本對象) | |
param | 獲取請求參數,比如${param.name},http://localhost:8080?name=jeff |
session | 獲取 session 的屬性 |
application | 獲取 application 的屬性 |
execInfo | 有兩個屬性 templateName和 now(是 java 的 Calendar 對象) |
ctx | |
vars | |
locale | |
httpServletRequest | |
httpSession | |
– | – |
th擴展標籤 | |
th:text | 普通字符串 |
th:utext | 轉義文本 |
th:href | |
th:attr | <img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> |
th:with | 定義常量 |
th:attrappend | |
th:classappend | |
th:styleappend |
其他th標籤
* | * | * |
---|---|---|
th:abbr | th:accept | th:accept-charset |
th:abbr | th:accept | th:accept-charset |
th:accesskey | th:action | th:align |
th:alt | th:archive | th:audio |
th:autocomplete | th:axis | th:background |
th:bgcolor | th:border | th:cellpadding |
th:cellspacing | th:challenge | th:charset |
th:cite | th:class | th:classid |
th:codebase | th:codetype | th:cols |
th:colspan | th:compact | th:content |
th:contenteditable | th:contextmenu | th:data |
th:datetime | th:dir | th:draggable |
th:dropzone | th:enctype | th:for |
th:form | th:formaction | th:formenctype |
th:formmethod | th:formtarget | th:frame |
th:frameborder | th:headers | th:height |
th:high | th:href | th:hreflang |
th:hspace | th:http-equiv | th:icon |
th:id | th:keytype | th:kind |
th:label | th:lang | th:list |
th:longdesc | th:low | th:manifest |
th:marginheight | th:marginwidth | th:max |
th:maxlength | th:media | th:method |
th:min | th:name | th:optimum |
th:pattern | th:placeholder | th:poster |
th:preload | th:radiogroup | th:rel |
th:rev | th:rows | th:rowspan |
th:rules | th:sandbox | th:scheme |
th:scope | th:scrolling | th:size |
th:sizes | th:span | th:spellcheck |
th:src | th:srclang | th:standby |
th:start | th:step | th:style |
th:summary | th:tabindex | th:target |
th:title | th:type | th:usemap |
th:value | th:valuetype | th:vspace |
th:width | th:wrap | th:xmlbase |
th:xmllang | th:xmlspace | th:alt-title 或th:lang-xmllang(如果其中兩個屬性值相同) |
對於 html5 元素名稱的另一種友好寫法
<table>
<tr data-th-each="user : ${users}">
<td data-th-text="${user.login}">...</td>
<td data-th-text="${user.name}">...</td> </tr>
</table>
- 1
- 2
- 3
- 4
- 5
3、表達式語法
1、簡單表達式語法
#{...}
: Message 表達式
<p th:utext="#{home.welcome(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper!</p>
<p th:utext="#{${welcomeMsgKey}(${session.user.name})}"> Welcome to our grocery store, Sebastian Pepper!</p>
- 1
- 2
${}
:變量表達式
ongl標準語法,方法也可以被調用
- 1
*{}
:選擇變量表達式
<div th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text={nationality}">Saturn</span>.</p>
</div>
等價於
<div>
<p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="${session.user.nationality}">Saturn</span>.</p>
</div>
當然了,這兩者可以混合使用
還有一種方式
<div>
<p>Name: <span th:text="*{session.user.name}">Sebastian</span>.</p>
<p>Surname: <span th:text="*{session.user.surname}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{session.user.nationality}">Saturn</span>.</p>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
@{}
: 鏈接 URL 表達式
<!-- Will produce 'http://localhost:8080/gtvg/order/details?orderId=3' (plus rewriting) --> <a href="details.html"
th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- Will produce '/gtvg/order/details?orderId=3' (plus rewriting) -->
<a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
2、變量
分類 | 示例 |
---|---|
文本 | ‘one text’ , ‘Another one!’ ,… |
數字 | 0 , 34 , 3.0 , 12.3 ,… |
真假 | true , false |
文字符號 | one , sometext , main ,… |
3、字符連接
分類 | 示例 |
---|---|
+ | ‘The name is ‘+${name} |
|…| | |The name is ${name}| |
4、 算數運算
語法 | 示例 |
---|---|
+, -, *, /, % | 二元運算符 |
- | 減號(一元運算符) |
5、 真假運算
分類 | 示例 |
---|---|
and , or | 二元運算符 |
! , not | 否定(一元運算符) |
6、比較運算
分類 | 示例 |
---|---|
>, <, >=, <= (gt, lt, ge, le) | 比較 |
== , != ( eq , ne ) | 平等 |
7、 條件運算
分類 | 示例 |
---|---|
if-then | (if) ? (then) |
if-then-else | (if) ? (then) : (else) |
Default | (value) ?: (defaultvalue) |
綜合示例:
'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
- 1
4、表達式中使用內置對象
#dates :
utility methods for java.util.Date objects: formatting, component extraction, etc. #calendars : analogous to #dates , but for java.util.Calendar objects.
#numbers :
utility methods for formatting numeric objects.
#strings :
utility methods for String objects: contains, startsWith, prepending/appending, etc. #objects : utility methods for objects in general.
#bools :
utility methods for boolean evaluation. #arrays : utility methods for arrays.
#lists :
utility methods for lists.
#sets :
utility methods for sets.
#maps :
utility methods for maps.
#aggregates :
utility methods for creating aggregates on arrays or collections.
#messages :
utility methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{...} syntax.
#ids :
utility methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
5、預處理
__${expression}__
- 1
6、循環
<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>
迭代器的狀態
index: 當前的索引,從0開始
count: 當前的索引,從1開始
size:總數
current:
even/odd:
first
last
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<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>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
7、判斷
if
<a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
unless
<a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>
switch
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p> <p th:case="#{roles.manager}">User is a manager</p>
</div>
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p> <p th:case="#{roles.manager}">User is a manager</p> <p th:case="*">User is some other thing</p>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
8、模板佈局
th:fragment
示例
templates/footer.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
<body>
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>
templates/index.html中使用
<body> ...
<div th:include="footer :: copy"></div>
</body>
或者
...
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
...
使用
<body> ...
<div th:include="footer :: #copy-section"></div>
</body>
th:include 和 th:replace 區別
th:include 加入代碼
th:replace 替換代碼
模板傳參:參數傳遞順序不強制
定義
<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
使用
<div th:include="::frag (${value1},${value2})">...</div>
<div th:include="::frag (onevar=${value1},twovar=${value2})">...</div>
等價於 <div th:include="::frag" th:with="onevar=${value1},twovar=${value2}">)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
9、移除標籤 th:remove
取值範圍
all:移除所有
body:不移除自己,但移除他的子標籤
tag: 只移除自己,不移除他的子標籤
all-but-first:移除所有內容除第一個外
none:啥都不做
10、執行順序
11、thymeleaf註釋語法
- html 看不到,並且 thymeleaf 不會執行
<!--/* This code will be removed at thymeleaf parsing time! */-->
- 1
- and 未運行可以在 html 中看到,運行後就消失
<!--/*-->
<div>you can see me only before thymeleaf processes me! </div>
<!--*/-->
- 1
- 2
- 3
- 運行後纔會看到
<span>hello!</span>
<!--/*/
<div th:text="${true}">...</div>
/*/-->
<span>goodbye!</span>
- 1
- 2
- 3
- 4
- 5
12、th:block 的使用
<table>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.login}">...</td> <td th:text="${user.name}">...</td>
</tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
</th:block>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
推薦下面寫法(編譯前看不見)
<table>
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td> </tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
<!--/*/ </th:block> /*/-->
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
13、文本內聯th:inline
th:inline 可以等於 text , javascript(dart) , none
- text: [[…]]
<p th:inline="text">Hello, [[#{test}]]</p>
- 1
- javascript: /[[…]]/
<script th:inline="javascript">
var username = /*[[
#{test}
]]*/;
var name = /*[[
${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}
]]*/;
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
<script th:inline="javascript">
/*<![CDATA[*/
var username = [[#{test}]];
var name = [[${param.name[0]}+${execInfo.templateName}+'-'+${#dates.createNow()}+'-'+${#locale}]];
/*]]>*/
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- adding code: /* [+…+]*/
var x = 23;
/*[+
var msg = 'Hello, ' + [[${session.user.name}]]; +]*/
var f = function() {
...
- 1
- 2
- 3
- 4
- 5
- removind code: /[- / and /* -]*/
var x = 23;
/*[- */
var msg = 'This is a non-working template'; /* -]*/
var f = function() {
...
- 1
- 2
- 3
- 4
- 5
14、驗證模板的正確性
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-transitional-thymeleaf-4.dtd">
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-frameset-thymeleaf-4.dtd">
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml11-thymeleaf-4.dtd">
- 1
- 2
- 3
- 4
15、特殊用法展示
<td th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}">23.32</td>
- 1
以上表示List orderLines的所有訂單的總價
附件A: 基礎對象
ctx:對應org.thymeleaf.spring[3|4].context.SpringWebContext
/*
* ======================================================================
* See javadoc API for class org.thymeleaf.context.IContext
* ====================================================================== */
${#ctx.locale} ${#ctx.variables}
/*
* ======================================================================
* See javadoc API for class org.thymeleaf.context.IWebContext
* ====================================================================== */
${#ctx.applicationAttributes}
${#ctx.httpServletRequest}
${#ctx.httpServletResponse}
${#ctx.httpSession}
${#ctx.requestAttributes}
${#ctx.requestParameters}
${#ctx.servletContext}
${#ctx.sessionAttributes}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
locale: 對應java.util.Locale
vars: 對應 org.thymeleaf.context.VariablesMap
/*
* ====================================================================== * See javadoc API for class org.thymeleaf.context.VariablesMap
* ====================================================================== */
${#vars.get('foo')}
${#vars.containsKey('foo')}
${#vars.size()}
...
- 1
- 2
- 3
- 4
- 5
- 6
- 7
param
${param.foo} 是一個 String[] 如果要獲取需要${param.foo[0]}
/*
* ============================================================================ * See javadoc API for class org.thymeleaf.context.WebRequestParamsVariablesMap * ============================================================================ */
${param.foo} // Retrieves a String[] with the values of request parameter 'foo'
${param.size()}
${param.isEmpty()}
${param.containsKey('foo')}
...
- 1
- 2
- 3
- 4
- 5
- 6
- 7
session
application
httpServletRequest
themes : as JSP tag spring:theme
Spring Beans 的訪問
<div th:text="${@authService.getUserName()}">...</div>
- 1
附件B:工具對象
dates See javadoc API for class org.thymeleaf.expression.Dates
calendars See javadoc API for class org.thymeleaf.expression.Calendars
numbers See javadoc API for class org.thymeleaf.expression.Numbers
strings See javadoc API for class org.thymeleaf.expression.Strings
objects See javadoc API for class org.thymeleaf.expression.Objects
bools See javadoc API for class org.thymeleaf.expression.Bools
arrays See javadoc API for class org.thymeleaf.expression.Arrays
lists See javadoc API for class org.thymeleaf.expression.Lists
sets See javadoc API for class org.thymeleaf.expression.Sets
maps See javadoc API for class org.thymeleaf.expression.Maps
aggregates See javadoc API for class org.thymeleaf.expression.Aggregates
messages See javadoc API for class org.thymeleaf.expression.Messages
ids See javadoc API for class org.thymeleaf.expression.Ids
附件C:DOM 選擇器語法
DOM選擇器借語法功能從XPath,CSS和jQuery,爲了提供一個功能強大且易於使用的方法來指定模板片段
<div th:include="mytemplate :: [//div[@class='content']]">...</div>
- 1
<div th:include="mytemplate :: [div.content]">...</div>
- 1
<link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/markdown_views-ea0013b516.css">
</div>
</article>
<div class="article-bar-bottom">
<div class="tags-box artic-tag-box">
<span class="label">文章標籤:</span>
<a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=html&t=blog" target="_blank">html </a><a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=thymeleaf&t=blog" target="_blank">thymeleaf </a>
</div>
<div class="tags-box">
<span class="label">個人分類:</span>
<a class="tag-link" href="https://blog.csdn.net/zrk1000/article/category/6935129" target="_blank">thymeleaf </a>
</div>
</div>
<!-- !empty($pre_next_article[0]) -->
</div>