初步認識Thymeleaf：簡單表達式和標籤。（一）

　　本文只適用於不會Java對HTML語言有基礎的程序員們，是瀏覽了各大博客後收集整理，從新編輯的一篇文章，但願能對你們有所幫助。最後本文若是有哪裏寫錯的，但願各位大神們可以批評指正，謝謝你們！

　　對於Thymeleaf，網上特別官方的解釋無非就是：網站或者獨立應用程序的新式的服務端java模板引擎，能夠執行HTML，XML，JavaScript，CSS甚至純文本模板。這個解釋沒有任何問題，它確實是創建在Java的基礎之上的，可是像我這種只會前端不懂Java的人，其實也能夠運用它。瞭解angular的人在看到Thymeleaf就會感到驚喜，它們在形式上實際上是比較類似的。那麼，Thymeleaf須要從那裏看起？做爲Java小白，剛開始看了網上那麼多Thymeleaf文章也看不出個因此然，今天好不容易纔整理出頭緒，接下來就開始切入正題：

<td th:text="${food.name}">noodles</td>

　　如上圖，後臺傳出的food.name會將靜態數據「noodles」替換掉，若訪問靜態頁面，則顯示數據「noodles」。是否是和angular很像？下面咱們就來換一種方式，不一樣於其餘博客上的方式來介紹Thymeleaf。

　　固然，首先你們要先知道th簡單表達式：

　　1、th簡單表達式：

　　　   ①  ${...}  變量表達式：

<input type="text" name="userName" value="Beyrl" th:value="${user.name}" />

　　　　上述代碼爲引用user對象的name屬性值。

　　　　② *{...}  選擇表達式:

<div th:object="${session.user}"> <p>Nationality: <span th:text="*{nationality}">XXXX</span>.</p> </div>

 　　　　選擇表達式通常跟在th:object後，直接選擇object中的屬性。

　　　　③ #{...}  消息文字表達式：

<p th:utext="#{home.welcome}">Welcome to our grocery store!</p>

　　　　④ @{...}  連接url表達式：

<a href="details.html" th:href="@{/webPage/details(orderId=${o.id})}">view</a>

　　　　@{……}支持決定路徑和相對路徑。其中相對路徑又支持跨上下文調用url和協議的引用（//code.jquery.com/jquery-2.0.3.min.js）。

　　　當URL爲後臺傳出的參數時，代碼以下：

<img src="../../webPage/food/images/pizza.jpg" th:src="@{${path}}" alt="披薩" />

 　　　　當理解了這四個表達式後，我就信心滿滿的去向下看文檔，而後我發現我看不懂了。。。由於我不理解什麼是th:field='';th:action='';諸如此類的好多好多，後來在一個博客上看到這一類的是所謂的Thymeleaf的屬性，或者是經常使用的th:標籤，下面咱們就來整理學習一下這些標籤：

　　　　這是在一個博客上看到的整理的較全的圖片，還有一個更全的，那個太多了，會嚇到初學者，不知道大家會不會，反正我是被嚇到了。。。

　　　　

　　　　下面咱們會詳細介紹一些經常使用的標籤：

　　　　二、th經常使用標籤：

　　　　1.th:id:

　　　　相似html標籤中的id屬性。

<div class="student" th:id = "food+(${pizza.index}+1)"></div>

　　　　2.th:text:與th:utext:

　　　　即文本顯示，可對錶達式或變量求值，並將結果顯示在其被包含的HTML標籤內，替換原有HTML文本。這裏須要與th:utext:區分開，th:text:例子以下：

　　　　若  restraunt.welcome=welcome to our <b>delicious</b>restaurant!  那麼，用 <p h:text="#{restaurantt.welcome}"></p> 解析的結果爲： welcome to our <b>delicious</b>restaurant! ，

也就是說，會輸出 welcome to our &lt;b&gt;delicious&lt;/b&gt;restaurant</>  固然，咱們是不會但願頁面上出現&lt;和e&gt;的，這時候，咱們就須要使用th:utext:來進行轉義，即用 <p h:utext="#{restaurant.welcome}"></p>

因此最終輸出的結果爲：welcome to our delicious restaurant!

 　　　　3.th:object：

　　　　用於表單數據對象綁定，將表單綁定到後臺controller的一個JavaBean參數,常與th:field一塊兒使用進行表單數據綁定。選擇表達式通常跟在th:object後，直接取object中的屬性。

 　　　  這裏有一個須要注意的點：*{...}表達式的值是在選定的對象而不是整個context的map。也就是說，若是沒有選定的對象，*{...}和${...}沒有區別，請看下面的例子：

<div th:object="${session.user}"> <p>姓名：<span th:text="*{Name}">noodles</span></p> <p>年齡：<span th:text="*{age}">24</span></p> <p>國籍：<span th:text="*{nationlity}">中國</span></p> </div>

　　　　上面這段代碼至關於：

<div> <p>姓名：<span th:text="${session.user.Name}">noodles</span></p> 
　 <p>年齡：<span th:text="${session.user.age}">24</span></p>
 <p>國籍：<span th:text="${session.user.nationlity}">中國</span></p></div>

 　　　　4.th:field：上面提到了一個新標籤，th:field：，經常使用於表單字段綁定。一般與th:object一塊兒使用。 屬性綁定、集合綁定。

