• 1-9springboot之thymeleaf常用语法(html页面)


     一、引用命名空间 <html xmlns:th="http://www.thymeleaf.org"> 
    
            在html中引入此命名空间,可避免编辑器出现html验证错误,虽然加不加命名空间对Thymeleaf的功能没有任何影响。
            引入css
            <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet" />
            
            引入js
            <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
     
    
    二、输出内容
    
            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">  --输出布尔表达式
    
           <div th:if="${user.id}>2">     --输出判断表达式
    
           <span th:text="'Welcome to our application, ' + ${user.name} + '!'"> -- 带变量的
    
    4.10 条件表达式
    
          <tr th:class="${user.id}? 'even' : 'odd'">
           ...  
          </tr>
    
          <tr th:class="${user.id} > 2? '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内的内容。
    
           需要替换的片段内容:
          <footer th:fragment="copy">
             <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
          </footer>
     
          导入片段:
     
          <div th:insert="footer :: copy"></div>
     
          <div th:replace="footer :: copy"></div>
     
          <div th:include="footer :: copy"></div>
      
     
          结果为:
     
         <div>
           <footer>
              <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
           </footer>  
         </div>  
     
         <footer>
             <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
         </footer>  
     
         <div>
             <script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>
         </div>  
     
    
    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
    
     
  • 相关阅读:
    【版本控制工具】 Git进阶1
    【版本控制工具】 Git基础
    问题:com.alibaba.dubbo.rpc.RpcException: Failed to invoke ......
    互联网安全架构之常见的Web攻击手段及解决办法
    【Spring Boot】七、整合actuator实现监控管理
    问题:tomcat启动后,可以访问主页面,但是无法访问dubbo-admin
    【Spring Boot】六、整合dubbo(注解的方式)
    这篇文章,彻底搞懂八大开源框架源码
    Spring Cloud Greenwich.SR4 发布了,跟不上了……
    手把手教你画架构图,看一次就会了!
  • 原文地址:https://www.cnblogs.com/chenlove/p/9375756.html
Copyright © 2020-2023  润新知