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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM