SpringBoot_thymeleaf參考手冊(轉發大神的) thymeleaf參考手冊

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&amp;t=blog" target="_blank">html						</a><a class="tag-link" href="http://so.csdn.net/so/search/s.do?q=thymeleaf&amp;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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章