thymeleaf參考手冊

時間  2019-11-12
標籤 thymeleaf 參考 手冊 简体版
原文   原文鏈接

一、建立 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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
注意：html 中的標籤必須嚴格規範，標籤必須閉合，即<div />技術或者</div>相似結束
  • 1
  • 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標籤javascript

* * *
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 元素名稱的另外一種友好寫法css

<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

三、表達式語法

一、簡單表達式語法

  • #{...} : 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

二、變量

分類 示例
文本 ‘one text’ , ‘Another one!’ ,…
數字 0 , 34 , 3.0 , 12.3 ,…
真假 true , false
文字符號 one , sometext , main ,…

三、字符鏈接

分類 示例
+ ‘The name is ‘+${name}
|…| |The name is ${name}|

四、 算數運算

語法 示例
+, -, *, /, % 二元運算符
- 減號（一元運算符）

五、 真假運算

分類 示例
and , or 二元運算符
! , not 否認（一元運算符）

六、比較運算

分類 示例
>, <, >=, <= (gt, lt, ge, le) 比較
== , != ( eq , ne ) 平等

七、 條件運算

分類 示例
if-then (if) ? (then)
if-then-else (if) ? (then) : (else)
Default (value) ?: (defaultvalue)

綜合示例：html

'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))
  • 1

四、表達式中使用內置對象

#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

五、預處理

__${expression}__
  • 1

六、循環

<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

七、判斷

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

八、模板佈局

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

九、移除標籤 th:remove

取值範圍html5

  • all：移除全部java

  • body：不移除本身，但移除他的子標籤web

  • tag: 只移除本身，不移除他的子標籤spring

  • all-but-first：移除全部內容除第一個外express

  • none：啥都不作ruby

十、執行順序

這裏寫圖片描述

十一、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

十二、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

推薦下面寫法（編譯前看不見）bash

<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

1三、文本內聯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

1四、驗證模板的正確性

<!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

1五、特殊用法展現

<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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程