Springboot整合thymeleaf模板

Thymeleaf是個XML/XHTML/HTML5模板引擎,可以用于Web與非Web應用。

Thymeleaf的主要目標在于提供一種可被瀏覽器正確顯示的、格式良好的模板創建方式,因此也可以用作靜態建模。你可以使用它創建經過驗證的XML與HTML模板。相對于編寫邏輯或代碼,開發者只需將標簽屬性添加到模板中即可。接下來,這些標簽屬性就會在DOM(文檔對象模型)上執行預先制定好的邏輯。Thymeleaf的可擴展性也非常棒。你可以使用它定義自己的模板屬性集合,這樣就可以計算自定義表達式并使用自定義邏輯。這意味著Thymeleaf還可以作為模板引擎框架。
Thymeleaf的模板還可以用作工作原型,Thymeleaf會在運行期替換掉靜態值。例如下面的html文件,當作為靜態文件時,product name顯示為Red Chair,當運行在容器中并提供product這個對象時,product name的值會自動替換為product.description對應的值。下面就簡單的講一講springboot整合thymeleaf模板。
1.引入依賴
在maven(pom.xml)中直接引入:

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

也可以在創建項目時候勾選thymeleaf模板,這樣會自動生成。
2.配置視圖解析器

(1)默認

spring-boot很多配置都有默認配置,比如默認頁面映射路徑為

