spring boot2.0一看就會的超詳細快速入門(六)-集成Thymeleaf模板引擎

1.理解Thymeleafhtml

1.1 Thymeleaf是一個適用於Web和獨立環境的服務器端java模板引擎,可以處理HTML、XML、JavaScript、CSS甚至純文件,常見相似的工具備JSP、Freemarker等java

1.2 Thymeleaf遵循的是一個天然模板的概念,主要目標是提供一種優雅且高度可維護的模板建立方式。將其邏輯注入模板文件中,不會影響模板被用做設計原型,改善了設計與開發人員溝通成本,即原型即頁面。jquery

1.3 語法優雅易懂:OGNL、SpringELspring

1.4 遵循Web標準,支持HTML5數組

2.Thymeleaf標準語法服務器

2.1 如何識別標準語法:session

     經常使用:<span th:text="...">app

   HTML5自定義屬性標準方式: <span data-th-text="...">less

注意:使用Thymeleaf模板須要在HTML文件中引入Thymeleaf命名空間,以下圖:spring-boot

控制器端代碼以下:

頁面顯示效果:

2.2 標準語法:

2.2.1 標準表達式

變量表達式:    

語法:${...}

示例:<h2 th:text="${msg}"></h2>

消息表達式(文本外部化、國際化或i18n):

語法: #{...}

示例:<h2 th:text="#{msg}"></h2>

選擇表達式:

語法:*{...}

<div th:object="${user}">

....

<h2 th:text="*{name}"></h2> 做用至關於user.name

...

</div>

與變量表達式區別:它們是在當前選擇的對象而不是整個上下文變量映射上執行。優勢:提升執行效率

連接表達式:

語法:@{...}

連接表達式主要做用於連接

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

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

也能夠是服務器相對(沒有應用上下文前綴)

<a th:href="@{`/goldCup/..}">...</a>

和協議相對:

<a th:href="@{//code.jquery.com/jquery-1.11.3.min.js}">...</a>

絕對:

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

分段表達式:

語法:th:insert或th:replace

以下圖,在header.html中寫完可重用代碼,其它html頁面經過insert、replace調用:

運行test.html以下:

字面量表達式:

文本

<p>顯示文本:<span th:text="'單引號引發來的文本'"></span></p>

效果演示以下:

數字:

<p>顯示文本:<span th:text="1+2"></span></p>

數字表達式可用於各類加減乘除算術運算

布爾:

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

<div th:if="${user.name}==null">...

其它:

算術運算、比較和等價、條件

說明:無操做:用下劃線表示:_

<span th:text="${user.name}?_">若是user.name不存在則無操做,保留這一段文本</span>

如圖所示:

2.2.2 設置屬性值

設置任意屬性值th:attr

<input type="text" name="username" th:attr="value=#{username}"/>

設置值到指定屬性:

<form action="text.html" th:action="@{/demo}">...

固定值布爾屬性

<input type="checkbox" name="option1" checked/>

<input type="checkbox" name="active" th:checked="${user.active}"/>

2.2.3 迭代器

基本迭代:th:each

<li th:each="user":${userJsons}" th:text="${user.name}">這裏是遍歷的用戶名稱</li>

狀態變量:跟蹤迭代器的狀態

index(索引從0開始)、count(計數從1開始),size(迭代器的總數)、current(當前迭代的變量)、even/odd(奇偶)、first、last

2.2.4 條件語句

th:if、th:unless

switch:

示例:

<div th:switch="${user.role}">

<p th:case="'admin'">管理員</p>

<p th:case="#{roles.manager}">經理角色</a>

<p th:case="*">不用想了,是其它角色</p>

</div>

2.2.5 模板佈局

定義和引用片斷

th:fragment="common"...

不使用th:fragment

使用id識別示例以下:

2.2.6 屬性優先級

具體可參照:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#attribute-precedence

2.2.7 註釋

標準HTML/XML註釋:<!-- 註釋內容-->

註釋塊:<!--/*-->...<!--*/-->

原型註釋塊:

<!--/*/.../*/-->

2.2.8 內聯

內聯表達式:

[[...]]或[()]分別對應於th:text和th:utext(不會進行轉義)

示例:

禁用內聯:

有時須要禁用這種機制,如某些特定條件下想要輸出[[...]]或[(...)]文本內容

<p th:inline="none">數組內容爲:[[1,2,3,4],[6,7]]</p>

2.2.9 基本對象

#ctx:上下文對象,是org.thymeleaf.context.IContext或org.thymeleaf.context.IWebContext實現

#locale:直接訪問與java.util.Locale關聯的當前請求

request/session等屬性:

   param:用於檢測請求參數

   session:用於檢測會話參數

 application:用於檢索application/servlet屬性

Web上下文對象:

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

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

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

 

 

 

2.2.10 工具對象

3.Thymeleaf與Springboot集成:

在項目POM.XML文件中添加依賴包管理:

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

操做結果如圖所示:

相關文章
相關標籤/搜索