Thymeleaf學習

時間 2019-11-13

標籤 thymeleaf 學習简体版

原文原文鏈接

Thymeleaf學習

理解Thymeleaf

Java模板引擎。可以處理HTML、XML，JavaScript、CSS甚至純文本。相似JSP、Freemarker
天然模板。原型即頁面
語法優雅易懂。OGNL、SpringEl
聽從Web標準。支持HTML5

Thymeleaf標準方言

如何識別標準方言javascript

<span th:text="...">
<span data-th-text="...">

變量表達式

語法：${...}

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

消息表達式

語法：#{...}

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

也稱爲文本外部話、國際化或i18n

選擇表達式

語法：*{...}

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

與變量表達式區別：他們是在當前選擇的對象而不彷佛整個上下文變量映射上執行css

連接表達式

語法：@{...}

連接表達式能夠是相對的，在這種狀況下，應用程序上下文將不會做爲URL的前綴。html

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

也能夠是服務器相對（一樣，沒有應用程序上下文前綴）：java

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

和協議相對（就像絕對URL，但瀏覽器將使用在顯示的頁面中使用的相同的HTTP或HTTPS協議）：web

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

固然，Link表達式能夠是絕對的：瀏覽器

<a th:href="@{http://www.mycompany.com/main}">...</a>

分段表達式

語法：th:insert或th:replace

字面量（文字）

文本

<p>
  Now you are looking at a <span th:text = "'working web application'">template file</span>
</p>

數字

<p>The year is <span th:text="2013">1492</span>.</p>

布爾

<div th:if="${user.isAdmin()} == false">...</div>

null

<div th:if="${variable.something} == null">...

算術操做

+、-、*、/、%

比較和等價

比較：>、<、>=、<= (gt、lt、ge、le)

<ul class="pagination" data-th-if="${page.totalPages le 7}" >

等價：== ,!= (eq、ne)

<option data-th-each="i : ${#arrays.toIntegerArray({5,10,40,100})}" data-th-calue="${i}" data-th-selected="${i eq page.size}" data-th-text="${i}"></option>

條件運算符

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

無操做

_

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

設置屬性值

設置任意屬性值th:attr

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}" />
  </fieldset>
<form>

設置值到指定的屬性

<form action="subscribe.html" th:action="@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:value="#{subscribe.submit}" />
  </fieldset>
<form>

固定值布爾屬性

<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.first,last

<table>
  <tr>
    <th>NAME</th>
    <th>PRICE</th>
    <th>IN STOCK</th>
  </tr>
  <tr th:each="prod,iterStat : ${pords}" 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>

條件語句

th:if 、th:unless

<a href="comments.html" 
th:href="@{/product/comments(prodId=${prod.id})}" 
th:if="${not #lists.isEmpty(prod.comments)}">view</a>

<a href="comments.html" 
th:href="@{/product/comments(prodId=${prod.id})}" 
th:unless="${#lists.isEmpty(prod.comments)}">view</a>

條件語句

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>
</div>

模板佈局

定義和引用片斷

<!DOCTYPE html>
<body>
  <div th:fragment="copy">
    &copy;2017<a href="https://waylau.com">waulau.com</a>
  </div>
</body>
</html>

<body>
  ...
  <div th:insert="~{footer :: copy}"></div>
</body>

不使用th:fragment

...
  <div id="copy-section">
    &copy;2017<a href="https://waylau.com">waulau.com</a>
  </div>
...

<body>
  ...
  <div th:insert="~{footer :: #copy-section}"></div>
</body>

th:insert、th:replace、th:include三者區別

th:insert它將簡單地插入指定的片斷做爲正文的主標籤
th:replace用指定實際片斷來替換其主標籤
th:include相似於th:insert,但不插入片斷它只插入此片斷的內容。（3.x版本後，再也不推薦使用）服務器

註釋

Thymeleaf解析器級註釋塊
刪除<!--/和/--!>之間的全部內容

<!--/*-->
  <div>
    you can see me onlu before Thymeleaf processes me!
  </div>
<!--*/-->

原型註釋塊

當模塊靜態打開時（好比原型設計），原型註釋塊所註釋的代碼將被註釋，而在模板執行時，這些註釋的代碼，就能被顯示出來。

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

內聯

內聯表達式

[[...]]或[(...)]分別對應於th:text和th:utext

<p>The message is "[(${msg})]"</p>

禁用內聯

有時須要金庸這種機制，好比，想輸出[[...]]或[(...)]文本內容

<p th:inline="none">A double array looks like this :  [[1,2,3],[4,5]]!</p>

JavaScript內聯

<script th:inline="javascript">
  ...
  var username = /*[[${session.uer.name}]]*/ "Gertrud Kiwifruit"
  ...
</script>

##### CSS內聯
<style th:inline="css"> .[[${classname}]] { text-align: [[${align}]]; } </style>session

表達式基本對象

基本對象

ctx:上下文對象。是org,thymeleaf.context.IContext後者org.thymeleaf.context.IWebContext的實現
locale:字節訪問與java.util.Locale關聯的當前的請求

request/session等屬性
param:用於檢索請求參數
session:用於減速session屬性
application：用於檢索application/servlet上下文屬性app

Web上下文對象
request:直接訪問與當前請求關聯的javax.servlet.http.HttpServletRequest對象
session：直接訪問與當前請求關聯的javax.servlet.http.HttpSession對象
servletContext：直接訪問與當前請求關聯的javax.servlet.ServletContext對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Thymeleaf學習

Thymeleaf學習

理解Thymeleaf

Thymeleaf標準方言

變量表達式

語法：${...}

消息表達式

語法：#{...}

選擇表達式

語法：*{...}

連接表達式

語法：@{...}

分段表達式

語法：th:insert或th:replace

字面量（文字）

文本

數字

布爾

null

算術操做

+、-、*、/、%

比較和等價

比較：>、<、>=、<= (gt、lt、ge、le)

等價：== ,!= (eq、ne)

條件運算符

無操做

_

設置屬性值

設置任意屬性值th:attr

設置值到指定的屬性

固定值布爾屬性

迭代器

基本的迭代th:each

狀態變量

條件語句

th:if 、th:unless

條件語句

switch

模板佈局

定義和引用片斷

不使用th:fragment

th:insert、th:replace、th:include三者區別

註釋

Thymeleaf解析器級註釋塊

原型註釋塊

內聯

內聯表達式

禁用內聯

JavaScript內聯

表達式基本對象

基本對象

ctx:上下文對象。是org,thymeleaf.context.IContext後者org.thymeleaf.context.IWebContext的實現

locale:字節訪問與java.util.Locale關聯的當前的請求

request/session等屬性

Web上下文對象

request:直接訪問與當前請求關聯的javax.servlet.http.HttpServletRequest對象

session：直接訪問與當前請求關聯的javax.servlet.http.HttpSession對象

servletContext：直接訪問與當前請求關聯的javax.servlet.ServletContext對象