1. 程式人生 > >Thymeleaf使用總結

Thymeleaf使用總結

Thymeleaf使用總結

標籤(空格分隔): Thymeleaf


文章目錄

引入名稱空間

<html xmlns:th="http://www.thymeleaf.org"> 
引入可避免html驗證錯誤,加不加對ThymeLeaf功能無影響

輸出內容

<p th:text
="#{home.welcome}">
Welcome to our grocery store!</p>
  1. th:text 用於輸出內容
  2. #{home.welcome} 引入物件屬性
  3. th:utext 顯示“unescaped(未轉義)”的html內容

訪問物件

  1. ${param.x}返回名為x的request引數,可能有多個值
  2. ${session.x}返回名為x的session引數
  3. ${application.x}返回名為x的servlet context引數

基本語法

  1. 訪問資料#{home.welcome}
  2. 訪問變數${today}
  3. 訪問基本變數
變數名 物件名
#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

其它公共物件
4. 日期輸出

<span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>
  1. 星號語法
    *取上一層的變數作為父節點
<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>
  1. 輸出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>
  1. 使用程式碼段
<div th:insert="~{commons :: main}">...</div>
  1. 直接輸出內容
<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} + '!'"> -- 帶變數的
  1. 條件表示式
<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} ?: _">--不做任何處理時用下劃線 _ 表示</span> 

設定Attribute值

  1. 設定任何Attribute值
--設定單個
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
--一次設定多個
<img src="../../images/gtvglogo.png" th:attr="[email protected]{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
  1. 設定一些內建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}" />

其它屬性

##迴圈輸出

  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>
  1. 迴圈狀態變數
<table>
    <tr>
        <th>產品名稱</th>
        <th>產品價格</th>
        <th>有現貨</th>
    </tr>
    <tr th:each="prod,iterStat:${prods}" th:class="${iterStat.odd}?'odd'">
        <td th:text="${prod.name}">土豆</td>
        <td th:text="${prod.price}">2.41</td>
        <td th:text="${prod.inStock}?#{true}:#{false}">yes</td>
    </tr>
</table>

iterStat為狀態變數,它有以下屬性
index,獲取當前迭代從0開始的下標
count,獲取當前迭代從1開始的下標
size,獲取當前迭代元素總量
curren,獲取迭代變數中的迭代值
even/odd,當前迭代值是奇數還是偶數
first,當前迭代值是否是第一個元素
last,當前迭代值是否是最後一個元素

其它狀態資訊

條件判斷

  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>
  1. 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>

模版引用

  1. 定義和引用程式碼塊
--定義fragment
<div th:fragment="copy">
&copy; 2011 The Good Thymes Virtual Grocery
</div>
--引用fragment
<div th:insert="~{footer :: copy}"></div>
--引用id程式碼塊
<div id="copy-section">
&copy; 2011 The Good Thymes Virtual Grocery
</div>
<div th:insert="~{footer :: #copy-section}"></div>
  1. th:insert th:replace th:include區別

th:insert:插入程式碼塊
th:replace:替換程式碼塊會替換容器標籤
th:include:和insert相似但是隻插入fragment標註的內容

  1. 帶引數的程式碼段
<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>

註釋

<!--..

更多