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.简单数据转换(数字,日期)
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 2</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1>Thymeleaf tutorial - Answer for exercise 2: bean values</h1>
<h2>Product information</h2>
<dl>
<dt>Product name</dt>
<dd th:text="${product.description}">red Chair</dd> <dt>Product price</dt>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">180</dd> <dt>Product available from</dt>
<dd th:text="${#dates.format(product.availableFrom, 'yyyy-MM-dd')}">2014-12-01</dd>
</dl>
</body>
</html>
  这里的 ${#numbers.formatDecimal(product.price, 1, 2)} 一般用来表示价格,是两位小数的double型数据, ${#dates.format(product.availableFrom, 'yyyy-MM-dd')} 一般用
来表示自定义格式的日期。注意:这里的product.price和product.available为后台传过来的数据,注意数据类型不要出错。
2.国际化
  <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{tutorial.exercise4}">Thymeleaf tutorial: exercise 4</title>
<link rel="stylesheet" href="../../../css/main-static.css" th:href="@{/css/main.css}" />
<meta charset="utf-8" />
</head>
<body>
<h1 th:text="#{tutorial.exercise4}">Thymeleaf tutorial - Solution for exercise 4: internationalization</h1>
<h2 th:text="#{product.info}">Product information</h2>
<dl>
<dt th:text="#{product.name}">Product name</dt>
<dd th:text="${product.description}">Red chair</dd> <dt th:text="#{product.price}">Product price</dt>
<dd th:text="${#numbers.formatDecimal(product.price, 1, 2)}">350</dd> <dt th:text="#{product.available}">Product available from</dt>
<dd th:text="${#dates.format(product.availableFrom, 'dd-MMM-yyyy')}">28-Jun-2013</dd>
</dl>
</body>
</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

3.转义和非转义文本
 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 5</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 5: escaped and unescaped text</h1>
<div th:text="${html}">
Some escaped text
</div>
<div th:utext="${html}">
Some unescaped text
</div>
</body>
</html>
  一个为原样输出,一个为转义输出

  上述两个div分别生成的html代码为:

 <div>This is an &lt;em&gt;HTML&lt;/em&gt; text. &lt;b&gt;Enjoy yourself!&lt;/b&gt;</div>
<div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
  
4.多条件判断
 <td th:switch="${customer.gender?.name()}">
<img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
<img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
<span th:case="*">Unknown</span>
</td>

  类似java中的switch case方法只有匹配到信息的才会显示。


 5.Spring表达式语言
  <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf tutorial: exercise 10</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 10: Spring Expression language</h1> <h2>Arithmetic expressions</h2>
<p class="label">Four multiplied by minus six multiplied by minus two module seven:</p>
<p class="answer" th:text="${4 * -6 * -2 % 7}">123</p> <h2>Object navigation</h2>
<p class="label">Description field of paymentMethod field of the third element of customerList bean:</p>
<p class="answer" th:text="${customerList[2].paymentMethod.description}">Credit card</p> <h2>Object instantiation</h2>
<p class="label">Current time milliseconds:</p>
<p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p> <h2>T operator</h2>
<p class="label">Random number:</p>
<p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
</body>
</html>

  页面中的操作分别为:页面计算,直接操作list里的某个对象,显示当前时间,取随机数

6.内联
 <!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>

  thymeleaf内联有三种,text,javascript,none

1.text

 <p th:inline="text">Hello, [[${session.user.name}]]!</p>
2.javascript
 <script th:inline="javascript">
/*<![CDATA[*/
var welcome = [[${welcome}]];
//通过th:inline="javascript"方式
// alert('th:inline="javascript"'+welcome);
/*]]>*/
</script>

  在这里需要对以上代码进行一下说明,js内联代码中需要加入 /*<![CDATA[*/  ......  /*]]>*/ 代码块,thymeleaf才能正确解析一些运算符(<等)和操作符号&/&&等。

另外,javascript内联时有以下两个特性:

  (1)javascript附加代码

语法: /*[+ +]*/     如:

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

  (2)javascript移除代码
语法: /*[- */ /* -]*/   如:

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

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

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

												

thymeleaf基本应用的更多相关文章

  1. spring boot(四):thymeleaf使用详解

    在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...

  2. Thymeleaf

    1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...

  3. Thymeleaf 模板的使用

    Thymeleaf是现代化服务器端的Java模板引擎,不同与JSP和FreeMarker,Thymeleaf的语法更加接近HTML,并且也有不错的扩展性.详细资料可以浏览官网.本文主要介绍Thymel ...

  4. vert.x学习(三),Web开发之Thymeleaf模板的使用

    在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...

  5. 页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题

    由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...

  6. Thymeleaf 与 Javascript

    在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...

  7. Thymeleaf+SpringMVC,如何从模板中获取数据

    Thymeleaf+SpringMVC,如何从模板中获取数据 在一个典型的SpringMVC应用中,带@Controller注解的类负责准备数据模型Map的数据和选择一个视图进行渲染.这个模型Map对 ...

  8. Thymeleaf+Spring整合

    前言 这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...

  9. thymeleaf常用标签

    1. th:checked ,th:selected标签<input type="radio" value="M" name="gender&q ...

  10. thymeleaf的常见用法

    1,th:属性名="",就可以直接修改控件的属性,比如 <input th:type="button" th:name="xinxin" ...

随机推荐

  1. nginx资源争夺问题

    nginx资源争夺问题 多个配置之间存在资源争夺的情况,需要进行整理: 学习了:https://blog.csdn.net/veryisjava/article/details/72917894 ng ...

  2. MySQL高可用解决方案MMM

    一.MMM简介: MMM即Multi-Master Replication Manager for MySQL:mysql多主复制管理器,基于perl实现,关于mysql主主复制配置的监控.故障转移和 ...

  3. S4:装饰模式 Decorator

    动态的给一个对象添加额外的一些职责,就增加功能而言,比继承更具灵活性. 如果仅有一个ConcreateComponent,也可以让Decorator继承ConcreateComponent来实现装饰功 ...

  4. PLSQL Developer设置技巧

    1.右键菜单 在PL/SQL Developer(下面简称PLD)中的每一个文本编辑窗口,如SQL Window,Command Window和Porgram Window,右键点击某个对象名称,会弹 ...

  5. 微软在GitHub上开放源代码

    https://github.com/MSOpenTech 点击链接:openFrameworks :https://github.com/openframeworks/openFrameworks ...

  6. PS 流格式解析(转)

    对于PS流,最近因为工作需要,所以MPEG2中的PS流格式和解包过程进行了学习. 首先我们需要知道PS包流格式是怎么样的: 针对H264 做如下PS 封装:每个IDR NALU 前一般都会包含SPS. ...

  7. 正则化--L2正则化

    请查看以下泛化曲线,该曲线显示的是训练集和验证集相对于训练迭代次数的损失. 图 1 显示的是某个模型的训练损失逐渐减少,但验证损失最终增加.换言之,该泛化曲线显示该模型与训练集中的数据过拟合.根据奥卡 ...

  8. 转Python 标准库 urllib2 的使用细节

    Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节描述的并不清楚,比如 urllib2 这个 HTTP 客户端库.这里总结了一些 urllib2 库的使用细节. 1 P ...

  9. PHP array_walk() 函数

    定义和用法 array_walk() 函数对数组中的每个元素应用用户自定义函数.在函数中,数组的键名和键值是参数. <?php function myfunction($value,$key,$ ...

  10. 复习mybatis框架(一)----映射文件

    参考博主的文章,尊重原创:https://blog.csdn.net/qq_35246620/article/details/54837618 一.给出映射文件 Mapper.xml 的总结: ① 设 ...