HTML5模板引擎 Thymeleaf 教程

jopen 11年前發布 | 697K 次閱讀 Thymeleaf 模板引擎

Thymeleaf是一個XML/XHTML/HTML5模板引擎,可用于Web與非Web環境中的應用開發。它是一個開源的Java庫,基于Apache License 2.0許可,由Daniel Fernández創建,該作者還是Java加密庫Jasypt的作者。

Thymeleaf提供了一個用于整合Spring MVC的可選模塊,在應用開發中,你可以使用Thymeleaf來完全代替JSP,或其他模板引擎,如Velocity、FreeMarker等。Thymeleaf的主要目標在于提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式,因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。相對于編寫邏輯或代碼,開發者只需將標簽屬性添加到模板中即可。接下來,這些標簽屬性就會在DOM(文檔對象模型)上執行預先制定好的邏輯。

示例模板:

<table>
  <thead>
    <tr>
      <th th:text="#{msgs.headers.name}">Name</td>
      <th th:text="#{msgs.headers.price}">Price</td>
    </tr>
  </thead>
  <tbody>
    <tr th:each="prod : ${allProducts}">
      <td th:text="${prod.name}">Oranges</td>
      <td th:text="${#numbers.formatDecimal(prod.price,1,2)}">0.99</td>
    </tr>
  </tbody>
</table>

這段介紹下面的實例模板 稍后我會逐一解釋


使用步驟

第一步 往 html頁面加入頭文件 相應的schema 就是這個網址


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
第二步就是你的原始模板



<table class="box-table-a">
        <caption>thyMeleaf使用教程</caption>
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">這是標題1</th>
                <th scope="col">這是標題2</th>
                <th scope="col">這是標題3</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>朱遇平</td>
                <td>java</td>
                <td>程序猿</td>

            </tr>

            <tr>
                <td>2</td>
                <td>張三</td>
                <td>php</td>
                <td>程序猿</td>

            </tr>
            <tr>
                <td>3</td>
                <td>李四</td>
                <td>c++</td>
                <td>程序猿</td>

            </tr>

        </tbody>
    </table>
第三部就是怎么采用ThyMeleaf標簽替換這些了 而不用改動模板以及樣式 thyMeleaf 是一個基于標簽 自定義屬性實現的一個模板引擎 ,這里怎么配置Thymeleaf先不說 到后面再說,先說說他的標簽用法


網上有一篇文章 總結的不錯 地址 http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html

這里我想詳細的講下 講完了 我就把上面的模型改成修改后的

# 代表 獲取對象 從 messages bundle 也就是消息的資源本地化文件

$ 表示從model里面獲取

# $這2個可以一起用 比如#{'system.'+${model.id}}  -----這相當于 #{system.01}的資源本地化文件中的system.01內容

下面介紹常用的標簽

th:fragment=“public” 相當于 include標簽

th:each="user : ${users}" 相當于c:foreach  使用時候

如上面

<tr th:each="user : ${users}">

<td th:text="${user.id}">01</td>

<td th:text="${user.name}">朱遇平</td>

<td th:text="${user.xx}">java</td>

<td th:text="${user.xx}">程序員</td>

</tr>

這些靜態數據不要管他 當運行時候自動替換

上面注意到th:text="${user.id}" 這是代表著運行時候動態設置標簽為用戶的id屬性的值

th:href="@{/users/delete(id=${u.id})}"> 

這是動態設置url屬性參考上面的文章總結

在表單的環境下 有時候我們可能需要動態數據綁定

OK thymeleaf 也有相關標簽 

首先了解的是

<form action="#" th:action="@{/users/add}" th:object="${myuser}" method="post">

這里th:Object表示表單與 改myuser注入的實體映射,

在表單 th:field="*{id} 則表示 該表單的值 與 myuser的id綁定 

這里注意到 我上面的遍歷表格只改了一個 其他的三個 你不是說可以不用改模板的 的 那該怎么辦啊

th:remove="all"  使用了該標簽 將在運行時候移除所有的元素

<tr th:remove="all">

</tr>

上面的其他幾行 就直接相當于忽略他了

趁著中午的時間 更新下。這里先講到這里了 有時間補充更新 它的配置 以及 spring整合

有人問我該怎么呢使用if 突然想到 我上面好像忘了講這個

經常有由td 表格展示某一行要判斷的情況

<td class="status" th:if="${#strings.isEmpty(status)}" th:text="這狀態為空">這里顯示狀態不為空</td>
同理 
${not #strings.isEmpty(status)}

換p標簽 只要把td改成p標簽即可

這里要提一下strings哪里來的 上面我們引用的那篇博文上的一段話

表達式基本對象:
#ctx:context object
#root或者#vars
#locale
#httpServletRequest
#httpSession

表達式功能對象:
#dates:java.util.Date的功能方法類。
#calendars:類似#dates,面向java.util.Calendar
#numbers:格式化數字的功能方法類。
#strings:字符串對象的功能類,contains,startWiths,prepending/appending等等。
#objects:對objects的功能類操作。
#bools:對布爾值求值的功能方法。
#arrays:對數組的功能類方法。
#lists:對lists功能類方法
#sets
#maps
#aggregates:對數組或者集合創建聚合的功能方法,
th:text="${#aggregates.sum(o.orderLines.{purchasePrice * amount})}"

#messages:在變量表達式中獲取外部信息的功能類方法。
#ids:處理可能重復的id屬性的功能類方法。
看到strings了沒 

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!