Thymeleaf基本知识（推荐）
原文：
http://blog.csdn.net/pdw2009/article/details/44700897
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的交互教程
Thymeleaf基本知识（推荐）的更多相关文章
- Thymeleaf基础知识
Thymeleaf是一个Java类库,它是一个xml/xhtml/html5的模板引擎,可以作为MVC的Web引用的View层. Thymeleaf还提供了额外的模块与SpringMVC集成,因此推荐 ...
- Thymeleaf基本知识
Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...
- thymeleaf小知识
1.根据不同性别,显明不同的默认图片:th:if th:src 图片路径 <img th:if="${gender=='男'}" id="admission_p ...
- spring boot(四)：thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
- springboot(四)：thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
- thymeleaf模板的使用（转）
作者:纯洁的微笑 出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...
- springboot: thymeleaf 使用详解
springboot:thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4.0中推荐使用thymeleaf来做前端模版引擎 ...
- Spring Boot(四)：Thymeleaf 使用详解
在上篇文章Spring Boot (二):Web 综合开发中简单介绍了一下 Thymeleaf,这篇文章将更加全面详细的介绍 Thymeleaf 的使用.Thymeleaf 是新一代的模板引擎,在 S ...
- (转）Spring Boot(四)：Thymeleaf 使用详解
http://www.ityouknow.com/springboot/2016/05/01/spring-boot-thymeleaf.html 在上篇文章Spring Boot (二):Web 综 ...
随机推荐
- C# Socket通信DEMO
一.套接字(socket)概念 套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息:连接使用的协议,本 ...
- Linux安装Redis服务
下载:wget http://download.redis.io/releases/redis-5.0.5.tar.gz 解压:tar -zxvf redis-5.0.5.tar.gz 进入redi ...
- acm数论之旅--唯一分解定理
题目: 给出n,问n = b^p中p符合该等式的最大值 分析: 先求出所有n的质因子,然后对这m个质因子分类统计,比如 n = 36时,可以分成 2个2,2个3,然后求出所有这些基数的 最大公因数gc ...
- opencv：图像查找表 与 颜色表
LUT 使用 颜色查找表 example LUT applyColorMap // 读入制作好的lut.png Mat color = imread("D:/images/lut.png&q ...
- Vue基础笔记2
目录 1. 如何获取Vue对象中的成员? 2. pre指定 3. for循环 4. todolist 5. 分隔符 6. computed 计算后的 7. vue的生命周期(讲解不全) 8. watc ...
- python 在linux上面安装beautifulsoup4(bs4) No module named 'bs4'
续费了我的服务器 重做系统成了Linux服务器 然后想把Windown上的Python脚本放上去运行 但是出现了 No module named 'bs4' 的问题 pip install bs4 试 ...
- Java IO流详解（六）——转换流
转换流也是一种处理流,它提供了字节流和字符流之间的转换.在Java IO流中提供了两个转换流:InputStreamReader 和 OutputStreamWriter,这两个类都属于字符流.其中I ...
- python setattr()、getattr()、hasattr() 函数用法介绍
一.函数介绍 在动态检查对象是否包含某些属性(包括方法〉相关的函数有如下几个: hasattr(object,name):检查 object 对象是否包含名为 name 的属性或方法. getattr ...
- ZOJ4104 Sequence in the Pocket(2019浙江省赛）
思维~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; int b[maxn]; int N; int main ( ...
- 案例：WLC HA主WLC进入维护模式
案例场景: 如图所示,7609-1和7609-2分别是网络中的核心设备,起了HSRP,7609-1连接的是WLC-1,,7609-2连接的是WLC-2,WLC1和WLC2的RP口相互连接. WLC的管 ...