classpath:/templates/*.html 

同樣靜態文件路徑為

classpath:/static/

(2)自定義

在application.properties(或者application.yml)中可以配置thymeleaf模板解析器屬性.就像使用springMVC的JSP解析器配置一樣

#thymeleaf startspring.thymeleaf.mode=HTML5spring.thymeleaf.encoding=UTF-8spring.thymeleaf.content-type=text/html #開發時關閉緩存,不然沒法看到實時頁面spring.thymeleaf.cache=false#thymeleaf end

具體可以配置的參數可以查看 org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties 這個類,上面的配置實際上就是注入到該類中的屬性值.

3.編寫demo來說明使用方法

(1)控制器

@Controllerpublic class HelloController(){@RequestMapping(value = "/")public String index(){return "index";}}

這樣會返回一個新的視圖頁面index.html,當然也可以使用下面的方法

@RequestConteollerpublic class HelloController(){@RequestMapping(value = "/")public ModelAndView index(){return new ModelAndView("index");}}

這樣能直接返回整個index頁面。
(2)view

<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body><b th:text="hello,world!"><b/>
</body>
</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是采用@{…}來獲取的

例如: 絕對路徑 是訪問絕對路徑下的URL, 相對路徑 是訪問相對路徑下的URL。
      是引入默認的static下的css文件夾下的bootstrap文件,類似的標簽有: th:href 和 th:src

(4)字符串替換
例如使用: 或者

                  <span th:text="|Welcome to our application, ${user.name}!|"></span>  都可以實現替換

注意:|…|中只能包含變量表達式${…},不能包含其他常量、條件表達式等。

(5)運算符

在表達式中可以使用各類算術運算符,例如 +, -, *, /, % .例如: th:with=“isEven=(${prodStat.count} % 2 == 0)”
邏輯運算符 >, <, <=,>=,==,!= 都可以使用,唯一需要注意的是使用 <,> 時需要用它的HTML轉義符:

th:if="${prodStat.count} &gt; 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)用*表示,例如:

 <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)循環

th:each是對于結果可以進行遍歷的數據集,例如:

<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對象(內置于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屬性來定義一個模板,例如:

<!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}">&nbsp;首頁</a></li><li><a th:href="@{/add}">&nbsp;增加用戶</a></li><li><a th:href="@{#}">&nbsp;員工信息</a></li><li><a th:href="@{#}">&nbsp;工資信息</a></li><li><a th:href="@{#}">&nbsp;任務信息</a></li><li><a th:href="@{#}">&nbsp;人員調動</a></li><li><a th:href="@{#}">&nbsp;檔案管理</a></li><li><a th:href="@{#}">&nbsp;歷史記錄</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.上面定義了一個叫做content的片段,我們可以使用 th:include 或者 th:replace 屬性來使用他,例如我們可以新建一個簡單的頁尾模板,

新建一個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 中的參數格式為 templatename::[domselector] ,其中templatename是模板名(如footer),domselector是可選的dom選擇器。如果只寫templatename,不寫domselector,則會加載整個模板。我們也可以使用三目表達式來寫,例如 :

模板片段可以被包含在任意th:*屬性中,并且可以使用目標頁面中的上下文變量。

2.不通過th:fragment引用模板,我們可以通過強大的dom選擇器,在不添加任何fragment屬性的情況定義模板,例如:

<div id="copy-section">&copy; xxxxxx</div>

通過dom選擇器來加載模板,如id為copy-section,

3.使用layout布局加載模板

在html標簽中引用 xmlns:layout=“http://www.ultraq.net.nz/web/thymeleaf/layout” ,使用layout來進行布局,然后在需要被引用的head頁面,要修改的地方添加

片段,例如:

<!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}">&nbsp;首頁</a></li><li><a th:href="@{/add}">&nbsp;增加用戶</a></li><li><a th:href="@{#}">&nbsp;員工信息</a></li><li><a th:href="@{#}">&nbsp;工資信息</a></li><li><a th:href="@{#}">&nbsp;任務信息</a></li><li><a th:href="@{#}">&nbsp;人員調動</a></li><li><a th:href="@{#}">&nbsp;檔案管理</a></li><li><a th:href="@{#}">&nbsp;歷史記錄</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>

然后新建一個html文件,在html中引入 layout:decorator=“head” ,然后直接在body里添加

,在新的頁面中的div里添加需要的內容,加載出來就是整合了head.html的新頁面。例如:

<!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里添加內容,加載出來的頁面會包括head的內容,而新頁面div的內容,會顯示在head頁面中的

中,這樣使用布局更方便。

4.th:include與th:replace的區別

th:include 是加載模板的內容,而 th:replace 則會替換當前標簽為模板中的標簽,例如:

<body> <div th:include="footer :: copy"></div><div th:replace="footer :: copy"></div>
</body>

這樣顯示的結果為:

<body> <div> &copy; 2016 </div> <footer>&copy; 2016 </footer> </body>

第一個是加載了模板標簽內的內容,第二個是替換了整個標簽。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250040.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250040.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250040.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Java代碼輸出到txt文件(申請專利貼源碼的必備利器)

最近公司在申請專利&#xff0c;編寫不少文檔&#xff0c;項目的代碼量實在是過于龐大。如果一個一個的復制粘貼雖然能夠完成&#xff0c;但是對于程序員而言實在沒有這個必要。shell或者python就能解決這個問題。由于我個人對于shell和python不是非常熟練的情況下&#xff0c;…

【算法】 - 動態規劃 + 位運算

題目描述 思路1: 寫一個返回2進制中1數量的函數countOne遍歷0到num,對每一個數使用countOne,并將結果保存到res中返回 var countBits function (num) {let res new Array(num 1).fill(0);for (let i 0; i < num; i) {res[i] countOne(i.toString(2));}return res; };…

Spring配置AOP切入點execution詳解

例&#xff1a; execution (* com.sample.service…*. *(…)) 整個表達式可以分為五個部分&#xff1a; 1、execution():&#xff1a;表達式主體。 2、第一個*號&#xff1a;表示返回類型&#xff0c; *號表示所有的類型。 3、包名&#xff1a;表示需要攔截的包名&#xff…

Netty

1BS/CS? 2斷點續傳需要activeX,需要獨立客戶端有狀態,tomcat無狀態,或者Netty有狀態,可以斷點續傳 3Netty核心java nio性能比較高 4Jetty和Netty和dubbo區別? 5 轉載于:https://www.cnblogs.com/xinglongbing521/p/10105351.html

sympy科學計算器

SymPy庫常用函數 簡介 本文抄于https://www.cnblogs.com/baby123/p/6296629.html SymPy是一個符號計算的Python庫。它的目標是成為一個全功能的計算機代數系統&#xff0c;同時保持代碼簡 潔、易于理解和擴展。它完全由Python寫成&#xff0c;不依賴于外部庫。SymPy支持符號計算…

【異或運算】 - 交換2個數

1. 代碼 let a 3; let b 4; a a ^ b; b a ^ b; a a ^ b;2. 異或的性質 不同為1,相同為0(可以看做是無進制位的加法)交換律: a ^ b b ^ a;結合律: (a ^ b) ^ c a ^ (b ^ a);0 ^ x x;x ^ x 0; 3. 證明 下面證明1中的代碼 a 3 ^ 4;b (3 ^ 4) ^ 4 3 ^ 0 3;a (3…

Spring底層控制反轉解耦合(IOC)

簡單的例子解釋IOC控制反轉進行解耦合 一、相關概念 &#xff08;1&#xff09;解耦合 解耦合就是把程序中互相不相關或有限相關的模塊分割開來&#xff0c;把不同模塊互相之間的關系用接口進行準確定義&#xff0c;解耦前&#xff0c;兩個模塊之間共享所有信息&#xff1b; &…

Manacher算法學習筆記 | LeetCode#5

Manacher算法學習筆記 DECLARATION 引用來源&#xff1a;https://www.cnblogs.com/grandyang/p/4475985.html CONTENT 用途&#xff1a;尋找一個字符串的最長回文子串時間復雜度&#xff1a;O(N)算法步驟&#xff1a; 1.添加特殊字符 由于回文串的長度可奇可偶&#xff0c;比如…

content-type對照表

轉載于:https://www.cnblogs.com/mxyr/p/9238329.html

【算法小積累】 - 提取非0數最右側的1

參考 - 69:49 const getRightOne num > {return num & (~num 1); };

解耦合

廣大程序猿同胞&#xff0c;經常會看到“解耦合”&#xff0c;也有很多人&#xff0c;會用這個詞來裝X&#xff0c;但是&#xff0c;實際真正能理解的人&#xff0c;并不多。接下來&#xff0c;帶大家深入淺出的走一遍&#xff0c;如何解耦合。 首先&#xff0c;我們要知道&am…

CentOS安裝和配置Rsync進行文件同步

Liunx系統實現文件同步不需要搭建FTP這類的工具&#xff0c;只需要按照Rsync配置下文件就可以。 本文以Centos7.0為例。 1. 首先關閉SELINUX&#xff08;不關閉無法同步&#xff0c;權限太高了&#xff09; vi /etc/selinux/config #編輯防火墻配置文件 #SELINUXenforcing #注釋…

【linux】 -設備名稱與文件目錄

參考 - 鳥哥的linux私房菜基礎篇 在linux系統中,每個設備都被當成一個文件來對待幾乎所有的硬件設備文件都在/dev這個目錄內 下面給出,常見設備和文件路徑的對應關系 設備設備在Linux中的文件名SCSI、SATA、USB磁盤驅動器/dev/sd[a-p]U盤/dev/sd[a-p] (與SATA相同)Virtio接口/…

數據結構開發(7):典型問題分析(Bugfix)

0.目錄 1.創建異常對象時的空指針問題 2.LinkList 中的數據元素刪除 3.LinkList 中遍歷操作與刪除操作的混合使用 4.StaticLinkList 中數據元素刪除時的效率問題 5.StaticLinkList 是否需要提供析構函數&#xff1f; 6.StLib 是否有必要增加多維數組類&#xff1f; 1.創建異常對…

spring boot 使用視圖modelandview

1&#xff1a;springboot使用視圖解析器&#xff0c;添加依賴 <!-- freemarker模板引擎視圖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifactId></dependency>&…

題解-BOI 2004 Sequence

Problem bzoj & Luogu 題目大意&#xff1a; 給定序列\(\{a_i\}\)&#xff0c;求一個嚴格遞增序列\(\{b_i\}\)&#xff0c;使得\(\sum \bigl |a_i-b_i\bigr|\)最小 Thought 正序&#xff1a;直接對應 逆序&#xff1a;取中位數&#xff08;證明&#xff1a;“醫院設置”&am…

【vscode】編譯java時報錯亂碼

報錯如下 解決方案 改變終端的編碼格式 chcp 946注意: chcp 65001 UTF-8編碼chcp 936 GBK2312代碼頁

搭建集群架構

環境搭建進行規劃(磨刀不誤砍柴工). 集群架構組成說明. 負載均衡服務器使用Nginx做搭建,(nginx反向代理軟件) Nginx01<-------->Nginx02 3臺Web網站服務器,Nginx網站web服務功能 2臺負載均衡服務器 (對網站的流量進行分流,減少流量對某臺服務器的壓力) 3臺web服務器, (處…

Model、ModelMap和ModelAndView的使用詳解

1.前言 最近SSM框架開發web項目&#xff0c;用得比較火熱。spring-MVC肯定用過&#xff0c;在請求處理方法可出現和返回的參數類型中&#xff0c;最重要就是Model和ModelAndView了&#xff0c;對于MVC框架&#xff0c;控制器Controller執行業務邏輯&#xff0c;用于產生模型數據…

【mysql】- 初始化

參考 1、寫配置文件 在mysql的根目錄下創建 my.ini&#xff0c;根目錄的截圖和輸入的內容如下所示。 my.ini的內容如下 [mysql] default-character-setutf8[mysqld] character-set-serverutf8 default-storage-engineINNODB sql_modeSTRICT_TRANS_TABLES,NO_ZERO_IN_DATE,…