美文网首页
Thymeleaf 学习

Thymeleaf 学习

作者: Marlon666 | 来源:发表于2018-03-23 14:27 被阅读44次

    Thymeleaf 简介:
    java模板引擎。能够处理HTML、XML、JAVAScript、Css 甚至纯文本。
    类似于JSP、FreeMarker

    自然模板 原型界面:静态页面,部署到页面服务器,设计和开发的沟通。
    语法优雅易懂:OGNL,SpringEL
    遵循Web标准 支持HTML5

    Thymeleaf 标准方言内容如下:

    标准表达式、
    变量表达式: ${...}

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

    消息表达式(文本外部化、国际化):

    '#{...}'

     <table>
     <th th:text="#{header.address.city}">...</th>
      <th th:text="#{header.address.country}">...</th>
     </table>
    

    选择表达式(星号表达式):

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

    选择表达式和星号表达式的区别:
    星号表达式是选择当前对象的属性;
    变量表达式选择的是当前文本上下文中的对象。

    链接表达式:

    @{...}

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

    <a th:href="@{../doucuments/report}">...</a>
    

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

    <a th:href="@{~/content/main}">...<a>
    

    协议相对(就像绝对URL ,但浏览器使用在显示的页面中使用相同的HTTP或者HTTPS协议)

    <a th:href="@{//static.mycommpany.com/res/initial}">.....</a>
    

    当然,Link表达式是可以绝对的;

    <a th:href="@{http:baidu.com}"></a>
    

    分段表达式

    th:insert 或者 th:replace

    样式 定义了一个标准样式:

    <html xmlns:th="http://www.thymeleaf.org">
        <body>
             <div th:fragment="copy">
             
             </div>
        </body>
    </html>
    

    //插入一个片段

    <div th:insert="~{footer::copy}">
       content内容
    </div>
    
    th:text="'我是文本内容''"
    th:text="666699"
    
    <div th:if="${boolean} == false"> //判断布尔类型
    <div th:if="${variable} == null">  //判断变量是否为空
    <div th:with="isEven=($(proStat.count) % 2 == 0)">  //
    

    比较和等价
    比较: > 、 < 、 >= 、<= (gt、lt 、ge 、le)

    <ul class="pagination" data-th-if="${page.totalPages le 7}">
    
    gt: greater than 大于
    ls: less  than  小于
    ge:  greater than equal 大于等于
    le:  less than equal 小于等于
    

    等价: == != eq ne

    条件运算符(三目运算符)

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

    无操作

    <span th:text="${user.name} ?: -"> 
    no user authenticated
    </span>
    

    设置属性值、

    第一种方式比较麻烦:

    <form action="xxx.action" th:attr="action=@{/subscribe}">   
    <input type="submit" value="Subscribe" th:attr="value=#{subscribe.submit}"></input>
    </form>
    

    第二种方式优选:

    <form  th:action="@{/subscribe}">   
    <input type="submit" value="Subscribe" th:value="={subscribe.submit}"></input>
    </form>
    

    固定布尔值:

    <input type="checkbox" name="option2" check />  <!--Html-->
    <input type="checkbox" name="option1" check="checked" /> <!--XHTML-->
    <input type=""checkbox" name="active" th:checked="${user.active}"/>
    

    迭代器

    th:each

    <li th:each="book : ${books}" th:text="${book.title}"> En las Orillas del Sar</li>
    

    状态变量: index 、count 、size 、current、 even/odd 奇数还是偶数 fisrt last

    条件语句

    th: if 、 th:unless

    <div th:switch="${user.role}">
     <p th:case="" >User is an administrator</p>
     <p th:case="#{roles.manager}">User is a  manager</p>
     <p th:case="*">User is some other thing</p>
    </div> 
    

    模板布局

    第一种方式:

    <html xmlns:th="http://www.thymeleaf.org">
        <body>
             <div th:fragment="copy">
             
             </div>
        </body>
    </html>
    

    //插入一个片段

    <div th:insert="~{footer::copy}">
       content内容
    </div>
    

    第二种方式:

    <div id="copy-section">
     我是一个内容<a href="https:waylau.com"></a>
    </div>
    
    <div th:insert="~{footer::#copy-section}">
    <div>
    

    th:insert 、 th:replace 、th:include 三者区别:
    th:insert :他将简单的插入制定的片段作为正文的主标签
    th:repalce: 用指定实际片段来替换其他主标签
    th:include类似于:th:insert,但不是插入片段他只插入此片段内容

    属性优先级:

    ![image.png](https://img.haomeiwen.com/i2378651/69bd61c8b18ebf28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    

    注释:
    标准HTML/XML注释

    解析器级别注释块:
    解析的时候删除 之间的所有内容

    原型注释块:

    <span>hello!</span>
        <!--/*/
          <div th:text="${...}">
          </div>
        /*/-->
    </span>
    <span>googbye!</span>
    
    <span>hello!<span>
    <div th:text="${...}">
    ...
    </div>
    <span>goodbye!<span>
    

    内联(直接把表达式写在文本里边):

    [[...]] 或 [(...)]分别对应于: th:text 和 th:utext
    <p>The message is "[($(msg))]"</p>  
    转义之后:
    <p>The message is This  is <b> great! </b> </p>
    
    <p>The message is [[$(msg)]]</p>    不转义
    

    禁用内联表达式:

    <p th:inline="none">A double  array looks lik[[内容]] </p>
    

    基本对象:

    ctx:上下文对象。是org.thymeleaf.context.IContext 或者

    org.thymeleaf.context.IWebContext 的实现。

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

    request/session等属性

    param:用于检索请求参数
    session:用于检索session属性
    application: 用于检索application/servlet 上下文属性

    web上下文对象

    request 直接请求与当前请求关联的

    javax.servlet.http.HttpServeletRequest对象

    session:直接访问与当前请求关联的

    javax.servlet.http.HttpSession对象

    servletContext: 直接访问与当前请求关联的

    javax.servlet.ServletContext 对象

    工具对象:
    略,很多。

    相关文章

      网友评论

          本文标题:Thymeleaf 学习

          本文链接:https://www.haomeiwen.com/subject/vlfxcftx.html