1-9springboot之thymeleaf經常使用語法（html頁面）

時間 2019-12-02
標籤 9springboot springboot thymeleaf 經常使用語法 html 頁面欄目 Spring 简体版
原文原文鏈接
 1、引用命名空間 <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、輸出內容 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 變量 3、訪問對象 ${param.x} 返回名爲x 的 request參數。（可能有多個值） ${session.x} 返回名爲x的Session參數。 ${application.x} 返回名爲 servlet context 的參數。 4、基本語法 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}__ ，來將須要先一步計算出來後面 要用的變量指定爲優化處理。 5、設置 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、循環輸出的語法 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、條件判斷 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> 8、模板 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> 9、局部變量的使用示例 <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> 10、註釋 <!-- ... --> 11、說明 以上只列出Thymeleaf了簡要經常使用的語法和使用方式，更多詳情的說明和規則請參見：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#introducing-thymeleaf