Thymeleaf基本知识

Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用。

Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。Thymeleaf的可扩展性也非常棒。你可以使用它定义自己的模板属性集合,这样就可以计算自定义表达式并使用自定义逻辑。这意味着Thymeleaf还可以作为模板引擎框架。

Thymeleaf的模板还可以用作工作原型,Thymeleaf会在运行期替换掉静态值。例如下面的html文件,当作为静态文件时,product name显示为Red Chair,当运行在容器中并提供product这个对象时,product name的值会自动替换为product.description对应的值。

1.bean值替换
 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 1: 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="${product.price}">350</dd>
17 
18             <dt>Product available from</dt>
19             <dd th:text="${product.availableFrom}">2014-12-01</dd>
20         </dl>
21     </body>
22 </html>
2.简单数据转换(数字,日期)
 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>
3.字符串拼接
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 3</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 3: string concatenation</h1>
10         <h2>Product information</h2>
11         <dl>
12             <dt>Product price</dt>
13             <dd th:text="${'$'+product.price}">235</dd>
14         </dl>
15     </body>
16 </html>
4.国际化
 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需要相应的配置文件。例如如下配置文件:

en:

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

5.转义和非转义文本
 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代码为

<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
6.迭代
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 6</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 6: iteration</h1>
10         <h2>Product list</h2>
11         <table>
12             <thead>
13                 <tr>
14                     <th>Description</th>
15                     <th>Price</th>
16                     <th>Available from</th>
17                 </tr>
18             </thead>
19             <tbody th:remove="all-but-first">
20                 <tr th:each="product:${productList}">
21                     <td th:text="${product.description}">Red Chair</td>
22                     <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$123</td>
23                     <td th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</td>
24                 </tr>
25                 <tr>
26                     <td>White table</td>
27                     <td>$200</td>
28                     <td>15-Jul-2013</td>
29                 </tr>
30                 <tr>
31                     <td>Reb table</td>
32                     <td>$200</td>
33                     <td>15-Jul-2013</td>
34                 </tr>
35                 <tr>
36                     <td>Blue table</td>
37                     <td>$200</td>
38                     <td>15-Jul-2013</td>
39                 </tr>
40             </tbody>
41         </table>
42     </body>
43 </html>
7.迭代统计
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 7</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 7: iteration stats</h1>
10         <h2>Product list</h2>
11         <table>
12             <thead>
13                 <tr>
14                     <th>Index</th>
15                     <th>Description</th>
16                     <th>Price</th>
17                     <th>Available from</th>
18                 </tr>
19             </thead>
20             <tbody th:remove="all-but-first">
21                 <tr th:each="product : ${productList}">
22                     <td th:text="${productStat.count}">1</td>
23                     <td th:text="${product.description}">Red chair</td>
24                     <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
25                     <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
26                 </tr>
27                 <tr>
28                     <td>2</td>
29                     <td>White table</td>
30                     <td>$200</td>
31                     <td>15-Jul-2013</td>
32                 </tr>
33                 <tr>
34                     <td>3</td>
35                     <td>Reb table</td>
36                     <td>$200</td>
37                     <td>15-Jul-2013</td>
38                 </tr>
39                 <tr>
40                     <td>4</td>
41                     <td>Blue table</td>
42                     <td>$200</td>
43                     <td>15-Jul-2013</td>
44                 </tr>
45             </tbody>
46         </table>
47     </body>
48 </html>
8.条件判断
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 8</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 8: conditions</h1>
10         <h2>Product list</h2>
11         <table>
12             <thead>
13                 <tr>
14                     <th>Description</th>
15                     <th>Price</th>
16                     <th>Available from</th>
17                     <th></th>
18                 </tr>
19             </thead>
20             <tbody>
21                 <tr th:each="product : ${productList}">
22                     <td th:text="${product.description}">Red chair</td>
23                     <td th:text="${'$' + #numbers.formatDecimal(product.price, 1, 2)}">$350</td>
24                     <td th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</td>
25                     <td>
26                         <span th:if="${product.price lt 100}" class="offer">Special offer!</span>
27                     </td>
28                 </tr>
29             </tbody>
30         </table>
31     </body>
32 </html>
9.更多条件判断
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 9</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 9: more on conditions</h1>
10         <h2>Customer list</h2>
11         <table>
12             <thead>
13                 <tr>
14                     <th>First name</th>
15                     <th>Last name</th>
16                     <th>Gender</th>
17                     <th>Payment method</th>
18                     <th>Balance</th>
19                 </tr>
20             </thead>
21             <tbody th:remove="all-but-first">
22                 <tr th:each="customer : ${customerList}">
23                     <td th:text="${customer.firstName}">Peter</td>
24                     <td th:text="${customer.lastName}">Jackson</td>
25                     <!-- 
26                        Use th:switch for selecting content based on ${customer.gender}.
27                        As genre can be null if unknown, better use ${customer.gender?.name()}
28                        for obtaining its name.
29                     -->
30                     <td th:switch="${customer.gender?.name()}">
31                         <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
32                         <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
33                         <span th:case="*">Unknown</span>
34                     </td>
35                     <td>
36                         <span th:text="${customer.paymentMethod.description}">Direct debit</span>
37                         <!-- Show next message only when paymentMethod is not CREDIT_CARD -->
38                         <span th:unless="${customer.paymentMethod.name() == 'CREDIT_CARD'}" class="warn">
39                             Payment must be done in the next 4 days
40                         </span>
41                     </td>
42                     <!-- Add class="enhanced" when balance is greater than 10000 -->
43                     <td th:class="${customer.balance gt 10000} ? 'enhanced'" th:text="${customer.balance}">350</td>
44                 </tr>
45                 <tr>
46                     <td>Mary</td>
47                     <td>Johanson</td>
48                     <td><img src="../../../images/female.png" /></td>
49                     <td><span>Credit card</span></td>
50                     <td>5000</td>
51                 </tr>
52                 <tr>
53                     <td>Robert</td>
54                     <td>Allen</td>
55                     <td><img src="../../../images/male.png" /></td>
56                     <td>
57                         <span>Credit card</span>
58                         <span class="warn">Payment must be done in the next 4 days</span>
59                     </td>
60                     <td class="enhanced">50000</td>
61                 </tr>
62             </tbody>
63         </table>
64     </body>
65 </html>
10.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>
11.超链接
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 11</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 11: links</h1>
10         <h2>Product actions</h2>
11         <ul>
12             <li><a href="#" th:href="@{/exercise11/product.html(action='view')}">View product</a></li>
13             <li><a href="#" th:href="@{/exercise11/product.html(action='edit')}">Edit product</a></li>
14         </ul>
15     </body>
16 </html>
12.表单
 1 <!DOCTYPE html>
 2 <html xmlns:th="http://www.thymeleaf.org">
 3     <head>
 4         <title>Thymeleaf tutorial: exercise 12</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 12: forms</h1>
