對(duì)于Thymeleaf，網(wǎng)上特別官方的解釋無非就是：網(wǎng)站或者獨(dú)立應(yīng)用程序的新式的服務(wù)端java模板引擎，可以執(zhí)行HTML，XML，JavaScript，CSS甚至純文本模板。這個(gè)解釋沒有任何問題，它確實(shí)是建立在Java的基礎(chǔ)之上的，但是像我這種只會(huì)前端不懂Java的人，其實(shí)也可以運(yùn)用它。

了解angular的人在看到Thymeleaf就會(huì)感到驚喜，它們?cè)谛问缴掀鋵?shí)是比較相似的。那么，Thymeleaf需要從那里看起？作為Java小白，剛開始看了網(wǎng)上那么多Thymeleaf文章也看不出個(gè)所以然，今天好不容易才整理出頭緒，接下來就開始切入正題：

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

后臺(tái)傳出的food.name會(huì)將靜態(tài)數(shù)據(jù)“noodles”替換掉，若訪問靜態(tài)頁面，則顯示數(shù)據(jù)“noodles”。是不是和angular很像？下面我們就來換一種方式，不同于其他博客上的方式來介紹Thymeleaf。

當(dāng)然，首先大家要先知道th簡(jiǎn)單表達(dá)式：

1.th簡(jiǎn)單表達(dá)式：

(1)${...}變量表達(dá)式：

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

上述代碼為引用user對(duì)象的name屬性值。

(2)*{...}選擇表達(dá)式:

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

選擇表達(dá)式一般跟在th:object后，直接選擇object中的屬性。

(3)#{...}消息文字表達(dá)式：

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

(4){...}鏈接url表達(dá)式：

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

{……}支持決定路徑和相對(duì)路徑。其中相對(duì)路徑又支持跨上下文調(diào)用url和協(xié)議的引用（//code.jquery.com/jquery-2.0.3.min.js）。

當(dāng)URL為后臺(tái)傳出的參數(shù)時(shí)，代碼如下：

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

當(dāng)理解了這四個(gè)表達(dá)式后，我就信心滿滿的去向下看文檔，然后我發(fā)現(xiàn)我看不懂了。。。因?yàn)槲也焕斫馐裁词莟h:field='';th:action='';諸如此類的好多好多，后來在一個(gè)博客上看到這一類的是所謂的Thymeleaf的屬性，或者是常用的th:標(biāo)簽，下面我們就來整理學(xué)習(xí)一下這些標(biāo)簽：

下面我們會(huì)詳細(xì)介紹一些常用的標(biāo)簽：

2.th常用標(biāo)簽：

(1)th:id:

類似html標(biāo)簽中的id屬性。

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

(2)th:text:與th:utext:

即文本顯示，可對(duì)表達(dá)式或變量求值，并將結(jié)果顯示在其被包含的HTML標(biāo)簽內(nèi)，替換原有HTML文本。這里需要與th:utext:區(qū)分開，th:text:例子如下：

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

也就是說，會(huì)輸出 welcome to our &lt;b&gt;delicious&lt;/b&gt;restaurant</>  當(dāng)然，我們是不會(huì)希望頁面上出現(xiàn)&lt;和e&gt;的，這時(shí)候，我們就需要使用th:utext:來進(jìn)行轉(zhuǎn)義，即用 <p h:utext="#{restaurant.welcome}"></p>

所以最終輸出的結(jié)果為：welcome to our delicious restaurant!

(3)th:object：

用于表單數(shù)據(jù)對(duì)象綁定，將表單綁定到后臺(tái)controller的一個(gè)JavaBean參數(shù),常與th:field一起使用進(jìn)行表單數(shù)據(jù)綁定。選擇表達(dá)式一般跟在th:object后，直接取object中的屬性。

這里有一個(gè)需要注意的點(diǎn)：*{...}表達(dá)式的值是在選定的對(duì)象而不是整個(gè)context的map。也就是說，如果沒有選定的對(duì)象，*{...}和${...}沒有區(qū)別，請(qǐng)看下面的例子：

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

上面這段代碼相當(dāng)于：

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

(4)th:field：上面提到了一個(gè)新標(biāo)簽，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:定義后臺(tái)控制器路徑，類似<form>標(biāo)簽的action屬性。

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

(6)th：href:定義超鏈接，類似<a>標(biāo)簽的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>

以上就是動(dòng)力節(jié)點(diǎn)小編介紹的"Thymeleaf標(biāo)簽使用詳情"，希望對(duì)大家有幫助，想了解更多可查看Thymeleaf視頻教程，如有疑問，請(qǐng)?jiān)诰€咨詢，有專業(yè)老師隨時(shí)為您服務(wù)。