zoukankan      html  css  js  c++  java
  • 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.简单数据转换(数字,日期)
     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>
      这里的 ${#numbers.formatDecimal(product.price, 1, 2)} 一般用来表示价格,是两位小数的double型数据, ${#dates.format(product.availableFrom, 'yyyy-MM-dd')} 一般用
    来表示自定义格式的日期。注意:这里的product.price和product.available为后台传过来的数据,注意数据类型不要出错。

    2.国际化

     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


    3.转义和非转义文本
     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代码为:

    1 <div>This is an &lt;em&gt;HTML&lt;/em&gt; text. &lt;b&gt;Enjoy yourself!&lt;/b&gt;</div>
    2 <div>This is an <em>HTML</em> text. <b>Enjoy yourself!</b></div>
      

    4.多条件判断
    1 <td th:switch="${customer.gender?.name()}">
    2                          <img th:case="'MALE'" src="../../../images/male.png" th:src="@{/images/male.png}" alt="Male" /> <!-- Use "/images/male.png" image -->
    3                          <img th:case="'FEMALE'" src="../../../images/female.png" th:src="@{/images/female.png}" alt="Female" /> <!-- Use "/images/female.png" image -->
    4                          <span th:case="*">Unknown</span>
    5  </td>

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



    5.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>

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

    6.内联
     1 <!DOCTYPE html>
     2 <html xmlns:th="http://www.thymeleaf.org">
     3     <head>
     4         <title>Thymeleaf tutorial: exercise 13</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 13: inlining</h1>
    10         <h2>Birthday email</h2>
    11         <form action="#" method="post">
    12             <label for="body">Message body:</label>
    13 <textarea id="body" name="body" th:inline="text">
    14    Dear [[${customerName}]],
    15 
    16        it is our sincere pleasure to congratulate your in your birthday:
    17             Happy birthday [[${customerName}]]!!!
    18 
    19        See you soon, [[${customerName}]].
    20 
    21      Regards,
    22           The Thymeleaf team
    23 </textarea>
    24             <input type="submit" value="Send mail" />
    25         </form>
    26     </body>
    27 </html>

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

       1.text

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

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

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

      (1)javascript附加代码

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

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

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

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




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

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



  • 相关阅读:
    (转)JVM参数的说明、简单记法和GC调优策略
    深度学习论文翻译解析(十二):Fast R-CNN
    深度学习论文翻译解析(十一):OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks
    vue中组建的创建和使用
    CountDownLatch的理解和使用
    java多线程并发编程中对一些概念和关键字的理解
    spring中访问变量的用法
    mysql中group by优化
    vue中实现标题的国际化
    mysql中的覆盖索引,二级索引和索引排序
  • 原文地址:https://www.cnblogs.com/jin-zhe/p/8258788.html
Copyright © 2011-2022 走看看