<form th:action="@{/bb}" th:object="${user}" method="post" th:method="post"> <input type="text" th:field="*{name}"/> <input type="text" th:field="*{msg}"/> <input type="submit"/> </form>

 　　　　5.th:action:定義後臺控制器路徑，相似<form>標籤的action屬性。

<form action="subscribe.html" th:action="@{/subscribe}">

　　　　6.th：href:定義超連接，相似<a>標籤的href 屬性。value形式爲@{/logout}.

<!-- 輸出： 'http://localhost:8080/gtvg/order/details?orderId=3' --> <a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a> <!-- 輸出： '/gtvg/order/details?orderId=3' --> <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a> <!-- 輸出： '/gtvg/order/3/details' --> <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>

 　　　　7.th：src:用於外部資源引入，相似於<script>標籤的src屬性，常與@{}一塊兒使用。

<script th:src="@{/js/jquery/jquery-2.4.min.js}">

　　　　8.th:value:用於標籤賦值，相似<option>標籤的value屬性。

<option th:value="soup">soup</option> <input id="msg" th:value="${msg}" />

　　　　9.th:if or th:unless：條件判斷,支持布爾值，數字（非零爲true)，字符，字符串等.

<div th:if="${restaurant.index} == 0">... I love eating(do something at here) ...</div> <span th:if="${food.price lt 100}" class="offer">Special desert!</span> /*不能用"<"，">"等符號，要用"lt"等替代*/ <select class='form-control' name="skill[4].proficiency"> <option >掌握程度</option> <option th:if="${skill.level eq '通常'}" th:selected="selected">通常</option> <option th:if="${skill.level eq '熟練'}" th:selected="selected">熟練</option> <option th:if="${skill.level eq '精通'}" th:selected="selected">精通</option> </select>

 　　　　這裏有兩個須要注意的點：先看下面兩行代碼，

<div th:if="${user.isAdmin()} == false"> ...

<div th:if="${user.isAdmin() == false}"> ...

　　　　在這個例子中，==false是寫在了\({...}的外邊，因此使Thymeleaf自己在支持它，若是寫在了\){...}的裏邊，則變爲由OGNL或SpringEL庫來支持它。（***這裏目前我還未明白是什麼意思，但願明白的大神能告訴我這個問題***）

　　　　而null值也能夠這麼使用：

<div th:if="${variable.something} == null"> ...　　　

th:if不光可使用布爾值，如下規則均可以：

• 若是值不爲空：若是值爲null，th:if將爲false
  • 若是值爲布爾型而且爲true
  • 若是值爲數值型而且不爲0
  • 若是值爲character而且不爲0
  • 若是值爲String，而且不爲"false","off"和"no"
  • 若是值不爲布爾型，數值型，character或String的任意類型

 　  ● 若是值爲null，th:if將爲false

 　　　　th:if還有一個互逆的表達式爲th:unless,還繼續用以前的例子做一個演示：

<a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">查看</a>

　　　　下面的是一個th：if 例子，你們能夠照着套一下。

<table> <tr> <th>食物名稱</th> <th>食物價格</th> <th>可現作</th> <th>食客評價</th> </tr> <tr th:each="prod:${prods}"> <td th:text="${prod.name}">醋溜土豆絲</td> <td th:text="${#numbers.formatDecimal(prod.price,0,2)}">2.41</td> <td th:text="${prod.isReady}?#{true}:#{false}">yes</td> <td> <span th:text=${#lists.size(prod.comments)}>2</span>個評價 <a href="comments.html" th:href="@{/product/comments(prodId=${prod.id})}" th:if="${not #lists.isEmpty(prod.comments)}">查看</a> </td> </tr> </table>

　　　　若是產品有評論，那麼咱們就建立一個跳轉到評論頁面的超連接，而且使用產品ID做爲參數。

 　　　　10.th:switch 和th:case:選擇語句。 th:case="*"表示default case。注意：一旦一個th:case被判斷爲真，那麼其餘的同等級的th:case都將被判斷爲假

<div th:switch="${user.role}"> <p th:case="'admin'">超級管理員用戶</p> <p th:case="#{roles.manager}">管理員用戶</p> <p th:case="*">其餘用戶</p> </div>

 　　　　11.th:with:定義變量，th:with="isEven=${prodStat.count}%2 == 0"，定義多個變量能夠用逗號分隔。

<div th:with="firstPer=${persons[0]}"> <p> The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>. </p> </div>

當th:with被處理,firstPer變量建立一個局部變量和變量添加到map自上下文,以便它是用於評估和其餘上下文中聲明的變量從開始,但只有包含< 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>

th:with屬性容許重用變量定義在相同的屬性:

<div th:with="company=${user.company + ' Co.'},account=${accounts[company]}">...</div>

　　　　12.th:remove:移除除了第一個外的靜態數據，用第一個tr標籤進行循環迭代顯示:

 

<tbody th:remove="all-but-first"> 　　　　　　　　　　//將後臺傳出的 productList 的集合進行迭代，用product參數接收，經過product訪問屬性值 <tr th:each="product:${productList}"> 　　　　　　　　　　　　//用count進行統計，有順序的顯示 　　　　　　　　　　　　<td th:text="${productStat.count}">1</td> <td th:text="${product.description}">Red Chair</td> <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$123</td> <td th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</td> </tr> <tr> <td>White table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> <tr> <td>Reb table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> <tr> <td>Blue table</td> <td>$200</td> <td>15-Jul-2013</td> </tr> </tbody>