zoukankan      html  css  js  c++  java
  • Thymeleaf相关补充

    ⒈理解Thymeleaf

    • Java模板引擎。能够处理HTML、XML、JavaScript、CSS甚至纯文本。类似JSP、Freemarker
    • 自然模板。原型即页面
    • 语法优雅易懂,OGNL、SpringEL
    • 遵从Web标准。支持HTML5

    ⒉如何识别Thymeleaf标准方言

      1.需要页面引入命名空间

    1 <html xmlns:th="http://www.thymeleaf.org">
    2     <head>
    3     </head>
    4     <body>
    5         <span th:text="...">
    6     </body>
    7 </html>
    8     

      2.无需页面引入命名空间 

    1 <span data-th-text="...">

    ⒊语法

      1.${...}:获取变量值,OGNL

        ①获取对象的属性,调用方法

        ②使用内置的基本对象

        ③内置的一些工具对象 

    1 <span th:text="${book.author.name}">

      2.*{...}:变量选择表达式,和${...}在功能上是一样的,区别在于,它是在当前选择的对象执行,而不是在整个上下文变量映射上。配合th:object使用简化代码

    1     <div th:object="${book}">
    2         <span th:text="*{title}"></span>
    3     </div>

      3.#{...}:获取国际化内容

    1 <span th:text="#{header.address.city}"></span>

      4.@{...}:定义URL

    1     <!--链接表达式可以是相对的,在这种情况下,应用程序上下文将不会作为URL的前缀-->
    2     <a th:href="@{../documents/report}"></a>
    3     <!--也可以是服务器相对(同样没有应用程序上下文前缀)-->
    4     <a th:href="@{~/contents/main}"></a>
    5     <!--和协议相对(就像绝对URL,但浏览器将使用在显示的页面中使用的相同的HTTP或HTTPS协议)-->
    6     <a th:href="@{//static.coreqi.cn/res/initial}"></a>
    7     <!--当然,链接表达式也可以是绝对的-->
    8     <a th:href="@{http://www.coreqi.cn}"></a>

      5.~{...}:片段引用表达式

    1     <div th:fragment="copy">
    2         &copy; 2019 <a href="http://www.coreqi.cn">Coreqi</a>
    3     </div>
    4 
    5     <div th:insert="~{footer :: copy}"></div>

       6.字面量(文字)

        ①文本   

    1     <span th:text="'Hello World!'"></span>

        ②数字

    1     <span th:text="2019"></span>
    2     <span th:text="2019 + 2"></span>

        ③布尔

    1     <div th:if="${user.isAdmin()} == false">
    2         ...
    3     </div>

        ④Null

    1     <div th:if="${user.phoneNum} == null">
    2         ...
    3     </div>

      7.算术操作

        ①+、-、*、/、% 

    1     <div th:text="${users.count} % 2 == 0">
    2        .... 
    3     </div>

      8.比较和等价

        ①比较:>、<、>=、<=(gt、lt、ge、le)

    1     <div th:if="${page.totalPages le 7}">

        ②等价:==、!=(eq、ne)

    1     <div th:if="${page.totalPages eq 7}">

      9.条件运算符

    1     <div th:class="${row.even}? 'even' : 'odd'"></div>

      10.无操作(什么都不做)

    1     <span th:text="${user.name}? : _">如果无操作则保留此处文本,不作覆盖</span>

      11.设置属性值

         ①设置任意属性值  th:attr

    1     <form th:attr="action=@{/coreqi}">
    2         <input type="submit" th:attr="value=#{subscribe.submit}"/>
    3     </form>

        ②设置指定属性值  

    1     <form th:action="@{/coreqi}">
    2         <input type="submit" th:value="#{subscribe.submit}"/>
    3     </form>

        ③固定布尔属性

    1     <form th:action="@{/coreqi}">
    2         <input type="checkbox" name="option1" checked/> <!--HTML-->
    3         <input type="checkbox" name="option2" checked="checked"/>   <!--XHTML-->
    4         <input type="checkbox" name="option3" th:checked="${user.active}"/>
    5     </form>

      12.迭代器

        ①基本的迭代 th:each  

    1  <li th:each="book : ${books}" th:text="${book.title}"></li>

         状态变量:用于跟踪迭代器的状态。

         index【索引】、count【索引+1】、size【总数】、current【当前迭代的变量】、even/odd【是奇数还是偶数】、first【迭代器第一个】、last【迭代器最后一个】

    1    <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'"></tr>

       13.条件语句

        ①th:if  判断条件是否成立,true成立,false不成立,非0成立,null不成立。   

    1     <div th:if="${not #lists.isEmpty(prod.comments)}">
    2         ...
    3     </div>

        ②th:unless  不成立则执行

    1     <div th:unless="${#lists.isEmpty(prod.comments)}">
    2         ...
    3     </div>

        ③switch  当有一个匹配后,剩下的全为false

    1     <div th:switch="${user.role}">
    2         <p th:case="'admin'"></p>
    3         <p th:case="#{roles.manager}"></p>
    4         <p th:case="*"></p>
    5     </div>

     ⒋Thymeleaf属性的优先级

    ⒌注释

      ①标准HTML/XML注释

    1     <!--<span th:text="'fanqi'"></span>-->

      ②Thymeleaf解析器级注释块---在解析的过程中删除掉<!--/*-->和<!--*/-->之间的所有内容

    1     <!--/*-->
    2     <div>
    3         Hello World!
    4     </div>
    5     <!--*/-->

      ③原型注释块

        在静态页面的时候是注释掉的,是不会显示的。当被Thymeleaf解析器解析的时候,这些注释的代码将会显示出来。

    1     <span>Hello!</span>
    2     <!--/*/
    3         <div th:text="${...}">
    4             ...
    5         </div>
    6     /*/-->
    7     <span>Good Bye!</span>

     ⒍内联

      1.内联表达式

        ①[[...]]或[(...)]分别对应于th:text【会对一些特殊符号进行转义】和th:utext【不会对一些特殊符号进行转义】

      2.禁用内联表达式  th:inline="none" 

    1     <p th:inline="none">输出以下文本内容:[[1,2,3],[4,5]]!</p>

      3.JavaScript内联

    1     <script th:inline="javascript">
    2         var username=/*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    3     </script>

      4.css内联

    1     <style th:inline="css">
    2         .[[${classname}]]{
    3             text-align: [[${align}]];
    4         }
    5     </style>

    ⒎表达式基本对象

       1.基本对象

        ①#ctx:上下文对象。是org.thymeleaf.context.IContext或者org.thymeleaf.context.IWebContext的实现。 

    1 ${#ctx.locale}
    2 ${#ctx.variableNames}
    3 ${#ctx.request}
    4 ${#ctx.response}
    5 ${#ctx.session}
    6 ${#ctx.servletContext}

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

    1 ${#locale}

      2.request/session等属性对象

        ①param:用于检索请求参数

    1 ${param.foo}
    2 ${param.size()}
    3 ${param.isEmpty()}
    4 ${param.containsKet('foo')}
    5 ...

        ②session:用于检索session属性  

    1 ${session.foo}
    2 ${session.size()}
    3 ${session.isEmpty()}
    4 ${session.containsKey('foo')}
    5 ...

        ③application:用于检索application/servlet上下文属性

    1 ${application.foo}
    2 ${application.size()}
    3 ${application.isEmpty()}
    4 ${application.containsKey('foo')}
    5 ...

      3.Web上下文对象

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

    1 ${#request.getAttribute('foo')}
    2 ${#request.getParameter('foo')}
    3 ${#request.getContextPath()}
    4 ${#request.getRequestName()}
    5 ...

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

    1 ${#session.getAttribute('foo')}
    2 ${#session.id}
    3 ${#session.lastAccessedTime}
    4 ...

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

    1 ${#servletContext.getAttribute('foo')}
    2 ${#servletContext.contextPath}
    3 ...

     ⒏相关配置

    1 #Thymeleaf 编码
    2 spring.thymeleaf.encoding=UTF-8
    3 #禁用Thymeleaf缓存,使用热部署静态文件
    4 spring.thymeleaf.cache=false
    5 #使用HTML5标准
    6 spring.thymeleaf.mode=HTML5

        

  • 相关阅读:
    122. Best Time to Buy and Sell Stock II
    121. Best Time to Buy and Sell Stock
    72. Edit Distance
    583. Delete Operation for Two Strings
    582. Kill Process
    indexDB基本用法
    浏览器的渲染原理
    js实现txt/excel文件下载
    git 常用命令
    nginx进入 配置目录时
  • 原文地址:https://www.cnblogs.com/fanqisoft/p/10529614.html
Copyright © 2011-2022 走看看