2019独角兽企业重金招聘Python工程师标准>>>

原文 http://www.cnblogs.com/dreamfree/p/4158557.html

主题 Html

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

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>

转载于:https://my.oschina.net/u/2357525/blog/465919

Thymeleaf基本知识相关推荐

thymeleaf模板的使用（转）
作者:纯洁的微笑出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...
SpringBoot的Thymeleaf支持，结合SpringMVC做的案例（学习SpringBoot实战）
1.创建SpringBoot项目创建项目可以参考:http://blog.csdn.net/tototuzuoquan/article/details/78167839中通过Spring Initi ...
(转）Spring Boot(四)：Thymeleaf 使用详解
http://www.ityouknow.com/springboot/2016/05/01/spring-boot-thymeleaf.html 在上篇文章Spring Boot (二):Web 综 ...
spring boot(四)：thymeleaf使用详解
spring boot(四):thymeleaf使用详解在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用. ...
Spring Boot学习笔记：Spring Boot的Web功能
文章目录一.Spring Boot的Web支持二.Thymeleaf模板引擎 (一)Thymeleaf基础知识 1.引入Thymeleaf 2.访问Model数据 3.Model中的数据迭代 4. ...
Spring基础学习(一)
Spring基础 Spring概述 Spring是框架是一个轻量级的企业级开发的一站式解决方案.所谓解决方案就是可以基于Spring解决JavaEE开发的所有问题.Spring框架主要提供了IOC容器 ...
视频教程-SpringBoot后台CRM项目(第一季)-Java
SpringBoot后台CRM项目(第一季) 2011年毕业后在澳门遊澳集团(UO Group)旗下某IT科技公司从事 android,php,j2ee开发工作,负责国际短信发送系统.银联支付业务 ...
【Springboot】SpringBoot基础知识及整合Thymeleaf模板引擎
文章目录 SpringBoot简介 SpringBoot是什么为什么要学习SpringBoot SpringBoot的优势学习SpringBoot前要具备的基础创建第一个SpringBoot项目 ...
缓存核心知识小抄，面试必备，赶紧收藏！
缓存是为了减少数据库和服务器压力而产生的,在应用层编程时需主要考虑以下几种情况: 客户端缓存服务端缓存网络缓存(CDN缓存) 客户端缓存负责减轻服务端的存储和频繁的数据请求等压力. 例如,在QQ初 ...

Thymeleaf基本知识

原文 http://www.cnblogs.com/dreamfree/p/4158557.html

Thymeleaf基本知识相关推荐

最新文章

热门文章