10         <h2>Customer edition</h2>
11         <form action="saveCustomer.html" th:action="@{/exercise12/saveCustomer.html}" th:object="${customer}" method="post">
12             <input type="hidden" th:field="*{id}" />
13             
14             <label for="firstName">First name:</label>
15             <input type="text" th:field="*{firstName}" value="John" />
16             
17             <label for="lastName">Last name:</label>
18             <input type="text" th:field="*{lastName}" value="Wayne" />
19             
20             Genre:
21             <div th:each="gender : ${genders}" class="radio">
22                 <input type="radio" th:value="${gender}" th:field="*{gender}" />
23                 <label th:for="${#ids.prev('gender')}" th:text="${gender.description}">Male</label>
24             </div>
25             <div th:remove="all" class="radio">
26                 <input type="radio" />
27                 <label>Female</label>
28             </div>
29             
30             <label for="paymentMethod">Payment method:</label>
31             <select th:field="*{paymentMethod}" th:remove="all-but-first">
32                 <option th:each="paymentMethod : ${paymentMethods}"
33                         th:value="${paymentMethod}" th:text="${paymentMethod.description}">Credit card</option>
34                 <option>Another payment method</option>
35                 <option>Another payment method</option>
36             </select>
37             
38             <label for="balance">Balance (dollars):</label>
39             <input type="text" th:field="*{balance}" size="10" value="2500" />
40             
41             <input type="submit" />
42         </form>
43     </body>
44 </html>
13.内联
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Thymeleaf tutorial: exercise 13</title>
		<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
		<meta charset="utf-8" />
	</head>
	<body>
		<h1>Thymeleaf tutorial - Solution for exercise 13: inlining</h1>
		<h2>Birthday email</h2>
		<form action="#" method="post">
			<label for="body">Message body:</label>
<textarea id="body" name="body" th:inline="text">
Dear [[${customerName}]],
it is our sincere pleasure to congratulate your in your birthday:
	Happy birthday [[${customerName}]]!!!
See you soon, [[${customerName}]].
Regards,
	The Thymeleaf team
</textarea>
			<input type="submit" value="Send mail" />
		</form>
	</body>
</html>

--------------------------------------------------------------------------------------------------------------

以上资料都来自http://itutorial.thymeleaf.org/。如果对Thymeleaf有兴趣,可以试试他们做的交互教程,很是好用。上面的html代码都是来自thymeleaf的交互教程

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章