zoukankan      html  css  js  c++  java
  • Thymeleaf模板引擎用法总结

    Thymeleaf 基本用法总结

    一、引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 
    
            在html中引入此命名空间,可避免编辑器出现html验证错误,虽然加不加命名空间对Thymeleaf的功能没有任何影响。
    
     
    
    二、输出内容
    
            2.1  <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
    
            说明:
    
                     1. th:text  用来将内容输出到所在标签的body中。
    
                     2. #{home.welcome} 用来引入数据home对象中的 welcome属性。
    
                     3. 可以用th:utext 用来显示“unescaped ” 的html内容。
    
            2.2    <p>Today is: <span th:text="${today}">13 February 2011</span></p>
    
            说明:${today} 用来引用 today 变量
    
    三、访问对象      
    
           ${param.x} 返回名为x 的 request参数。(可能有多个值)
    
           ${session.x} 返回名为x的Session参数。
    
           ${application.x} 返回名为 servlet context 的参数。
    
         
    
    四、基本语法
    
           4.1  #{home.welcome} --  访问数据
    
           4.2  #{home.welcome(${session.user.name})}  -- 格式化数据 当 home.welcome 为 "abcdegf{0}"  类似这种内容时。(多个参数以逗句分隔)。
    
           4.3  ${today} --- 访问变量
    
           4.4  访问基本对象
    
    #ctx: the context object.
    #vars: the context variables.
    #locale: the context locale.
    #request: (only in Web Contexts) the HttpServletRequest object.
    #response: (only in Web Contexts) the HttpServletResponse object.
    #session: (only in Web Contexts) the HttpSession object.
    #servletContext: (only in Web Contexts) the ServletContext object.
    
    其它公共对象参考: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects
    
            4.5  日期的输出
    
            <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>
    
            4.6  星号语法
    
    <div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
    </div>
    
    4.7  输出URL
    
           <a href="product/list.html" th:href="@{/product/list}">Product List</a>
    
           <a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
    
           4.8  使用代码段
    
           <div th:insert="~{commons :: main}">...</div>
    
           4.9  直接输出内容   
    
    <span th:text="'working web application'"> -- 输出字符
    
    <span th:text="2013 + 2">  -- 输出数据表达式
    
    <div th:if="${user.isAdmin()} == false">  --输出布尔表达式
    
    <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 带变量的
    
    4.10 条件表达式
    
    <tr th:class="${row.even}? 'even' : 'odd'">
    ...  
    </tr>
    
    <tr th:class="${row.even}? 'alt'">
    ...省略 false 结果的表达方式
    </tr>
    
    <div th:object="${session.user}">
    ...省略 true 结果的表达方式
    <p>Age: <span th:text="*{age}?: '(no age specified)'">27</span>.</p>
    </div>
    
    <span th:text="${user.name} ?: _">no user authenticated</span> --不做任何处理时用下划线 _ 表示
    
    4.11  格式化 
    
           <td th:text="${{user.lastAccessDate}}">...</td> --${{.}}  调用默认的格式化器来输出结果。
    
           4.12  预处理
    
           <p th:text="${__#{article.text('textVar')}__}">Some text here...</p>  
    
           说明:thymeleaf 的处理模板内容的顺序与书写顺序无关,只能通过  __${expression}__ ,来将需要先一步计算出来后面          要用的变量指定为优化处理。
    
     
    
     五、设置 Attribute 值
    
           5.1 设置任何Attribute 的方法
    
           <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>   --设置单个
    
           <img src="../../images/gtvglogo.png"  th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />  --一次设置多个
    
            5.2 设置一些内置的Attribute的方法   
    
           <li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>
    
           <form action="subscribe.html" th:action="@{/subscribe}">
    
           <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
    
           <img src="../../images/gtvglogo.png"  th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" /> -- 一次设置多个(alt title)的方法
    
           其它的可用属性:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#setting-value-to-specific-attributes
    
            5.3 设置html里没有指的任何属性的语法
    
            <span th:whatever="${user.name}">...</span>   ---whatever 可以换成任何你想设的属性
    
     
    
    六、循环输出的语法
    
           6.1 基本循环
    
    <tr th:each="prod : ${prods}">
    
         <td th:text="${prod.name}">Onions</td>
         <td th:text="${prod.price}">2.41</td>
         <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>
    
    6.2 循环状态的使用
    
    <table>
    <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
    </tr>
    <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
    </tr>
    </table>
    
           关于状态的其它信息的使用详细参考:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#keeping-iteration-status
    
           
    
    七、条件判断
    
           7.1 if 和 unless
    
           <a href="comments.html" th:href="@{/comments(prodId=${prod.id})}" th:unless="${#lists.isEmpty(prod.comments)}">view</a>
    
           <a href="comments.html"  th:href="@{/product/comments(prodId=${prod.id})}"   th:if="${not #lists.isEmpty(prod.comments)}">view</a>
    
           7.2 switch 语句
    
    <div th:switch="${user.role}">
    <p th:case="'admin'">User is an administrator</p>
    <p th:case="#{roles.manager}">User is a manager</p>
    <p th:case="*">User is some other thing</p>    --默认的 case 相当于default
    </div>
    
     
    
    八、模板 include
    
          8.1 定义和引用代码块
    
          定义代码块
    
    <!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    
    <body>
    
    <div th:fragment="copy">
    &copy; 2011 The Good Thymes Virtual Grocery
    </div>
    
    </body>
    
    </html>
    
    引用代码块
    
    <body>
    
    ...
    
    <div th:insert="~{footer :: copy}"></div>
    
    </body>
    
    引用未用fragment 标注的代码块 
    
    <div id="copy-section">
    &copy; 2011 The Good Thymes Virtual Grocery
    </div>
    
    <body>
    
    ...
    
    <div th:insert="~{footer :: #copy-section}"></div>
    
    </body>
    
    8.2 th:insert th:replace th:include 之间的区别
    
    th:insert  --- 插入代码块    th:replace -- 替换代码块会替换掉容器标签   th:include ---- 和insert相似但只会插入fragment标注body内的内容。
    
    8.3  带参数的代码段
    
    <div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
    </div>
    
         <div th:replace="::frag (${value1},${value2})">...</div>
         <div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
    
     
    
    九、局部变量的使用示例
    
    <div th:with="firstPer=${persons[0]}">
    <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
    </p>
    </div>
    
    <div th:with="firstPer=${persons[0]},secondPer=${persons[1]}">
    <p>
    The name of the first person is <span th:text="${firstPer.name}">Julius Caesar</span>.
    </p>
    <p>
    But the name of the second person is
    <span th:text="${secondPer.name}">Marcus Antonius</span>.
    </p>
    </div>
    
    十、注释
    
            <!-- ... -->  
    
    十一、说明
    
            以上只列出Thymeleaf了简要常用的语法和使用方式,更多详情的说明和规则请参见:http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf
    

    基于Spring Boot的Thymeleaf使用

    SpringBoot中默认不在支持JSP页面,但它引入了模板框架的使用。我们可以使用模板框架对页面中的内容进行动态绑定

    Thymeleaf:一个服务端Java模板引擎,类似于JSP。它为网页的开发工作流程带来优雅的静态模板,它同时可以静态原型来使用。

    JSP本质上是Servlet的前端改版,JSP文件在服务器启动时会被转化为一个Servlet来运行,而这个转换过程的效率是十分低的。
    
    Thymeleaf不同于JSP的是它是在HTML文件上进行工作的,我们的模板可以单独作为HTML静态文件运行。模板的外观和功能上依旧类似于HTML,并且模板语法可以被浏览器正确的显示。
    

    引入Thymeleaf
    简单的例子:

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
     <head>
     <title>Welcome Page</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     </head>
     <body>
     <span th:text="${message}">Welcome to Thymeleaf!</span>
     </body>
     </body>
    </html>
    

    不同于原生静态页面,xmlns:th="http://www.thymeleaf.org"并不会对模板页面的生成启任何作用,主要是引入命名空间使得IDE不会对我们的模板语法报错;th:text="${message}为模板语法,用于替换标签所在的文本信息(如果${message}可以取出有效值)

    SpringBoot默认是支持Thymeleaf的,我们只需要导入对应的jar包即可:

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    

    如果SpringBoot默认指定的版本不符合我们的需求,我们可以在properties标签中覆盖SpringBoot指定的版本号。具体标签写法可以参考spring-boot-starter-parent的父pomspring-boot-dependencies

    导入对应的依赖后,SpringBoot将自动装配模板。并且部分属性配置如下:

    @ConfigurationProperties(prefix = "spring.thymeleaf")
    public class ThymeleafProperties {
    
    	private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
    
    	public static final String DEFAULT_PREFIX = "classpath:/templates/";
    
    	public static final String DEFAULT_SUFFIX = ".html";
    }
    
    

    我们可以知道模板默认支持.html文件,在我们控制器中进行跳转时只需返回模板名即可(类似于InternalResourceViewResolver)。并且我们默认以UTF-8编码解析模板

    Thymeleaf语法
    表达式
    Thymeleaf支持多种表达式,如:

    变量表达式${...}
    选择变量表达式*{...}
    链接表达式@{...}
    消息表达式#{...}
    代码表达式~{...}
    ${...}等同于OGNL语法,用于从上下文查找指定的值。如获取对象中的属性、调用对象的方法:

    /*
    * 使用(.)分割属性的层级,获取将调用属性的getter方法
    */
    ${person.father.name}
    /*
    * 还可以通过([])的方式获取属性
    */
    ${person['father']['name']}
    /*
    * 如果对象是一个map,则点和括号都可以调用map的get(Object key)方法
    */
    ${countriesByCode.ES}
    ${personsByName['Stephen Zucchini'].age}
    /*
    * 如果对象是一个数组,我们可以直接使用在Java中的调用方式
    */
    ${personsArray[0].name}
    /*
    * 表达式也可以调用对象的方法,方法可以传入参数
    */
    ${person.createCompleteName()}
    ${person.createCompleteNameWithSeparator('-')}
    
    

    OGNL也提供一些基本的表达式对象,我们可以直接使用#符号引用:

    #ctx:上下文对象
    #vars:上下文对象
    #locale:上下文区域设置
    #request:(仅在Web Contexts中)HttpServletRequest对象
    #response:(仅在Web上下文中)HttpServletResponse对象
    #session:(仅在Web上下文中)HttpSession对象
    #servletContext:(仅在Web上下文中)ServletContext对象
    

    我们可以这样得到一些变量:

    local country:<span th:text="${#locale.country}">US</span>
    
    

    实例补充:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#appendix-a-expression-basic-objects

    除此之外,OGNL还提供了一组工具对象供我们快速完成常见任务:

    #execInfo:有关正在处理的模板谢谢
    #message:用于在变量表达式中获取外部化消息的方法,与使用#语法获得的方式相同
    #uris:转义URL/URI部分的方法
    #conversions:执行配置的转换服务(如果有的话)的方法
    #dates:java.util.Date对象的方法:格式化,组件提取等
    #calendars:类似于#dates,但对于java.util.Calendar对象
    #numbers:用于格式化数字对象的方法
    #strings:String对象的方法:contains,startsWith,prepending/appending等
    #objects:一般对象的方法
    #bools:布尔评估的方法
    #arrays:数组的方法
    #lists:列表的方法
    #sets:集合的方法
    #maps:map的方法
    #aggregates:在数组或集合上创建聚合的方法
    #ids:处理可能重复的id属性的方法(例如:作为迭代的结果)
    

    *{...}大部分功能和${}是一致的,它只是作了一些补充功能:

    <div th:object="${session.user}">
    	<p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    	<p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    	<p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
    </div>
    
    

    当我们在标签中使用th:object获取指定对象时,此时标签内*{}默认选定指定的对象。我们可以直接通过属性名获取值

    @{...}用来链接项目中的API,如:

    <a href="details.html" th:href="@{http://localhost:8080/gtvg/order/details(orderId=${o.id})}">view</a>
    <!-- 我们也可以使用项目的相对路径 -->
    <a href="details.html" th:href="@{/order/details(orderId=${o.id})}">view</a>
    
    

    参数用()包围,多个参数用,隔开

    {...}可以用于在国际化中显示消息,也可以使用内置对象

    ~{...}用来插入片段文档,如:

    <div th:insert="~{commons :: main}">...</div>
    
    

    文本

    字符串:'one text' , 'another one' , ...
    数字:0 , 34 ...
    布尔值:true , false ...
    空:null
    文字标记:one,sometext ...
    文本操作

    字符串拼接:+
    字符替换:|The name is $|
    计算操作

    二元操作:+ , - , * , / , %
    一元操作(负号):-
    布尔操作

    二元操作:and , or
    布尔反转:! , not
    比较操作

    比较操作:> , < , >= , <= ( gt , lt , ge , le)
    判同操作:== , != (eq , ne)
    条件操作

    if-then:(if) ? (then)
    if-then-else:(if) ? (then) : (else)
    default:(value) ?: (defalutvalue)

    以上的各种操作都是在对html标签属性值的计算。如果我们需要操作html结构,我们需要使用th:*对html文件结构进行操作
    

    Thymeleaf操作
    判断操作

    <!-- 当表达式成立,该span标签才会显示 -->
    <span th:if="判断表达式">1</span>
    <!-- 当表达式不成立时,才会显示。与th:if表达式相同,形成if-else -->
    <span th:unless="判断表达式">2</span>
    
    

    模板导入

    将代码中重复的代码抽离出来,成为模板文件。我们即可在其他需要使用模板文件的地方引入即可

    如:底部模板文件footer.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.w3.org/1999/xhtml">
    <body>
    <!-- th:fragment指定模板名称,以便调用 -->
    <div th:fragment="footer">
        <!-- 模板文件结构 -->
    </div>
    </body>
    </html>
    
    

    当我们在其他文件需要使用到模板结构时,我们可以引入即可

    <div th:include="footer::footer"></div>
    

    ::前面的footer表示模板所在的文件路径,::后面的footer表示我们在模板文件中指定的模板名称

    模板的文件路径也是由Thymeleaf的视图解析器进行解析的,所以默认的路径为classpath:templates/xxx.html
    

    引入模板有以下三种方式:

    th:insert:模板片段插入th:insert所在标签内
    th:replace:模板片段替换th:replace所在的标签
    th:include:模板片段中的内容插入th:include所在的标签内
    模板例子:

    <footer th:fragment="copy">  &copy; 2011 The Good Thymes Virtual Grocery </footer>
    

    使用三种方式引入模板:

    <div th:insert="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
    <div th:include="footer :: copy"></div
    
    

    结果为:

    <div>
        <footer>
            &copy; 2011 The Good Thymes Virtual Grocery
        </footer>
    </div>
    	<footer>
          &copy; 2011 The Good Thymes Virtual Grocery
    	</footer>
    <div>
    	&copy; 2011 The Good Thymes Virtual Grocery
    </div> 
    
    

    模板在使用的时候是可以传入参数的,可以根据参数模板有不同的显示状态

    模板传值:

    <footer th:fragment="copy(name)"> [[name]]  &copy; 2011 The Good Thymes Virtual Grocery </footer>
    
    

    使用时:

    <div th:insert="footer :: copy(name='zxj')"></div>
    
    

    文本输出

    用来将文本输出到所在标签的内部,而不是属性中

    有两种方法输出:

    <span th:text="${msg}"></span>
    
    

    或者

    <span th:utext="{msg}"></span>
    
    

    区别:

    两者同样是讲标签中的文本替换,th:text会将替换文本中的特殊字符转义,如hello会渲染成粗体。但th:utext会把替换文本中的字符按原样输出,不会转义

    上面两种都属于标签内写法,它也有行内写法。如:

    <p>Hello,[[${session.user.name}]]</p>
    
    

    [[]]等同于th:text,或者

    <p>The message is "[(${msg})]"</p>
    
    

    等同于th:utext

    块区域操作

    th:block是Thymeleaf唯一一个操作结构块的标签,假设我们有下面一个例子:

    <table>
      <div th:each="user : ${users}">
        <tr>
            <td th:text="${user.login}">...</td>
            <td th:text="${user.name}">...</td>
        </tr>
        <tr>
            <td colspan="2" th:text="${user.address}">...</td>
        </tr>
      </div>
    </table>
    
    

    这表示我们将迭代显示div中的内容,但是div的存在对结构有着一定的影响。我们需要迭代多个标签,但是我们又不想添加额外的外层结构。

    我们可以使用th:block进行迭代,如:

    <table>
      <th:block th:each="user : ${users}">
        <tr>
            <td th:text="${user.login}">...</td>
            <td th:text="${user.name}">...</td>
        </tr>
        <tr>
            <td colspan="2" th:text="${user.address}">...</td>
        </tr>
      </th:block>
    </table>
    
    

    使用这种方式,th:block标签会在迭代完后直接消失的。只会保留标签内部的内容,非常适合迭代多个标签并不添加额外的外层结构

    常用的操作

    顺序 特点 属性
    1 导入模板代码 th:insert、th:replace
    2 集合迭代 th:each
    3 流程控制 th:if、th:unless、th:switch、th:case
    4 本地变量定义 th:object、th:with
    5 常规属性修改 th:attr、th:attrprepend、th:attrappend
    6 特定属性修改 th:value、th:href、th:src 、...
    7 标签内文本修改 th:text、th:utext
    8 模板代码定义 th:fragment
    9 模板移除 th:remove

    出处来自https://heartdream.top/archives/2020020701252332414

  • 相关阅读:
    Confluence 6 在升级过程中查看合并日志
    Confluence 6 从 WIKI 标记整合到基于 XHTML 的存储格式
    Confluence 6 升级完成后的检查
    Confluence 6 超过当前许可证期限进行升级
    HDU2571--命运---DP
    HDU 2084 DP经典例子---数塔问题
    紫书第二章
    求组合数
    欧拉函数
    二分幂/快速幂
  • 原文地址:https://www.cnblogs.com/yuqiliu/p/12276037.html
Copyright © 2011-2022 走看看