衝刺第二天——Thymeleaf
電子公文傳輸系統團隊衝刺第二天
——Thymeleaf
一、Thymeleaf
1、用途
Thymeleaf是一個現代伺服器端 Java 模板引擎，用於 Web 和獨立環境。
Thymeleaf 的主要目標是將優雅的自然模板引入開發工作流 —— HTML，它可以在瀏覽器中正確顯示，也可以作為靜態原型工作，從而在開發團隊中實現更強的協作。
2、feature
①Thymeleaf 在有網路和無網路的環境下皆可執行，即它可以讓美工在瀏覽器檢視頁面的靜態效果，也可以讓程式設計師在伺服器檢視帶資料的動態頁面效果。這是由於它支援 html 原型，然後在 html 標籤裡增加額外的屬性來達到模板+資料的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性，所以 thymeleaf 的模板可以靜態地執行；當有資料返回到頁面時，Thymeleaf 標籤會動態地替換掉靜態內容，使頁面動態顯示。
二、基本用法總結
1、引用名稱空間<html xmlns:th="http://www.thymeleaf.org">
在html中引入此名稱空間，可避免編輯器出現html驗證錯誤，雖然加不加名稱空間對Thymeleaf的功能沒有任何影響。
2、輸出內容
2.1 <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
說明：
1. th:text 用來將內容輸出到所在標籤的body中。
2.#{home.welcome} 用來引入資料home物件中的 welcome屬性。
3. 可以用th:utext 用來顯示“unescaped ” 的html內容。
2.2 <p>Today is: <span th:text="${today}">13 February 2011</span></p>
說明：${today} 用來引用 today 變數
3、訪問物件
${param.x} 返回名為x 的 request引數。（可能有多個值）
${session.x} 返回名為x的Session引數。
${application.x} 返回名為 servlet context 的引數。
4、基本語法
4.1 #｛home.welcome｝ -- 訪問資料
4.2 #{home.welcome(${session.user.name})} -- 格式化資料 當 home.welcome 為 "abcdegf{0}" 類似這種內容時。（多個引數以逗句分隔）。
4.3 ${today} --- 訪問變數
4.4 訪問基本物件
#ctx: the context object.
#vars: the context variables.
#locale: the context locale.
#request: (only in Web Contexts) the HttpServletRequest object.
#response: (only in Web Contexts) the HttpServletResponse object.
#session: (only in Web Contexts) the HttpSession object.
#servletContext: (only in Web Contexts) the ServletContext object.
4.5 日期的輸出
<span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>
4.6 星號語法
<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>
4.7 輸出URL
<a href="product/list.html" th:href="@{/product/list}">Product List</a> <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
4.8 使用程式碼段
<div th:insert="~{commons :: main}">...</div>
4.9 直接輸出內容
<span th:text="'working web application'"> -- 輸出字元 <span th:text="2013 + 2"> -- 輸出資料表示式 <div th:if="${user.isAdmin()} == false"> --輸出布林表示式 <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 帶變數的
4.10 條件表示式
<tr th:class="${row.even}? 'even' : 'odd'"> ... </tr> <tr th:class="${row.even}? 'alt'"> ...省略 false 結果的表達方式 </tr> <div th:object="${session.user}"> ...省略 true 結果的表達方式 <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p> </div> <span th:text="${user.name} ?: _">no user authenticated</span> --不做任何處理時用下劃線 _ 表示
4.11 格式化
<td th:text="${{user.lastAccessDate}}">...</td> --${{.}} 呼叫預設的格式化器來輸出結果。
4.12 預處理
<p th:text="${__#{article.text('textVar')}__}">Some text here...</p>
說明：thymeleaf 的處理模板內容的順序與書寫順序無關，只能通過 __${expression}__ ，來將需要先一步計算出來後面 要用的變數指定為優化處理。
5、設定 Attribute 值
5.1 設定任何Attribute 的方法
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/> --設定單個
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" /> --一次設定多個
5.2 設定一些內建的Attribute的方法
<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li> <form action="subscribe.html" th:action="@{/subscribe}"> <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/> <img src="../../images/gtvglogo.png" th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" /> -- 一次設定多個（alt title）的方法
5.3 設定html裡沒有指的任何屬性的語法
<span th:whatever="${user.name}">...</span> ---whatever 可以換成任何你想設的屬性
6、迴圈輸出的語法
6.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>
6.2 迴圈狀態的使用
<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>
7、條件判斷
7.1 if 和 unless
<a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a> <a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">view</a>
7.2 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> <p th:case="*">User is some other thing</p> --預設的 case 相當於default </div>
8、模板 include
8.1 定義和引用程式碼塊
定義程式碼塊 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> </body> </html> 引用程式碼塊 <body> ... <div th:insert="~{footer :: copy}"></div> </body> 引用未用fragment 標註的程式碼塊 <div id="copy-section"> © 2011 The Good Thymes Virtual Grocery </div> <body> ... <div th:insert="~{footer :: #copy-section}"></div> </body>
8.2th:insert th:replace th:include 之間的區別
th:insert --- 插入程式碼塊 th:replace -- 替換程式碼塊會替換掉容器標籤。
th:include ---- 和insert相似但只會插入fragment標註body內的內容。
8.3 帶引數的程式碼段
<div th:fragment="frag (onevar,twovar)"> <p th:text="${onevar} + ' - ' + ${twovar}">...</p> </div> <div th:replace="::frag (${value1},${value2})">...</div> <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
9、區域性變數的使用示例
<div th:with="firstPer=${persons[0]}"> <p> The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>. </p> </div> <div th:with="firstPer=${persons[0]},secondPer=${persons[1]}"> <p> The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>. </p> <p> But the name of the second person is <span th:text="${secondPer.name}">Marcus Antonius</span>. </p> </div>
10、註釋
<!-- ... -->
三、標準表示式語法
${...}變量表達式，Variable Expressions
@{...}連結表示式，Link URL Expressions
#{...}訊息表示式，Message Expressions
~{...}程式碼塊表示式，Fragment Expressions
*{...}選擇變量表達式，Selection Variable Expressions
~{...} 程式碼塊表示式
支援兩種語法結構
推薦：~{templatename::fragmentname}
支援：~{templatename::#id}
templatename：模版名，Thymeleaf會根據模版名解析完整路徑：/resources/templates/templatename.html，要注意檔案的路徑。
fragmentname：片段名，Thymeleaf通過th:fragment宣告定義程式碼塊，即：th:fragment="fragmentname"
id：HTML的id選擇器，使用時要在前面加上#號，不支援class選擇器。
程式碼塊表示式的使用
程式碼塊表示式需要配合th屬性（th:insert，th:replace，th:include）一起使用。
th:insert：將程式碼塊片段整個插入到使用了th:insert的HTML標籤中，
th:replace：將程式碼塊片段整個替換使用了th:replace的HTML標籤中，
th:include：將程式碼塊片段包含的內容插入到使用了th:include的HTML標籤中，
#{...} 訊息表示式
訊息表示式一般用於國際化的場景。
@{...} 連結表示式
連結表示式好處
不管是靜態資源的引用，form表單的請求，凡是連結都可以用@{...}。這樣可以動態獲取專案路徑，即便專案名變了，依然可以正常訪問
連結表示式結構
無參：@{/xxx}
有參：@{/xxx(k1=v1,k2=v2)}對應url結構：xxx?k1=v1&k2=v2
引入本地資源：@{/專案本地的資源路徑}
引入外部資源：@{/webjars/資源在jar包中的路徑}
${...} 變量表達式
變量表達式功能
一、可以獲取物件的屬性和方法
二、可以使用ctx，vars，locale，request，response，session，servletContext內建物件
三、可以使用dates，numbers，strings，objects，arrays，lists，sets，maps等內建方法（重點介紹）
常用的內建物件
一、ctx：上下文物件。
二、vars：上下文變數。
三、locale：上下文的語言環境。
四、request：（僅在web上下文）的 HttpServletRequest 物件。
五、response：（僅在web上下文）的 HttpServletResponse 物件。
六、session：（僅在web上下文）的 HttpSession 物件。
七、servletContext：（僅在web上下文）的 ServletContext 物件
常用的內建方法
一、strings：字串格式化方法，常用的Java方法它都有。比如：equals，equalsIgnoreCase，length，trim，toUpperCase，toLowerCase，indexOf，substring，replace，startsWith，endsWith，contains，containsIgnoreCase等
二、numbers：數值格式化方法，常用的方法有：formatDecimal等
三、bools：布林方法，常用的方法有：isTrue，isFalse等
四、arrays：陣列方法，常用的方法有：toArray，length，isEmpty，contains，containsAll等
五、lists，sets：集合方法，常用的方法有：toList，size，isEmpty，contains，containsAll，sort等
六、maps：物件方法，常用的方法有：size，isEmpty，containsKey，containsValue等
七、dates：日期方法，常用的方法有：format，year，month，hour，createNow等