Thymeleaf基本用法

阿新 • • 發佈：2018-11-11

特性

Thymeleaf是spring4.0中推薦的模板引擎技術，一種和 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP 。相較與其他的模板引擎，它有如下三個極吸引人的特點：

1.Thymeleaf 在有網路和無網路的環境下皆可執行，即它可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式設計師在伺服器檢視帶資料的動態頁面效果。這是由於它支援 html 原型，然後在 html 標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地執行；當有資料返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
2.Thymeleaf 開箱即用的特性。它提供標準和spring標準兩種方言，可以直接套用模板實現JSTL、 OGNL表示式效果，避免每天套模板、該jstl、改標籤的困擾。同時開發人員也可以擴充套件和建立自定義的方言。
3.Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美整合的可選模組，可以快速的實現表單繫結、屬性編輯器、國際化等功能。

引入

引用名稱空間 <html xmlns:th="http://www.thymeleaf.org">

在html中引入此名稱空間，可避免編輯器出現html驗證錯誤，雖然加不加名稱空間對Thymeleaf的功能沒有任何影響

表示式語法

變量表達式
選擇或星號表示式
文字國際化表示式
URL表示式

變量表達式

變量表達式即Spring EL表示式

${session.user.name}

它以html的標籤屬性來表示

<span th:text="${introduction}"/>
<li th:each="book:${books}"/>

選擇星號表示式

和變量表達式類似，不過需要一個預先選擇的物件作為容器來執行

*{user.name}

被指定的object由th:object來定義

<div th:object="${book}">
    <span th:text = "*{number}"></span>
    <span th:text = "*{name}"></span>
</div>

文字國際化表示式

文字國際化表示式可以從外部的properties檔案中，通過key索引到value

在 springmvc 中使用訊息要額外配置 ResourceBundleMessageSource 這個 bean:

    // 用於外部文字及國際化訊息
    @Bean
    public ResourceBundleMessageSource messageSource() {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("messages");
        return messageSource;
    }

這個 bean 會去 classpath 根目錄下去尋找 messages 為基名的 properties 檔案. 比如,
messages.properties, messages_en_US.properties, messages_zh_CN.properties.

th:text外部文字會替換 p 標籤內的內容.

<table>  
...  
<th th:text="#{header.address.city}">...</th>  
<th th:text="#{header.address.country}">...</th>  
...  
</table>

URL表示式

將上下文的資訊新增到URL，也稱為重寫URL

#url賦值
<form th:action="@{/book/1}">...<form>
#設定引數
<form th:action="@{/order/details(id=${orderId})}">...</form>
#設定引數，並再次渲染URL
<form th:action="@{/book/{action}(action=${action})}">...</form>
#設定相對路徑
<form th:action="@{../document/report}">...</form>

變量表達式和星號表示式的區別

如果不考慮上下文的情況下，兩者沒有區別；星號語法評估在選定物件上表達，而不是整個上下文。

什麼是選定物件，就是父標籤的值。

<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 th:object="${session.user}">
<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 th:object="${session.user}">
<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
<p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

表示式支援的語法

字面（Literals）

文字文字（Text literals）: 'one text', 'Another one!',…
數字文字（Number literals）: 0, 34, 3.0, 12.3,…
布林文字（Boolean literals）: true, false
空（Null literal）: null
文字標記（Literal tokens）: one, sometext, main,…

文字操作（Text operations）

字串連線(String concatenation): +
文字替換（Literal substitutions）: |The name is ${name}|

算術運算（Arithmetic operations）

二元運算子（Binary operators）: +, -, *, /, %
減號（單目運算子）Minus sign (unary operator): -

布林操作（Boolean operations）

二元運算子（Binary operators）:and, or
布林否定（一元運算子）Boolean negation (unary operator):!, not

比較和等價(Comparisons and equality)

比較（Comparators）: >, <, >=, <= (gt, lt, ge, le)
等值運算子（Equality operators）:==, != (eq, ne)

條件運算子（Conditional operators）

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

所有這些特徵可以被組合並巢狀：

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

常用的th標籤

1、賦值、字串拼接

 <p  th:text="${collect.description}">description</p>
 <span th:text="'Welcome to our application, ' + ${user.name} + '!'">

字串拼接還有另外一種簡潔的寫法：

<span th:text="|Welcome to our application, ${user.name}!|">

設定 Attribute 值

5.1 設定任何Attribute 的方法

<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/> --設定單個

<img src="../../images/gtvglogo.png" th:attr="[email protected]{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> --一次設定多個

5.2 設定一些內建的Attribute的方法

<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>

<img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" /> -- 一次設定多個（alt title）的方法

其它的可用屬性：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes

5.3 設定html裡沒有指的任何屬性的語法

<span th:whatever="${user.name}">...</span> ---whatever 可以換成任何你想設的屬性

2、條件判斷 If/Unless

Thymeleaf中使用th:if和th:unless屬性進行條件判斷，下面的例子中，<a>標籤只有在th:if中條件成立時才顯示：

<a th:if="${myself=='yes'}" > </i> </a>
<a th:unless=${session.user != null} th:href="@{/login}" >Login</a>

th:unless於th:if恰好相反，只有表示式中的條件不成立，才會顯示其內容。

也可以使用 (if) ? (then) : (else) 這種語法來判斷顯示的內容

3、for 迴圈

<tr  th:each="collect,iterStat : ${collects}"> 
     <th scope="row" th:text="${collect.id}">1</th>
     <td >
        <img th:src="${collect.webLogo}"/>
     </td>
     <td th:text="${collect.url}">Mark</td>
     <td th:text="${collect.title}">Otto</td>
     <td th:text="${collect.description}">@mdo</td>
     <td th:text="${terStat.index}">index</td>
 </tr>

