thymeleaf基本應用

時間 2019-11-16

標籤 thymeleaf 基本應用简体版

原文原文鏈接

　　Thymeleaf是個XML/XHTML/HTML5模板引擎，能夠用於Web與非Web應用。javascript

　　Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板建立方式，所以也能夠用做靜態建模。你能夠使用它建立通過驗證的XML與HTML模板。相對於編寫邏輯或代碼，開發者只需將標籤屬性添加到模板中便可。接下來，這些標籤屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。Thymeleaf的可擴展性也很是棒。你能夠使用它定義本身的模板屬性集合，這樣就能夠計算自定義表達式並使用自定義邏輯。這意味着Thymeleaf還能夠做爲模板引擎框架。css

　　Thymeleaf的模板還能夠用做工做原型，Thymeleaf會在運行期替換掉靜態值。例以下面的html文件，看成爲靜態文件時，product name顯示爲Red Chair，當運行在容器中並提供product這個對象時，product name的值會自動替換爲product.description對應的值。html

1.簡單數據轉換（數字，日期）

 1 <!DOCTYPE html>
 2  <html xmlns:th="http://www.thymeleaf.org">
 3       <head>
 4           <title>Thymeleaf tutorial: exercise 2</title>
 5           <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
 6           <meta charset="utf-8" />
 7       </head>
 8       <body>
 9           <h1>Thymeleaf tutorial - Answer for exercise 2: bean values</h1>
10          <h2>Product information</h2>
11          <dl>
12              <dt>Product name</dt>
13              <dd th:text="${product.description}">red Chair</dd>
14  
15              <dt>Product price</dt>
16                <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd>
17  
18              <dt>Product available from</dt>
19              <dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>
20          </dl>
21      </body>
22  </html>

