HTML5模板引擎 Thymeleaf 教程

時間 2019-11-08

標籤 html5 html 模板引擎 thymeleaf 教程欄目 HTML5 简体版

原文原文鏈接

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

Thymeleaf提供了一個用於整合Spring MVC的可選模塊，在應用開發中，你可使用Thymeleaf來徹底代替JSP，或其餘模板引擎，如Velocity、FreeMarker等。Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板建立方式，所以也能夠用做靜態建模。你可使用它建立通過驗證的XML與HTML模板。相對於編寫邏輯或代碼，開發者只需將標籤屬性添加到模板中便可。接下來，這些標籤屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。html

示例模板：java

<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>c++

這段介紹下面的實例模板稍後我會逐一解釋程序員

使用步驟spring

第一步往 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先不說到後面再說，先說說他的標籤用法app

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

這裏我想詳細的講下講完了我就把上面的模型改爲修改後的

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

$ 表示從model裏面獲取

# $這2個能夠一塊兒用好比#{'system.'+${model.id}} -----這至關於 #{system.01}的資源本地化文件中的system.01內容

下面介紹經常使用的標籤

th:fragment=「public」至關於 include標籤

th:each="user : ${users}" 至關於c:foreach 使用時候

如上面

</tr>

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

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

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

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

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

OK thymeleaf 也有相關標籤

首先了解的是

這裏th：Object表示表單與改myuser注入的實體映射，

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

這裏注意到我上面的遍歷表格只改了一個其餘的三個你不是說能夠不用改模板的的那該怎麼辦啊

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了沒