spring boot 中用到的thymeleaf (模板引擎)

                               thymeleaf

 

一.          简要:

thymeleaf 支持html5标准;是一种模板引擎框架(TemplateEngine Framework);thymeleaf 页面无须部署到servlet开发到服务器上,直接通过浏览器就能打开。它可以完全替代 JSP 。特点:

  • 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态内容,使页面动态显示。

  • 2.它提供标准和spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果。

  • 3.Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块,可以快速的实现表单绑定、属性编辑器、国际化等功能。

二.          thymeleaf 标准表达式语法

1.      简单表达式

(1)      Variable Expressions(变量表达式):${…}。

EX: ${session.user.name}

它们将以HTML标签的一个属性来表示:

  
  • 变量表达式可以是OGNL表达式或Spring EL表达式。

      
    
  • 这里${books}从上下文中选择名为books的变量,并将其评估为可在th:each循环中使用的迭代器(iterable)

    e.g.

    1.Established locale country: <spanth:text="${#locale.country}">US

    2.

      Today is: th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011

    (2)      Selection Expressions(选择表达式):*{…}。

    EX:  *{customer.name} ​​​​​​​

    (所有可用值表达式:比如*{name} 从可用值中查找name,如果有上下文,比如上层是object,则查object中的name属性。)

     

    所作用的对象由th:object属性指定。

    EXspring boot 中用到的thymeleaf (模板引擎)_第1张图片

    equals:(等价于)

    spring boot 中用到的thymeleaf (模板引擎)_第2张图片

    (3)      Message(il8n)Expressions(消息表达式):#{…}。

    文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties),用Key索引Value,还可以提供一组参数(可选).

    国际化时使用,也可以使用内置的对象,比如date格式化数据

    EX:

          
          ...  
            
          ...  
        
    ... ...
        #{main.title}  
        #{message.entrycreated(${entryId})}  
    

    注意:如果希望消息key由上下文变量的值确定,或者将变量指定为参数,则可以在消息表达式中使用变量表达式。

    (4)      Link(URL)Expressions(链接表达式):@{…}

    URL表达式指的是把一个有用的上下文或回话信息添加到URL,这个过程经常被叫做URL重写。
     @{/order/list} 
    URL还可以设置参数:
     @{/order/details(id=${orderId})}  
    相对路径:
     @{../documents/report} 

    EX:

    链接表达式可以是相对的,在这种情况下,应用程序上下文将不会作为URL的前缀。

    也可以是服务器相对(同样,没有应用程序上下文前缀)

    e.g.

    th:href="@{http://www.thymeleaf/documentation.html}">

    equals:

    href="http://www.thymeleaf/documentation.html">

     

        

    spring boot 中用到的thymeleaf (模板引擎)_第3张图片

    (5)      Fragment Expressions(分段表达式):~{…}。

    分段表达式是一种表示标记片段并将其移动到模板周围的简单方法。

    最常见的用法是使用th:insert或th:replace插入片段。

     

    2.      字面量

    (1)      文本:’one text’ ’Another one!’等。

     

    th:class=" ‘the content’ ">...

    (2)      数值:0、34、3.0、12.3等。

    ex:    

    The year is th:text="2013">1492.

    (3)      布尔:true、false。

    ex:

    th:if="${user.isAdmin()} == false">

    ex:

    th:if="${user.isAdmin() == false}">

    (4)      null :null。

    ex: 

    th:if="${variable.something} == null">

    (5)      Literal Token(字面量标记):one、sometext、main等。

    ex: 

    ...

    3.      文本操作

    (1)      字符串拼接:+。

    (2)      文本替换:| The name is ${name} |。

    ex:

    
    
    
    
    

    4.      算数操作

    (1)      二元运算符:+、- 、* 、/、%。

    (2)      减号(单目运算符):—。

    1. +:1+1.
    2. -: 2-1.
    3. *:2*3.
    4. /: 9/4.
    5. %:9%4.

    5.      布尔操作

    (1)      二元运算符:and、or。

    (2)      布尔否定(一元运算符):!、not。

    1. and:and
    2. or:or
    3. !(not):not

    6.      比较和等价

    (1)     比较:>、<、>=、<=、(gt,lt,ge,le)。

    (2)      等价:==、!=、(eq、ne)。

    1. >(gt):大于>else
    2. 小于lt:小于else
    3. >=(ge):大于等于>=else
    4. 小于等于(le):小于等于else
    5. !(not):!(not)else
    6. ==(eq):等于==
    7. !=(ne/neq):size:

    7.  条件运算符

     (1)If-then:(if) ? (then)。

    (2)If-then-else:(if) ? (then) : (else)。

    (3)Default:(value) ? (default value)。

  • ? 'xx' :'xx'(if ? then:else)样例一
  • ?'xx'(if ? then)样例二
  • 8.特殊标记

    No-Operation(无操作):_。

    9.表达式基本对象(Expression Basic Objects)

    (1)#ctx:上下文对象。

    (2)#vars: 上下文变量。

    (3)#locale:上下文区域设置。

    (4)#request:HttpServletRequest对象(仅在Web上下文中)。

    (5)#response:HttpServletResponse对象(仅在Web上下文中)。

    (6)#session:HttpSession对象(仅在Web上下文中)。

    (7)#servletContext:ServletContext对象(仅在Web上下文中)。

    10.表达式工具对象(ExpressionUtility Objects)

    (1)#execInfo:模板执行的信息。

    (2)#message:在变量内获取外部信息的方法表达式,与使用#{…}语法获得的方式相同。

    (3)#uris:用于转义URL/URI部分的方法。

    (4)#conversions:执行已配置的conversion service。

    (5)#numbers:格式化数字对象的方法。

    (6)#strings:String对象的方法,包括contains,startsWith,prepending/appending等。

    (7)#objects:对象通常方法。

    (8)#bools:布尔判断的方法。

    (10)#lists:list方法。

    (11)#sets:set方法。

    (12)#maps:map方法。

    (13)#aggregates:在数组或集合上创建聚合的方法。

    (14)#ids:用于处理可能重复的id属性的方法(如作为迭代的结果)。

    常用th标签都有那些?

    使用thymeleaf布局

    使用thymeleaf布局非常的方便

    定义代码片段

    © 2016

    在页面任何地方引入:

     
      

    th:include 和 th:replace区别,include只是加载,replace是替换

    返回的HTML如下:

     
       
    © 2016
    © 2016

    下面是一个常用的后台页面布局,将整个页面分为头部,尾部、菜单栏、隐藏栏,点击菜单只改变content区域的页面

    
      
    
    

    任何页面想使用这样的布局值只需要替换中见的 content模块即可

     
       
          
    ...

    也可以在引用模版的时候传参

    
    

    layout 是文件地址,如果有文件夹可以这样写 fileName/layout:htmlhead
    htmlhead 是指定义的代码片段 如 th:fragment="copy"

    六.表达式基本对象

    1.基本对象

    (1)#ctx:上下文对象。

    (2)#locale:直接访问与java.util.Locale关联的当前的请求。

    2.web上下文命名空间

    (1)param:用于检索请求参数。

    (2)session:用于检索会话属性。

    (3)application:用于检索应用及上下文属性。

    3.web上下文对象

    (1)#request:直接访问与当前请求关联的javax.servlet.http.HttpServletRequest对象。

    (2)#session:直接访问与当前请求关联的javax.servlet.http.HttpSession对象。

    (3)#servletContext:直接访问与当前请求关联的javax.servlet.ServletContext对象。

    七.模板注释

    1.标准 HTML/XML注释

      语法  

      2.解析器级注释块(Parser-level comment blocks)

         语法

          thymeleaf解析时会移除代码

         单行

         双行

              

               Xxxxxx

               Xxxxxx

             

    3.针对原型的注释

    语法

    thymealeaf解析时会移除掉此标签对,但不会移除其中的内容

    spring boot 中用到的thymeleaf (模板引擎)_第16张图片spring boot 中用到的thymeleaf (模板引擎)_第17张图片

    4.与th:block结合

    thymealeaf解析时会移除掉此标签对,但不会移除其中的内容

    spring boot 中用到的thymeleaf (模板引擎)_第18张图片

    spring boot 中用到的thymeleaf (模板引擎)_第19张图片

    内联

    [[...]]是内联文本的表示格式,但需要使用th:inline属性(分为text,javascript,none)激活.

    1.文本内联

       

    th:inline="text">Hello, [[${session.user.name}]]!

       2.脚本内联

        

    Note:

    1.脚本注释/* */中的内容会在浏览器端静态打开页面时被忽略

    2.thymeleaf解析模板时会把后面的文本'Sebastian'移除.

    javascript内联时特性

    <1>javascript附加代码

    语法:/*[+   +]*/ 

    /*[+

    var msg  = 'This is a working application';

    +]*/

    <2>javascript移除代码

    语法:/*[- */    /* -]*/

    /*[- */

    var msg  = 'This is a non-working template';

    /* -]*/

     

     

    你可能感兴趣的:(thymeleaf)

    关键字 功能介绍 案例
    th:id 替换id   
    th:text 文本替换

    description

    th:utext 支持html的文本替换

    conten

    th:object 替换对象
     
    th:value 属性赋值  
    th:with 变量赋值运算
     
    th:style 设置样式 th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''" 
    th:onclick 点击事件 th:onclick="'getCollect()'" 
    th:each 属性赋值 tr th:each="user,userStat:${users}"> 
    th:if 判断条件   
    th:unless 和th:if判断相反 Login 
    th:href 链接地址 Login /> 
    th:switch 多路选择 配合th:case 使用
     
    th:case th:switch的一个分支  

    User is an administrator

    th:fragment 布局标签,定义一个代码片段,方便其它地方引用
    th:include 布局标签,替换内容到引入的文件 /> 
    th:replace 布局标签,替换整个标签到引入的文件
     
    th:selected selected选择框 选中 th:selected="(${xxx.id} == ${configObj.dd})"
    th:src 图片类地址引入 App Logo 
    th:inline 定义js脚本可以使用变量

    js附加代码:

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

    js移除代码:

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

    6、内嵌变量

    为了模板更加易用,Thymeleaf还提供了一系列Utility对象(内置于Context中),可以通过#直接访问:

     下面用一段代码来举例一些常用的方法:

     dates

     

    • dates : java.util.Date的功能方法类。
    • calendars : 类似#dates,面向java.util.Calendar
    • numbers : 格式化数字的功能方法类
    • strings : 字符串对象的功能类,contains,startWiths,prepending/appending等等。
    • objects: 对objects的功能类操作。
    • bools: 对布尔值求值的功能方法。
    • arrays:对数组的功能类方法。
    • lists: 对lists功能类方法
    • sets
    • maps
    /*
     * Format date with the specified pattern
     * Also works with arrays, lists or sets
     */
    ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
    ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
    ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
    ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')}
    
    /*
     * Create a date (java.util.Date) object for the current date and time
     */
    ${#dates.createNow()}
    
    /*
     * Create a date (java.util.Date) object for the current date (time set to 00:00)
     */
    ${#dates.createToday()}
    
    /*
     * Check whether a String is empty (or null). Performs a trim() operation before check
     * Also works with arrays, lists or sets
     */
    ${#strings.isEmpty(name)}
    ${#strings.arrayIsEmpty(nameArr)}
    ${#strings.listIsEmpty(nameList)}
    ${#strings.setIsEmpty(nameSet)}
    
    /*
     * Check whether a String starts or ends with a fragment
     * Also works with arrays, lists or sets
     */
    ${#strings.startsWith(name,'Don')}                  // also array*, list* and set*
    ${#strings.endsWith(name,endingFragment)}           // also array*, list* and set*
    
    /*
     * Compute length
     * Also works with arrays, lists or sets
     */
    ${#strings.length(str)}
    
    /*
     * Null-safe comparison and concatenation
     */
    ${#strings.equals(str)}
    ${#strings.equalsIgnoreCase(str)}
    ${#strings.concat(str)}
    ${#strings.concatReplaceNulls(str)}
    
    /*
     * Random
     */
    ${#strings.randomAlphanumeric(count)}
    
    

     

    五.thymeleaf模板片段

    1.定义和引用片段

    (1)定义片段属性用:   th:fragment

    spring boot 中用到的thymeleaf (模板引擎)_第12张图片

    fragment片段定义语法

    如th:fragment=”copy”这样就定义了一个名为copy的fragment

    spring boot 中用到的thymeleaf (模板引擎)_第13张图片

    模板操作

    主要引入公共头部和底部相关代码使用 ,当然也可以其他地方使用 
    - 示例

    底部模板代码

    
    
    
    
    © 2016 xxx

    Springboot整合引入模块

    
    

     

    th:include:将fragment的内容包含进来

    th:replace:用fragment替换掉所在标签

    (2)引用片段   th:insert 或 th:replace 属性

    (3)th:include 类似于th:insert 但不是插入片段,它只插入此片段的”内容“。

    注:th:insert 需要一个”片段表达式”(~{…})

    th:remove

      一般用于将模拟数据在真实环境中移除

       <1>all-移除标签及标签内容

       <2>body-只移除内容

       <3>tag-只移除所在标签

       <4>all-but-first-除第一条外移除所有内容

       <5>none-donothing.

    spring boot 中用到的thymeleaf (模板引擎)_第14张图片

    th:width

    定义局部变量

    1.可一次定义多个,逗号分隔

    spring boot 中用到的thymeleaf (模板引擎)_第15张图片

    外围包裹–block

    有时候需要在代码外部加层条件,但写div之类的又影响样式,此情况下你可以用下面这种方式:

        
            
    及格啦