iterStat稱作狀態變數，屬性有：

index:當前迭代物件的index（從0開始計算）
count: 當前迭代物件的index(從1開始計算)
size:被迭代物件的大小
current:當前迭代變數
even/odd:布林值，當前迴圈是否是偶數/奇數（從0開始計算）
first:布林值，當前迴圈是否是第一個
last:布林值，當前迴圈是否是最後一個

4、URL

URL在Web應用模板中佔據著十分重要的地位，需要特別注意的是Thymeleaf對於URL的處理是通過語法@{…}來處理的。如果需要Thymeleaf對URL進行渲染，那麼務必使用th:href，th:src等屬性，下面是一個例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
 <a  th:href="@{/standard/{type}(type=${type})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

設定背景

<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

根據屬性值改變背景

<div class="media-object resource-card-image"  th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.png' : ${collect.webLogo})} + ')'" ></div>

幾點說明：

上例中URL最後的(orderId=${o.id}) 表示將括號內的內容作為URL引數處理，該語法避免使用字串拼接，大大提高了可讀性
@{...}表示式中可以通過{orderId}訪問Context中的orderId變數
@{/order}是Context的相對路徑,在渲染時會自動新增上當前web應用的Context的名稱，假設context名字為app，那麼結果應該是/app/order

5、內聯js

內聯文字：[[…]]內聯文字的表示方式，使用時，必須先用th:inline=”text/javascript/none”啟用，th:inline可以在父級標籤內使用，甚至作為body的標籤。內聯文字儘管比th:text的程式碼少，不利於原型顯示。

在thymeleaf直譯器解析程式碼時會解析裡面的[[${session.user.name}]]
載入靜態頁時會解析註釋後面的語句 var username = 'Sebastian';

js內聯程式碼中需要加入/*<![CDATA[*/ ...... /*]]>*/程式碼塊，thymeleaf才能正確解析一些運算子(<等)和操作符號&/&&等。

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>

js附加程式碼：

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

js移除程式碼：

/*[- */
var msg = 'This is a non-working template';
/* -]*/

6、內嵌變數

為了模板更加易用，Thymeleaf還提供了一系列Utility物件（內置於Context中），可以通過#直接訪問：

dates ： java.util.Date的功能方法類。
calendars : 類似#dates，面向java.util.Calendar
numbers : 格式化數字的功能方法類
strings : 字串物件的功能類，contains,startWiths,prepending/appending等等。
objects: 對objects的功能類操作。
bools: 對布林值求值的功能方法。
arrays：對陣列的功能類方法。
lists: 對lists功能類方法
sets
maps

…

下面用一段程式碼來舉例一些常用的方法：

lists

 <tbody th:if="${not#lists.isEmpty(books)}">

dates

/*
 * Format date with the specified pattern
 * Also works with arrays, lists or sets
 */
${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}

/*
 * Create a date (java.util.Date) object for the current date and time
 */
${#dates.createNow()}

/*
 * Create a date (java.util.Date) object for the current date (time set to 00:00)
 */
${#dates.createToday()}

strings

/*
 * Check whether a String is empty (or null). Performs a trim() operation before check
 * Also works with arrays, lists or sets
 */
${#strings.isEmpty(name)}
${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)}
${#strings.setIsEmpty(nameSet)}

/*
 * Check whether a String starts or ends with a fragment
 * Also works with arrays, lists or sets
 */
${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*

/*
 * Compute length
 * Also works with arrays, lists or sets
 */
${#strings.length(str)}

/*
 * Null-safe comparison and concatenation
 */
${#strings.equals(str)}
${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)}
${#strings.concatReplaceNulls(str)}

/*
 * Random
 */
${#strings.randomAlphanumeric(count)}

使用thymeleaf佈局

使用thymeleaf佈局非常的方便

定義程式碼片段

<footer th:fragment="copy"> 
&copy; 2016
</footer>

在頁面任何地方引入：

<body> 
  <div th:include="footer :: copy"></div>
  <div th:replace="footer :: copy"></div>
 </body>

th:include 和 th:replace區別，include只是載入，replace是替換

返回的HTML如下：

<body> 
   <div> &copy; 2016 </div> 
  <footer>&copy; 2016 </footer> 
</body>

下面是一個常用的後臺頁面佈局，將整個頁面分為頭部，尾部、選單欄、隱藏欄，點選菜單隻改變content區域的頁面 ``` html

Header
left
sidebar

footer

 任何頁面想使用這樣的佈局值只需要替換中見的 content模組即可
``` html
 <html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
   <body>
      <section layout:fragment="content">
    ...

也可以在引用模版的時候傳參

<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

layout 是檔案地址，如果有資料夾可以這樣寫 fileName/layout:htmlhead

htmlhead 是指定義的程式碼片段如 th:fragment="copy"

轉載: https://zhuanlan.zhihu.com/p/24988845

Thymeleaf基本用法

使用thymeleaf佈局

Thymeleaf基本用法

spring boot thymeleaf基本用法總結

Thymeleaf 基本用法總結

shape的基本用法

Pinyin4j的基本用法

11.python並發入門（part9 多線程模塊multiprocessing基本用法）

Android屬性動畫完全解析(上)，初識屬性動畫的基本用法

JQuery的基本用法

Jquery-zTree的基本用法

IntBuffer類的基本用法

java基礎：運算符的基本用法

windows下boost庫的基本用法

XUtils3框架的基本用法(一)

Android_Event Bus 的基本用法

一站式學習Wireshark（一）：Wireshark基本用法

frame與iframe的區別及基本用法

Notification的基本用法以及使用RemoteView實現自定義布局

黃聰：ffmpeg基本用法(轉)

Oracle數據庫的基本用法

git 基本用法

Thymeleaf基本用法

使用thymeleaf佈局

相關推薦