Springboot整合thymeleaf模板
Thymeleaf是個XML/XHTML/HTML5模板引擎，能夠用於Web與非Web應用。css
Thymeleaf的主要目標在於提供一種可被瀏覽器正確顯示的、格式良好的模板建立方式，所以也能夠用做靜態建模。你可使用它建立通過驗證的XML與HTML模板。相對於編寫邏輯或代碼，開發者只需將標籤屬性添加到模板中便可。接下來，這些標籤屬性就會在DOM（文檔對象模型）上執行預先制定好的邏輯。Thymeleaf的可擴展性也很是棒。你可使用它定義本身的模板屬性集合，這樣就能夠計算自定義表達式並使用自定義邏輯。這意味着Thymeleaf還能夠做爲模板引擎框架。html
Thymeleaf的模板還能夠用做工做原型，Thymeleaf會在運行期替換掉靜態值。例以下面的html文件，看成爲靜態文件時，product name顯示爲Red Chair，當運行在容器中並提供product這個對象時，product name的值會自動替換爲product.description對應的值。下面就簡單的講一講springboot整合thymeleaf模板。前端
1.引入依賴
在maven（pom.xml）中直接引入：java
1 <dependency> 2 <groupId>org.springframework.boot</groupId> 3 <artifactId>spring-boot-starter-thymeleaf</artifactId> 4 </dependency>
也能夠在建立項目時候勾選thymeleaf模板，這樣會自動生成。web
2.配置視圖解析器spring
（1）默認bootstrap
spring-boot不少配置都有默認配置,好比默認頁面映射路徑爲後端
classpath:/templates/*.html
一樣靜態文件路徑爲瀏覽器
classpath:/static/
（2）自定義緩存
在application.properties（或者application.yml）中能夠配置thymeleaf模板解析器屬性.就像使用springMVC的JSP解析器配置同樣
1 #thymeleaf start 2 spring.thymeleaf.mode=HTML5 3 spring.thymeleaf.encoding=UTF-8 4 spring.thymeleaf.content-type=text/html 5 #開發時關閉緩存,否則無法看到實時頁面 6 spring.thymeleaf.cache=false 7 #thymeleaf end
具體能夠配置的參數能夠查看 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 這個類,上面的配置實際上就是注入到該類中的屬性值.
3.編寫demo來講明使用方法
（1）控制器
1 @Controller 2 public class HelloController(){ 3 @RequestMapping(value = "/") 4 public String index(){ 5 return "index"; 6 } 7 }
這樣會返回一個新的視圖頁面index.html，固然也可使用下面的方法
@RequestConteoller public class HelloController(){ @RequestMapping(value = "/") public ModelAndView index(){ return new ModelAndView("index"); } }
這樣能直接返回整個index頁面。
(2)view
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" > 3 <head> 4 <meta charset="UTF-8"/> 5 <title>Title</title> 6 </head> 7 <body> 8 <b th:text="hello,world!"><b/> 9 </body> 10 </html>
注意，在html標籤裏必定要引入 xmlns:th="http://www.thymeleaf.org" ，這樣thymeleaf模板纔會啓用。至於thymeleaf的具體使用方法，之後在講。
（3）測試
訪問 localhost:8080/ 這個地址，會直接跳轉到 index.html 頁面，並顯示以下
4.基礎語法
（1）引入標籤
首先要在html標籤裏引入xmlns:th="http://www.thymeleaf.org"才能使用th:*這樣的語法。
（2）獲取變量值
經過在標籤內部，使用 ${} 來取值，對於javaBean的話，使用 變量名.屬性名 來獲取，跟EL表達式同樣
注意：只有寫在標籤內部纔會生效，例如： th：text=「hello」 的意思是使用hello來代替p以前的內容，p裏原來的值是爲了給前端開發展現用的，這樣作容易實現先後端分離。
（3）引入URL
thymeleaf對於引入URL是採用@{...}來獲取的
例如： <a th:href="@{http://www.baidu.com}">絕對路徑</a> 是訪問絕對路徑下的URL， <a th:href="@{/}">相對路徑</a> 是訪問相對路徑下的URL。
<a th:href="@{css/bootstrap.min.css}"> 是引入默認的static下的css文件夾下的bootstrap文件，相似的標籤有: th:href 和 th:src
（4）字符串替換
例如使用： <span th:text="'Welcome to our application, ' + ${user.name} + '!'"></span> 或者
<span th:text="|Welcome to our application, ${user.name}!|"></span> 均可以實現替換
注意：|…|中只能包含變量表達式${…}，不能包含其餘常量、條件表達式等。
（5）運算符
在表達式中可使用各種算術運算符，例如 +, -, *, /, % .例如： th:with="isEven=(${prodStat.count} % 2 == 0)"
邏輯運算符 >, <, <=,>=，==,!= 均可以使用，惟一須要注意的是使用 <,> 時須要用它的HTML轉義符：
th:if="${prodStat.count} > 1"
th:text="'Execution mode is ' + ( (${execMode} == 'dev')? 'Development' : 'Production')"
（6）條件
if/unless th：if是該標籤在知足條件的時候纔會顯示，unless是不成立時候才顯示，例如
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
Switch thymeleaf支付switch結構，默認屬性（default）用*表示，例如：
1 <div th:switch="${user.role}"> 2 <p th:case="'admin'">User is an administrator</p> 3 <p th:case="#{roles.manager}">User is a manager</p> 4 <p th:case="*">User is some other thing</p> 5 </div>
（7）循環
th：each是對於結果能夠進行遍歷的數據集，例如:
1 <tr th:each="prod : ${prods}"> 2 <td th:text="${prod.name}">Onions</td> 3 <td th:text="${prod.price}">2.41</td> 4 <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> 5 </tr>
（8）Utilities
爲了模板更加易用，Thymeleaf還提供了一系列Utility對象（內置於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）補充
在spring-boot1.4以後,支持thymeleaf3,能夠更改版本號來進行修改支持.
3相比2極大的提升了效率,而且不須要標籤閉合,相似的link,img等都有了很好的支持,按照以下配置便可
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- set thymeleaf version -->
<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
<!--set java version-->
<java.version>1.8</java.version>
</properties>
（9）一些經常使用標籤的使用說明
th：text 替換原來text中的東西
th:value 替換原來value的值
th:object 替換標籤的對象，th：object=「對象」
th:field 填充，如圖上面又對象，能夠直接用*{屬性}取值
th:checked 當check的值爲true時候爲選中，false時爲未選中
th:remove 刪除
th:href 用@{}替換鏈接地址
th:if 若是值爲true的時候才顯示標籤，不然不顯示
th:unless 不成立的時候才顯示
th:each 用戶循環遍歷結果集
th:style 替換樣式
th:action 替換action地址，用@{}取地址
th:alt 用@{}取地址
th:class 替換class的樣式
th:fragment 定義一個framemet模板，在後面引用他
（10）實例一：頁面的引用與替換
平常開發中，咱們常常會講導航，頁尾，菜單單獨提取成模板供其餘頁面使用，在thymeleaf，咱們可使用th：fragment屬性來定義一個模板，例如：
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> 4 <head> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <div class="container-fluid all"> 9 <div class="sidebar"> 10 <ul class="nav"> 11 <li><a th:href="@{/index}"> 首頁</a></li> 12 <li><a th:href="@{/add}"> 增長用戶</a></li> 13 <li><a th:href="@{#}"> 員工信息</a></li> 14 <li><a th:href="@{#}"> 工資信息</a></li> 15 <li><a th:href="@{#}"> 任務信息</a></li> 16 <li><a th:href="@{#}"> 人員調動</a></li> 17 <li><a th:href="@{#}"> 檔案管理</a></li> 18 <li><a th:href="@{#}"> 歷史記錄</a></li> 19 </ul> 20 </div> 21 <div class="maincontent row"> 22 23 <div th:fragment="content"> 24 </div> 25 26 </div> 27 </div> 28 <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a> 29 </body> 30 </html>
1.上面定義了一個叫作content的片斷，咱們可使用 th：include 或者 th：replace 屬性來使用他，例如咱們能夠新建一個簡單的頁尾模板，
新建一個html文件，路徑以下：/WEB-INF/templates/footer.html ，而後咱們能夠在footer.html文件中引入上面的content片斷。
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head> 4 <meta charset="UTF-8"/> 5 <title>Title</title> 6 </head> 7 <body> 8 <div th:include="footer :: content"></div> 9 </body> 10 </html>
其中 th:include 中的參數格式爲 templatename::[domselector] ，其中templatename是模板名（如footer），domselector是可選的dom選擇器。若是隻寫templatename，不寫domselector，則會加載整個模板。咱們也可使用三目表達式來寫，例如 :
<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
模板片斷能夠被包含在任意th:*屬性中，而且可使用目標頁面中的上下文變量。
2.不經過th：fragment引用模板,咱們能夠經過強大的dom選擇器，在不添加任何fragment屬性的狀況定義模板，例如：
1 <div id="copy-section"> 2 © xxxxxx 3 </div>
經過dom選擇器來加載模板,如id爲copy-section, <div th:include="footer :: #copy-section">
3.使用layout佈局加載模板
在html標籤中引用 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" ,使用layout來進行佈局，而後在須要被引用的head頁面，要修改的地方添加
<div layout:fragment="content"></div> 片斷，例如：
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"> 4 <head> 5 <meta charset="utf-8"/> 6 </head> 7 <body> 8 <div class="container-fluid all"> 9 <div class="sidebar"> 10 <ul class="nav"> 11 <li><a th:href="@{/index}"> 首頁</a></li> 12 <li><a th:href="@{/add}"> 增長用戶</a></li> 13 <li><a th:href="@{#}"> 員工信息</a></li> 14 <li><a th:href="@{#}"> 工資信息</a></li> 15 <li><a th:href="@{#}"> 任務信息</a></li> 16 <li><a th:href="@{#}"> 人員調動</a></li> 17 <li><a th:href="@{#}"> 檔案管理</a></li> 18 <li><a th:href="@{#}"> 歷史記錄</a></li> 19 </ul> 20 </div> 21 <div class="maincontent row"> 22 23 <div th:fragment="content"> 24 </div> 25 26 </div> 27 </div> 28 <a href="#top" id="goTop"><i class="fa fa-angle-up fa-3x"></i></a> 29 </body> 30 </html>
而後新建一個html文件，在html中引入 layout:decorator="head" ，而後直接在body裏添加 <div layout:fragment="content"></div> ，在新的頁面中的div裏添加須要的內容，加載出來就是整合了head.html的新頁面。例如：
1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org" 3 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" 4 layout:decorator="head"> 5 <head> 6 <meta charset="UTF-8"/> 7 <title>添加用戶</title> 8 </head> 9 <body> 10 11 <div layout:fragment="content" class="col-sm-12"> 12 </div> 13 14 </body> 15 </html>
在div裏添加內容，加載出來的頁面會包括head的內容，而新頁面div的內容，會顯示在head頁面中的 <div th:fragment="content"></div> 中，這樣使用佈局更方便。
4.th：include與th：replace的區別
th:include 是加載模板的內容，而 th:replace 則會替換當前標籤爲模板中的標籤，例如：
1 <body> 2 <div th:include="footer :: copy"></div> 3 <div th:replace="footer :: copy"></div> 4 </body>
這樣顯示的結果爲：
1 <body> 2 <div> © 2016 </div> 3 <footer>© 2016 </footer> 4 </body>
第一個是加載了模板標籤內的內容，第二個是替換了整個標籤。
參考：http://blog.csdn.net/u012706811/article/details/52185345
http://blog.csdn.net/pdw2009/article/details/44700897
https://www.jianshu.com/p/ed9d47f92e37
- 1. Springboot整合thymeleaf模板
- 2. （二）springboot整合thymeleaf模板
- 3. springboot整合 Thymeleaf模板
- 4. springboot整合Thymeleaf模板
- 5. 【Springboot】Springboot整合Thymeleaf模板引擎
- 6. 【SpringBoot】SpringBoot整合Thymeleaf模板引擎
- 7. jsp & thymeleaf 整合springboot 的雙模板
- 8. SpringBoot整合Thymeleaf模板引擎
- 9. springboot整合Thymeleaf模板引擎
- 10. 整合thymeleaf模板引擎
- 更多相關文章...
- • Maven 項目模板 - Maven教程
- • Eclipse 代碼模板 - Eclipse 教程
- • 委託模式
- • SpringBoot中properties文件不能自動提示解決方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Springboot整合thymeleaf模板
- 2. （二）springboot整合thymeleaf模板
- 3. springboot整合 Thymeleaf模板
- 4. springboot整合Thymeleaf模板
- 5. 【Springboot】Springboot整合Thymeleaf模板引擎
- 6. 【SpringBoot】SpringBoot整合Thymeleaf模板引擎
- 7. jsp & thymeleaf 整合springboot 的雙模板
- 8. SpringBoot整合Thymeleaf模板引擎
- 9. springboot整合Thymeleaf模板引擎
- 10. 整合thymeleaf模板引擎