javascript
Springboot整合thymeleaf模板
Thymeleaf是個(gè)XML/XHTML/HTML5模板引擎，可以用于Web與非Web應(yīng)用。
Thymeleaf的主要目標(biāo)在于提供一種可被瀏覽器正確顯示的、格式良好的模板創(chuàng)建方式，因此也可以用作靜態(tài)建模。你可以使用它創(chuàng)建經(jīng)過驗(yàn)證的XML與HTML模板。相對(duì)于編寫邏輯或代碼，開發(fā)者只需將標(biāo)簽屬性添加到模板中即可。接下來，這些標(biāo)簽屬性就會(huì)在DOM（文檔對(duì)象模型）上執(zhí)行預(yù)先制定好的邏輯。Thymeleaf的可擴(kuò)展性也非常棒。你可以使用它定義自己的模板屬性集合，這樣就可以計(jì)算自定義表達(dá)式并使用自定義邏輯。這意味著Thymeleaf還可以作為模板引擎框架。
Thymeleaf的模板還可以用作工作原型，Thymeleaf會(huì)在運(yùn)行期替換掉靜態(tài)值。例如下面的html文件，當(dāng)作為靜態(tài)文件時(shí)，product name顯示為Red Chair，當(dāng)運(yùn)行在容器中并提供product這個(gè)對(duì)象時(shí)，product name的值會(huì)自動(dòng)替換為product.description對(duì)應(yīng)的值。下面就簡(jiǎn)單的講一講springboot整合thymeleaf模板。
1.引入依賴
在maven（pom.xml）中直接引入：
也可以在創(chuàng)建項(xiàng)目時(shí)候勾選thymeleaf模板，這樣會(huì)自動(dòng)生成。
2.配置視圖解析器
（1）默認(rèn)
spring-boot很多配置都有默認(rèn)配置,比如默認(rèn)頁(yè)面映射路徑為
classpath:/templates/*.html同樣靜態(tài)文件路徑為
classpath:/static/（2）自定義
在application.properties（或者application.yml）中可以配置thymeleaf模板解析器屬性.就像使用springMVC的JSP解析器配置一樣
#thymeleaf startspring.thymeleaf.mode=HTML5spring.thymeleaf.encoding=UTF-8spring.thymeleaf.content-type=text/html #開發(fā)時(shí)關(guān)閉緩存,不然沒法看到實(shí)時(shí)頁(yè)面spring.thymeleaf.cache=false#thymeleaf end具體可以配置的參數(shù)可以查看 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 這個(gè)類,上面的配置實(shí)際上就是注入到該類中的屬性值.
3.編寫demo來說明使用方法
（1）控制器
@Controllerpublic class HelloController(){@RequestMapping(value = "/")public String index(){return "index";}}這樣會(huì)返回一個(gè)新的視圖頁(yè)面index.html，當(dāng)然也可以使用下面的方法
@RequestConteollerpublic class HelloController(){@RequestMapping(value = "/")public ModelAndView index(){return new ModelAndView("index");}}這樣能直接返回整個(gè)index頁(yè)面。
(2)view
注意，在html標(biāo)簽里一定要引入 xmlns:th=“http://www.thymeleaf.org” ，這樣thymeleaf模板才會(huì)啟用。至于thymeleaf的具體使用方法，以后在講。
（3）測(cè)試
訪問 localhost:8080/ 這個(gè)地址，會(huì)直接跳轉(zhuǎn)到 index.html 頁(yè)面，并顯示如下
4.基礎(chǔ)語法
（1）引入標(biāo)簽
首先要在html標(biāo)簽里引入xmlns:th="http://www.thymeleaf.org"才能使用th:*這樣的語法。
（2）獲取變量值
通過在標(biāo)簽內(nèi)部，使用 ${} 來取值，對(duì)于javaBean的話，使用 變量名.屬性名 來獲取，跟EL表達(dá)式一樣
注意：只有寫在標(biāo)簽內(nèi)部才會(huì)生效，例如： th：text=“hello” 的意思是使用hello來代替p之前的內(nèi)容，p里原來的值是為了給前端開發(fā)展示用的，這樣做容易實(shí)現(xiàn)前后端分離。
（3）引入U(xiǎn)RL
thymeleaf對(duì)于引入U(xiǎn)RL是采用@{…}來獲取的
例如： 絕對(duì)路徑 是訪問絕對(duì)路徑下的URL， 相對(duì)路徑 是訪問相對(duì)路徑下的URL。
是引入默認(rèn)的static下的css文件夾下的bootstrap文件，類似的標(biāo)簽有: th:href 和 th:src
（4）字符串替換
例如使用： 或者
注意：|…|中只能包含變量表達(dá)式${…}，不能包含其他常量、條件表達(dá)式等。
（5）運(yùn)算符
在表達(dá)式中可以使用各類算術(shù)運(yùn)算符，例如 +, -, *, /, % .例如： th:with=“isEven=(${prodStat.count} % 2 == 0)”
邏輯運(yùn)算符 >, <, <=,>=，==,!= 都可以使用，唯一需要注意的是使用 <,> 時(shí)需要用它的HTML轉(zhuǎn)義符：
（6）條件
if/unless th：if是該標(biāo)簽在滿足條件的時(shí)候才會(huì)顯示，unless是不成立時(shí)候才顯示，例如
Switch thymeleaf支付switch結(jié)構(gòu)，默認(rèn)屬性（default）用*表示，例如：
<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>（7）循環(huán)
th：each是對(duì)于結(jié)果可以進(jìn)行遍歷的數(shù)據(jù)集，例如:
<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>（8）Utilities
為了模板更加易用，Thymeleaf還提供了一系列Utility對(duì)象（內(nèi)置于Context中），可以通過#直接訪問：
#dates #calendars #numbers #strings arrays lists sets maps … ${#dates.format(date, 'dd/MMM/yyyy HH:mm')} ${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')} ${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')} ${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')} ${#dates.createNow()} ${#strings.isEmpty(name)} ${#strings.arrayIsEmpty(nameArr)} ${#strings.listIsEmpty(nameList)} ${#strings.setIsEmpty(nameSet)} ${#strings.startsWith(name,'Don')} ${#strings.endsWith(name,endingFragment)} ${#strings.length(str)} ${#strings.equals(str)} ${#strings.equalsIgnoreCase(str)} ${#strings.concat(str)} ${#strings.concatReplaceNulls(str)} ${#strings.randomAlphanumeric(count)}（8）補(bǔ)充
在spring-boot1.4之后,支持thymeleaf3,可以更改版本號(hào)來進(jìn)行修改支持.
3相比2極大的提高了效率,并且不需要標(biāo)簽閉合,類似的link,img等都有了很好的支持,按照如下配置即可
（9）一些常用標(biāo)簽的使用說明
th：text 替換原來text中的東西
th:value 替換原來value的值
th:object 替換標(biāo)簽的對(duì)象，th：object=“對(duì)象”
th:field 填充，如圖上面又對(duì)象，可以直接用*{屬性}取值
th:checked 當(dāng)check的值為true時(shí)候?yàn)檫x中，false時(shí)為未選中
th:remove 刪除
th:href 用@{}替換連接地址
th:if 如果值為true的時(shí)候才顯示標(biāo)簽，否則不顯示
th:unless 不成立的時(shí)候才顯示
th:each 用戶循環(huán)遍歷結(jié)果集
th:style 替換樣式
th:action 替換action地址，用@{}取地址
th:alt 用@{}取地址
th:class 替換class的樣式
th:fragment 定義一個(gè)framemet模板，在后面引用他
（10）實(shí)例一：頁(yè)面的引用與替換
日常開發(fā)中，我們經(jīng)常會(huì)講導(dǎo)航，頁(yè)尾，菜單單獨(dú)提取成模板供其他頁(yè)面使用，在thymeleaf，我們可以使用th：fragment屬性來定義一個(gè)模板，例如：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> <head><meta charset="utf-8"/> </head> <body> <div class="container-fluid all"><div class="sidebar"><ul class="nav"><li><a th:href="@{/index}"> 首頁(yè)</a></li><li><a th:href="@{/add}"> 增加用戶</a></li><li><a th:href="@{#}"> 員工信息</a></li><li><a th:href="@{#}"> 工資信息</a></li><li><a th:href="@{#}"> 任務(wù)信息</a></li><li><a th:href="@{#}"> 人員調(diào)動(dòng)</a></li><li><a th:href="@{#}"> 檔案管理</a></li><li><a th:href="@{#}"> 歷史記錄</a></li></ul></div><div class="maincontent row"><div th:fragment="content"></div></div> </div> <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a> </body> </html>1.上面定義了一個(gè)叫做content的片段，我們可以使用 th：include 或者 th：replace 屬性來使用他，例如我們可以新建一個(gè)簡(jiǎn)單的頁(yè)尾模板，
新建一個(gè)html文件，路徑如下：/WEB-INF/templates/footer.html ，然后我們可以在footer.html文件中引入上面的content片段。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head><meta charset="UTF-8"/><title>Title</title> </head> <body><div th:include="footer :: content"></div> </body> </html>其中 th:include 中的參數(shù)格式為 templatename::[domselector] ，其中templatename是模板名（如footer），domselector是可選的dom選擇器。如果只寫templatename，不寫domselector，則會(huì)加載整個(gè)模板。我們也可以使用三目表達(dá)式來寫，例如 :
模板片段可以被包含在任意th:*屬性中，并且可以使用目標(biāo)頁(yè)面中的上下文變量。
2.不通過th：fragment引用模板,我們可以通過強(qiáng)大的dom選擇器，在不添加任何fragment屬性的情況定義模板，例如：
<div id="copy-section">© xxxxxx</div>通過dom選擇器來加載模板,如id為copy-section,
3.使用layout布局加載模板
在html標(biāo)簽中引用 xmlns:layout=“http://www.ultraq.net.nz/web/thymeleaf/layout” ,使用layout來進(jìn)行布局，然后在需要被引用的head頁(yè)面，要修改的地方添加
片段，例如： <!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"><head><meta charset="utf-8"/></head><body><div class="container-fluid all"><div class="sidebar"><ul class="nav"><li><a th:href="@{/index}"> 首頁(yè)</a></li><li><a th:href="@{/add}"> 增加用戶</a></li><li><a th:href="@{#}"> 員工信息</a></li><li><a th:href="@{#}"> 工資信息</a></li><li><a th:href="@{#}"> 任務(wù)信息</a></li><li><a th:href="@{#}"> 人員調(diào)動(dòng)</a></li><li><a th:href="@{#}"> 檔案管理</a></li><li><a th:href="@{#}"> 歷史記錄</a></li></ul></div><div class="maincontent row"><div th:fragment="content"></div></div></div><a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a></body></html>然后新建一個(gè)html文件，在html中引入 layout:decorator=“head” ，然后直接在body里添加
，在新的頁(yè)面中的div里添加需要的內(nèi)容，加載出來就是整合了head.html的新頁(yè)面。例如： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"layout:decorator="head"> <head><meta charset="UTF-8"/><title>添加用戶</title> </head> <body><div layout:fragment="content" class="col-sm-12"> </div></body> </html>在div里添加內(nèi)容，加載出來的頁(yè)面會(huì)包括head的內(nèi)容，而新頁(yè)面div的內(nèi)容，會(huì)顯示在head頁(yè)面中的
中，這樣使用布局更方便。4.th：include與th：replace的區(qū)別
th:include 是加載模板的內(nèi)容，而 th:replace 則會(huì)替換當(dāng)前標(biāo)簽為模板中的標(biāo)簽，例如：
<body> <div th:include="footer :: copy"></div><div th:replace="footer :: copy"></div> </body>這樣顯示的結(jié)果為：
<body> <div> © 2016 </div> <footer>© 2016 </footer> </body>第一個(gè)是加載了模板標(biāo)簽內(nèi)的內(nèi)容，第二個(gè)是替換了整個(gè)標(biāo)簽。
總結(jié)
以上是生活随笔為你收集整理的Springboot整合thymeleaf模板的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 语料库mysql_国内语料库建设一览表
- 下一篇： Spring配置AOP切入点execut