　　這裏的 ${#numbers.formatDecimal(product.price, 1, 2)} 通常用來表示價格，是兩位小數的double型數據， ${#dates.format(product.availableFrom, 'yyyy-MM-dd')} 通常用
來表示自定義格式的日期。注意：這裏的product.price和product.available爲後臺傳過來的數據，注意數據類型不要出錯。


2.國際化

 1  <!DOCTYPE html>
 2   <html xmlns:th="http://www.thymeleaf.org">
 3       <head>
 4           <title th:text="#{tutorial.exercise4}">Thymeleaf tutorial: exercise 4</title>
 5           <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
 6           <meta charset="utf-8" />
 7       </head>
 8       <body>
 9           <h1 th:text="#{tutorial.exercise4}">Thymeleaf tutorial - Solution for exercise 4: internationalization</h1>
10          <h2 th:text="#{product.info}">Product information</h2>
11          <dl>
12              <dt th:text="#{product.name}">Product name</dt>
13              <dd th:text="${product.description}">Red chair</dd>
14  
15              <dt th:text="#{product.price}">Product price</dt>
16              <dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd>
17  
18              <dt th:text="#{product.available}">Product available from</dt>
19              <dd th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</dd>
20          </dl>
21      </body>
22  </html>

　　此時html須要相應的配置文件。例如以下配置文件：java

en：express

tutorial.exercise4=Thymeleaf tutorial - exercise 4: internationalization
product.info=Product information
product.name=Product name
product.price=Product price
product.available=Product available from
back=Back

fr：瀏覽器

tutorial.exercise4=Tutorial De Thymeleaf - exercice 4: l'internationalisation
product.info=Information du produit
product.name=Nom du produit
product.price=Prix du produit
product.available=Produit disponible depuis
back=Revenir

3.轉義和非轉義文本

 1 <!DOCTYPE html>
 2   <html xmlns:th="http://www.thymeleaf.org">
 3       <head>
 4           <title>Thymeleaf tutorial: exercise 5</title>
 5           <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
 6           <meta charset="utf-8" />
 7       </head>
 8       <body>
 9           <h1>Thymeleaf tutorial - Solution for exercise 5: escaped and unescaped text</h1>
10          <div th:text="${html}">
11              Some escaped text
12          </div>
13          <div th:utext="${html}">
14              Some unescaped text
15          </div>
16      </body>
17  </html>

　　一個爲原樣輸出，一個爲轉義輸出

　　上述兩個div分別生成的html代碼爲：session

1 <div>This is an &lt;em&gt;HTML&lt;/em&gt; text. &lt;b&gt;Enjoy yourself!&lt;/b&gt;</div>
2 <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>

4.多條件判斷

1 <td th:switch="${customer.gender?.name()}">
2                          <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
3                          <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
4                          <span th:case="*">Unknown</span>
5  </td>

　　相似java中的switch case方法只有匹配到信息的纔會顯示。
app



 5.Spring表達式語言

 1  <!DOCTYPE html>
 2   <html xmlns:th="http://www.thymeleaf.org">
 3       <head>
 4           <title>Thymeleaf tutorial: exercise 10</title>
 5           <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
 6           <meta charset="utf-8" />
 7       </head>
 8       <body>
 9           <h1>Thymeleaf tutorial - Solution for exercise 10: Spring Expression language</h1>
10    
11          <h2>Arithmetic expressions</h2>
12          <p class="label">Four multiplied by minus six multiplied by minus two module seven:</p>
13          <p class="answer" th:text="${4 * -6 * -2 % 7}">123</p>
14   
15          <h2>Object navigation</h2>
16          <p class="label">Description field of paymentMethod field of the third element of customerList bean:</p>
17          <p class="answer" th:text="${customerList[2].paymentMethod.description}">Credit card</p>
18   
19          <h2>Object instantiation</h2>
20          <p class="label">Current time milliseconds:</p>
21          <p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p>
22          
23          <h2>T operator</h2>
24          <p class="label">Random number:</p>
25          <p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
26      </body>
27  </html>

　　頁面中的操做分別爲：頁面計算，直接操做list裏的某個對象，顯示當前時間，取隨機數框架

6.內聯

 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 13</title>
 5         <link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
 6         <meta charset="utf-8" />
 7     </head>
 8     <body>
 9         <h1>Thymeleaf tutorial - Solution for exercise 13: inlining</h1>
10         <h2>Birthday email</h2>
11         <form action="#" method="post">
12             <label for="body">Message body:</label>
13 <textarea id="body" name="body" th:inline="text">
14    Dear [[${customerName}]],
15 
16        it is our sincere pleasure to congratulate your in your birthday:
17             Happy birthday [[${customerName}]]!!!
18 
19        See you soon, [[${customerName}]].
20 
21      Regards,
22           The Thymeleaf team
23 </textarea>
24             <input type="submit" value="Send mail" />
25         </form>
26     </body>
27 </html>

　　thymeleaf內聯有三種，text，javascript，nonedom

1.text

1 <p th:inline="text">Hello, [[${session.user.name}]]!</p>

2.javascript

1 <script th:inline="javascript">
2    /*<![CDATA[*/
3    var welcome = [[${welcome}]];
4    //經過th:inline="javascript"方式
5    // alert('th:inline="javascript"'+welcome);
6    /*]]>*/
7 </script>

　　在這裏須要對以上代碼進行一下說明，js內聯代碼中須要加入 /*<![CDATA[*/ ...... /*]]>*/ 代碼塊，thymeleaf才能正確解析一些運算符(<等)和操做符號&/&&等。

另外,javascript內聯時有如下兩個特性：

　　(1)javascript附加代碼

語法： /*[+ +]*/ 如：

1 /*[+
2     var msg  = 'This is a working application';
3 +]*/

　　(2)javascript移除代碼
語法： /*[- */ /* -]*/ 如：

1 /*[- */
2     var msg  = 'This is a non-working template';
3 /* -]*/

參考: http://www.cnblogs.com/dreamfree/p/4158557.html

http://blog.csdn.net/sun_jy2011/article/details/40300001

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。