一、Thymeleaf的引入
<dependencies>
……
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<!--2.1.6-->
</dependency>
……
</dependencies>
<!--切換thymeleaf的版本-->
<properties>
<java.version>1.8</java.version>
<thymeleaf.version>3.0.10.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.2.2</thymeleaf-layout-dialect.version>
</properties>
注意:
<!--佈局功能的支持程序
layout是做佈局功能擴展的
-->
thymeleaf 3------------------ layout2
thymeleaf2 ----------------- layout1
二、Thymeleaf的使用&語法
1、使用
@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
public static final String DEFAULT_PREFIX = "classpath:/templates/";
public static final String DEFAULT_SUFFIX = ".html";
使用步驟:
①只要把HTML頁面放在classpath:/templates/,thymeleaf就能自動渲染
②引入名稱約束空間
<html lang="en" xmlns:th="http://www.thymeleaf.org">
③在html頁面中應用
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>success</title>
</head>
<body>
<h2>響應成功頁面</h2>
<!--設置文本內容-->
<div th:text="${hello}"></div>
</body>
</html>
2、語法規則
2.1 th:屬性
th:任意html屬性 ------替換原生屬性的值;th:text-----------改變/設置當前元素的文本內容
<div id="mydiv" class="mydiv" th:text="${hello}" th:id="${hello}" th:class="${hello}"></div>
2.2 表達式
2.2.1 Simple expressions(表達式語法)
-
Variable Expressions(變量表達式): ${…}:獲取變量值;OGNL
1)獲取對象的屬性、調用方法
2)使用內置的基本對象:
#ctx : the context object. 上下文對象
#vars: the context variables. 上下文變量
#locale : the context locale. 上下文環境
#request : (only in Web Contexts) the HttpServletRequest object. http請求對象
#response : (only in Web Contexts) the HttpServletResponse object. http響應對象
#session : (only in Web Contexts) the HttpSession object. session對象
#servletContext : (only in Web Contexts) the ServletContext object.
例如:
${session.foo}
3)內置的一些工具對象:
#execInfo : information about the template being processed.
#messages : methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using
#{…} syntax.
#uris : methods for escaping parts of URLs/URIs
#conversions : methods for executing the configured conversion service (if any).
#dates : methods for java.util.Date objects: formatting, component extraction, etc. #calendars : analogous to
#dates , but for java.util.Calendar objects.
#numbers : methods for formatting numeric objects.
#strings : methods for String objects: contains, startsWith, prepending/appending, etc.
#objects : methods for objects in general.
#bools : methods for boolean evaluation.
#arrays : methods for arrays.
#lists : methods for lists.
#sets : methods for sets.
#maps : methods for maps.
#aggregates : methods for creating aggregates on arrays or collections.
#ids : methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).
- Selection Variable Expressions: *{…}:選擇表達式
和${}在功能上是一樣。
補充:配合 th:object="${session.user}:
例如:
<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>
-
Message Expressions: #{…}:獲取國際化內容
-
Link URL Expressions: @{…}:定義URL鏈接
@{/order/process(execId=${execId},execType='FAST')}
- Fragment Expressions: ~{…}:片段引用表達式
<div th:insert="~{commons :: main}">...</div>
2.2.2 Literals(字面量):
-
Text literals: ‘one text’ , ‘Another one!’ ,…
-
Number literals: 0 , 34 , 3.0 , 12.3 ,…
-
Boolean literals: true , false
-
Null literal: null
-
Literal tokens: one , sometext , main ,…
2.2.3 Text operations(文本操作):
- String concatenation: + 拼串
- Literal substitutions: | 替換
- The name is ${name}|
2.2.4 Arithmetic operations(數學運算):
- Binary operators: + , ‐ , * , / , %
- 2.2.5 Minus sign (unary operator): -
2.2.5 Boolean operations(布爾運算):
- Binary operators: and , or
- Boolean negation (unary operator): ! , not
2.2.6 Comparisons and equality(比較運算):
- Comparators: > , < , >= , <= ( gt , lt , ge , le )
- Equality operators: == , != ( eq , ne )
2.2.7Conditional operators:條件運算(三元運算符):
If‐then: (if) ? (then)
If‐then‐else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)
2.2.8 Special tokens:
- No‐Operation: _ 無操作
示例
以內聯方式設置文本元素的文本值:
- [[]]--------th:text 轉義
- [()]--------th:utext 不轉義
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr/>
<span>[[${hello}]]</span>
<hr/>
<span>[(${hello})]</span>
<hr/>
<!--會生成三個<h3></h3>標籤-->
<h3 th:each="user:${users}" th:text="${user}"></h3>
<hr/>
<!--一個h3標籤,3個span標籤-->
<h3 th:each="user:${users}">
<span>[[${user}]]</span>
</h3>
運行結果圖: