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.简单数据转换（数字，日期）

 <!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基本应用的更多相关文章

spring boot(四)：thymeleaf使用详解
在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thymeleaf的使用.thymeleaf 是新一代的模板引擎,在spring4. ...
Thymeleaf
1.在html顶部添加 <html xmlns:th="http://www.thymeleaf.org"> 2.url表达式 @{...} <link rel= ...
Thymeleaf 模板的使用
Thymeleaf是现代化服务器端的Java模板引擎,不同与JSP和FreeMarker,Thymeleaf的语法更加接近HTML,并且也有不错的扩展性.详细资料可以浏览官网.本文主要介绍Thymel ...
vert.x学习（三），Web开发之Thymeleaf模板的使用
在vert.x中使用Thymeleaf模板,需要引入vertx-web-templ-thymeleaf依赖.pom.xml文件如下 <?xml version="1.0" e ...
页面上使用 Thymeleaf 的内联js不当造成了 java.lang.StackOverflowError: null 问题
由于在页面上内联js使用不当,从而在从 Controller 跳转到页面时发生了以下错误: java.lang.StackOverflowError: null at org.thymeleaf.ut ...
Thymeleaf 与 Javascript
在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...
Thymeleaf+SpringMVC，如何从模板中获取数据
Thymeleaf+SpringMVC,如何从模板中获取数据在一个典型的SpringMVC应用中,带@Controller注解的类负责准备数据模型Map的数据和选择一个视图进行渲染.这个模型Map对 ...
Thymeleaf+Spring整合
前言这个教程介绍了Thymeleaf与Spring框架的集成,特别是SpringMvc框架. 注意Thymeleaf支持同Spring框架的3.和4.版本的集成,但是这两个版本的支持是封装在thym ...
thymeleaf常用标签
1. th:checked ,th:selected标签<input type="radio" value="M" name="gender&q ...
thymeleaf的常见用法
1,th:属性名="",就可以直接修改控件的属性,比如 <input th:type="button" th:name="xinxin" ...

随机推荐

linux下c,c++头文件的路径
一. C语言包含的目录: 二. C++包含的目录
Elasticsearch 基础使用
使用 cURL 执行 REST 命令可以对 Elasticsearch 发出 cURL 请求,这样很容易从命令行 shell 体验该框架. “Elasticsearch 是无模式的.它可以接受您提供 ...
9.11排序与查找（一）——给定两个排序后的数组A和B，当中A的末端有足够的缓冲空间容纳B。将B合并入A并排序
/** * 功能:给定两个排序后的数组A和B,当中A的末端有足够的缓冲空间容纳B.将B合并入A并排序. */ /** * 问题:假设将元素插入数组A的前端,就必须将原有的元素向后移动,以腾出空间. ...
json-server模拟接口获取mock数据
转载:http://blog.csdn.net/stevennest/article/details/76167343 安装json-server 运行以下命令 cnpm install json-s ...
mysql开发之---使用游标双层嵌套对总表进行拆分为帖子表和回复表
注意点: (1)进行拆分的总表表名是不同的.所以创建暂时表,把总表的数据先插入暂时表 (2)为了避免最外层游标轮询数据结束时,抛出 not found 退出程序,不会运行关闭游标等兴许操作,定义con ...
在 Linux 系统下使用 PhotoRec & TestDisk 工具来恢复文件
当你在系统中有意或无意地使用 shift + delete 组合键.删除选项,或是清空回收站的方式来删除一个文件时,该文件的内容并没有从硬盘(或是其它存储设备)上直接销毁. 它仅仅是从系统的目录结构中 ...
Java + Selenium + WebDriver八大元素定位方式
UI自动化测试的第一步就是进行元素定位,下面给大家介绍一下Selenium + WebDriver的八大元素定位方式.现在我们就以百度搜索框为例进行元素定位,如下图: 一.By.name() Java ...
java中获取文件路径的几种方式
http://xyzroundo.iteye.com/blog/1116159关于绝对路径和相对路径: 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz es ...
C#写csv文件
1.在项目中经常需要把报表下载为csv格式的文件,如何在C#中写csv文件,以下为一个简化的例子,不使用任何控件,旨在说明用法. 前端view 下载结果 2.创建一个MVC项目(Intranet Ap ...
HDU 4738 Caocao's Bridges（找割边）
HDU 4738 Caocao's Bridges 题目链接注意几个坑,可能重边,至少要派一个人去炸,没有连通的时候就不用炸了代码: #include <cstdio> #includ ...

thymeleaf基本应用

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

随机推荐

热门专题