首页 > 代码库 > Thymeleaf基本知识
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: internationalizationproduct.info=Product informationproduct.name=Product nameproduct.price=Product priceproduct.available=Product available fromback=Backfr
tutorial.exercise4=Tutorial De Thymeleaf - exercice 4: l‘internationalisationproduct.info=Information du produitproduct.name=Nom du produitproduct.price=Prix du produitproduct.available=Produit disponible depuisback=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 text12 </div>13 <div th:utext="${html}">14 Some unescaped text15 </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 days40 </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的交互教程
Thymeleaf基本知识
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。