Thymeleaf學習
一、Thymeleaf介紹
Thymeleaf 是一個跟 Velocity、FreeMarker 類似的模板引擎，它可以完全替代 JSP
二、Thymeleaf特點
動靜結合
- Thymeleaf 在有網(wǎng)絡和無網(wǎng)絡的環(huán)境下皆可運行
- 它可以讓美工在瀏覽器查看頁面的靜態(tài)效果，也可以讓程序員在服務器查看帶數(shù)據(jù)的動態(tài)頁面效果
- 這是由于它支持 html 原型，然后在 html 標簽里增加額外的屬性來達到模板+數(shù)據(jù)的展示方式
- 瀏覽器解釋 html 時會忽略未定義的標簽屬性，所以 thymeleaf 的模板可以靜態(tài)地運行；
- 當有數(shù)據(jù)返回到頁面時，Thymeleaf 標簽會動態(tài)地替換掉靜態(tài)內容，使頁面動態(tài)顯示。
開箱即用
- 它提供標準和spring標準兩種方言，可以直接套用模板實現(xiàn)JSTL、 OGNL表達式效果
- ，避免每天套模板、該jstl、改標簽的困擾。同時開發(fā)人員也可以擴展和創(chuàng)建自定義的方言。
多方言支持
- Thymeleaf 提供spring標準方言和一個與 SpringMVC 完美集成的可選模塊，
- 可以快速的實現(xiàn)表單綁定、屬性編輯器、國際化等功能。
與SpringBoot完美整合
- 與SpringBoot完美整合，SpringBoot提供了Thymeleaf的默認配置，
- 并且為Thymeleaf設置了視圖解析器，我們可以像以前操作jsp一樣來操作Thymeleaf。
三、添加maven依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
四、創(chuàng)建模板文件夾
- SpringBoot會自動為Thymeleaf注冊一個視圖解析器ThymeleafViewResolver
- 還配置了模板文件（html）的位置，與jsp類似的前綴+ 視圖名 + 后綴風格：
- 與解析JSP的InternalViewResolver類似，Thymeleaf也會根據(jù)前綴和后綴來確定模板文件的位置：前綴：classpath:/templates/ 后綴：.html
- 在配置文件中 配置緩存,編碼
五、基本使用
引入名稱空間
- <html lang="en" xmlns:th="http://www.thymeleaf.org">
表達式
- ${}:變量表達式
- *{} ：選擇變量表達式
{...} : Message 表達式
URL
絕對網(wǎng)站
絕對URL用于創(chuàng)建到其他服務器的鏈接,它們需要指定一個協(xié)議名稱(http://或https://)開頭
<a th:href="@{https://www.campsis-tk.top/}">上下文相關url
與Web應用程序根相關聯(lián)URL
<a th:href="@{/hello}">跳轉</a>與服務器相關url
服務器相關的URL與上下文相關的URL非常相似
<a th:href="@{~/hello}">跳轉</a>攜帶參數(shù)
<a th:href="@{/hero/detail(id=3,action='show')}">aa</a>字面值
有的時候，我們需要在指令中填寫基本類型如：字符串、數(shù)值、布爾等，并不希望被Thymeleaf解析為變量，這個時候稱為字面值。
字符串字面值
<p> 內容：<span th:text="'Demo'+1">template</span> </p>數(shù)字字面值
<p> 內容：<span th:text="2+1">template</span> </p>布爾字面值
- 布爾類型的字面值是true或false
拼接
普通字符串與表達式拼接的情況
<span th:text="'歡迎您：' + ${person.name} + '!'"></span>字符串字面值需要用''，拼接起來非常麻煩，Thymeleaf對此進行了簡化，使用一對|即可
<span th:text="|歡迎您：${person.name}!|"></span>運算符
算術操作符
加(+)、減(-)、乘(*)、除(/)、取余(%)
比較運算
- 大于(>)、小于(<)、大于或等于(>=)、小于或等于(<=)
- 但是大于(>)、小于(<)不能直接使用，因為xml會解析為標簽
- 大于(gt)、小于(lt)、大于或等于(ge)、小于或等于(le)
三元運算
<span th:text="${true}?'男':'女'"></span>內聯(lián)寫法
<span>sapn標簽([(${person.name})])</span><span>sapn標簽[[${person.name}]]</span>局部變量
<div th:with="person = ${allPerson[0]}"> <h1 th:text="${person.name}"></h1> <h1 th:text="${person.age}"></h1> <h1 th:text="${person.sex}"></h1> </div>判斷
th:if
<h1 th:if="${1 lt 2}">Hello</h1>
th:unless
<h1 th:unless="1 gt 2">Hello</h1>
th:switch
<div th:switch="1"> <p th:case="1">Tk</p> <p th:case="*">*</p> </div>迭代
<table> <tr th:each="person:${allPerson[0]}"> <td th:text="${person.name}"></td> </tr> </table><table> <tr th:each="person,stat:${allPerson[0]}"> <td th:text="${stat.index}"></td> <td th:text="${person.name}"></td> </tr> </table>stat對象包含以下屬性
- index，從0開始的角標
- count，元素的個數(shù)，從1開始
- size，總元素個數(shù)
- current，當前遍歷到的元素
- even/odd，返回是否為奇偶，boolean值
- first/last，返回是否為第一或最后，boolean值
內置對象
環(huán)境相關對象
- ${#ctx} 上下文對象，可用于獲取其它內置對象。
- ${#vars}: 上下文變量。
- ${#locale}：上下文區(qū)域設置。
- ${#request}: HttpServletRequest對象。
- ${#response}: HttpServletResponse對象。
- ${#session}: HttpSession對象。
- ${#servletContext}: ServletContext對象。
全局對象功能
strings：字符串工具類
lists：List 工具類
arrays：數(shù)組工具類
sets：Set 工具類
maps：常用Map方法。
objects：一般對象類，通常用來判斷非空
bools：常用的布爾方法。
execInfo：獲取頁面模板的處理信息。
messages：在變量表達式中獲取外部消息的方法，與使用＃{...}語法獲取的方法相同。
uris：轉義部分URL / URI的方法。
conversions：用于執(zhí)行已配置的轉換服務的方法。
dates：時間操作和時間格式化等。
calendars：用于更復雜時間的格式化。
numbers：格式化數(shù)字對象的方法。
aggregates：在數(shù)組或集合上創(chuàng)建聚合的方法。
ids：處理可能重復的id屬性的方法。
示例
${#strings.abbreviate(str,10)} str截取0-10位，后面的全部用…這個點代替，注意，最小是3位
${#strings.toUpperCase(name)}
判斷是不是為空:null: <span th:if="${name} != null">不為空</span> <span th:if="${name1} == null">為空</span> 判斷是不是為空字符串: “” <span th:if="${#strings.isEmpty(name1)}">空的</span> 判斷是否相同： <span th:if="${name} eq 'jack'">相同于jack,</span> <span th:if="${name} eq 'ywj'">相同于ywj,</span> <span th:if="${name} ne 'jack'">不相同于jack,</span> 不存在設置默認值： <span th:text="${name2} ?: '默認值'"></span> 是否包含(分大小寫): <span th:if="${#strings.contains(name,'ez')}">包ez</span> <span th:if="${#strings.contains(name,'y')}">包j</span> 是否包含（不分大小寫） <spanth:if="${#strings.containsIgnoreCase(name,'y')}">包</span> ${#strings.startsWith(name,'o')} ${#strings.endsWith(name, 'o')} ${#strings.indexOf(name,frag)}// 下標 ${#strings.substring(name,3,5)}// 截取 ${#strings.substringAfter(name,prefix)}// 從 prefix之后的一位開始截取到最后,比如 (ywj,y) = wj, 如果是(abccdefg,c) = cdefg//里面有2個c,取的是第一個c ${#strings.substringBefore(name,suffix)}// 同上，不過是往前截取 ${#strings.replace(name,'las','ler')}// 替換 ${#strings.prepend(str,prefix)}// 拼字字符串在str前面 ${#strings.append(str,suffix)}// 和上面相反，接在后面 ${#strings.toUpperCase(name)} ${#strings.toLowerCase(name)} ${#strings.trim(str)} ${#strings.length(str)} ${#strings.abbreviate(str,10)}// str截取0-10位，后面的全部用…這個點代替，注意，最小是3位布局
方式1
<nav th:fragment="header"> <h1>網(wǎng)頁頭部</h1> </nav><div th:include="common/base::header"></div>方式2
* ~~~html <nav th:fragment="footer"> <h1>網(wǎng)頁尾部</h1> </nav> ~~~ * ~~~html <div th:insert="~{common/base::#footer}"></div> ~~~ * 引入方式 > 1. th:insert > + 將公共的標簽及內容插入到指定標簽當中 > 2. th:replace > + 將公共的標簽替換指定的標簽 > 3. th:include > + 將公共標簽的內容包含到指定標簽當中 * 傳值 * ~~~html <div th:include="common/base::header(active='header')"></div> <h1 class="active"></h1> <div th:include="common/base::#header(active='footer')"></div> ~~~ * ~~~html <nav th:fragment="header"> <h1 th:class="${active=="header"?'active':''}">頭部</h1> </nav> ~~~
js模板
<script th:inline="javascript"> var name = /*[[${person.name}]]*/; console.log(name); </script>模板引擎不僅可以渲染html，也可以對JS中的進行預處理。而且為了在純靜態(tài)環(huán)境下可以運行
在script標簽中通過th:inline="javascript"來聲明這是要特殊處理的js腳本
