開發通常我們都會使用模板引擎,比如:JSP、Velocity、Freemarker、Thymeleaf等等很多,那么模板引擎是干嘛用的?
模板引擎,顧名思義,是一款模板,模板中可以動態的寫入一些參數,我們將這些參數在代碼中傳入,以保證數據在頁面的動態調用,這就是引擎要做的,頁面和數據的動態傳輸模板。
SpringBoot官方為我們推薦的是Thymeleaf,讓我們來看看這款引擎哪里出彩:
語法相對更簡單,且功能強大;
1.引入Thymeleaf
直接在pom中添加即可
<dependency> <!-- 前后端分離的模板引擎 --> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
然而目前來看,官方默認的模板引擎的版本有些舊,我們需要變更下版本,那么只需要修改下version就可以了,可以去Thymeleaf的官網或者github上看一下最新的版本,引入即可,比如:
(不知道怎么添加的,自學pom.xml去,這里不做介紹,畢竟是進階的文章)
<thymeleaf.version>3.0.9.RELEASE</thymeleaf.version> <!-- 布局功能的支持程序,若thymeleaf 3主程序 , layout需要2以上版本 --> <thymeleaf-layout-dialect.version>2.3.0</thymeleaf-layout-dialect.version>
2.使用Thymeleaf和語法
首先我們需要關注下,SpringBoot若想使用模板引擎,那么需要將html文件放入在指定的文件夾才能被識別,SpringBoot這里默認識別的動態資源文件夾是
"classpath:/templates/"
所以我們需要將html頁放到這個文件夾中才能別自動識別和渲染。
Thymeleaf的語法說簡單,是因為它完全可以按照html的方式來編寫,舉例 “success.html”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>成功</h1> </body> </html>
然后我們來寫一個controller,訪問下這個頁面看看是否OK:(之前我們學習了在@Controller的類內加入@ResponseBody可以訪問json資源,這里不加的話,就是訪問頁面了)
@Controller public class SuccessController { @GetMapping("/success") public String sucTest(){ return "success"; } }
來看訪問結果:
很好,完成了我們的第一步實踐。
推薦:下載官方文檔,教你怎么用thymeleaf,如圖:(官方鏈接地址)
演示:查詢數據到頁面展示
1. 首先,我們先修改controller文件,寫入我們想要展示的數據
@Controller public class SuccessController { @GetMapping("/success") public String sucTest(Map<String,Object> map){ map.put("hello","你好"); return "success"; } }
2.然后來看看怎么讓這個數據展示在頁面,修改html頁來接收這個數據
1.首先在html中加入 xmlns:th="http://www.thymeleaf.org" ,這個可以幫助我們引導使用thymeleaf。
2.然后使用thymeleaf語法,在需要引值的地方添加th:text,這里表示需要引入文本,使用${xx},就是我們代碼中寫的值,這里填的是hello,頁面中應當返回的就是“你好”
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>成功</h1> <div th:text="${hello}">這是沒有引擎展示的數據</div>
</body>
</html>
最后,我們來看是否展示成功:
很好,沒有問題,hello的值是“你好”,成功展示。
另外,我們看到,在html中的div中,我們還有一段文字,沒有展示,這個文字是在沒有引入引擎的時候展示的,也就是前后端分離的作用了
以上就是一些簡單的使用,接下來,我們看下其他實現,也就是Thymeleaf的語法還有些什么。
語法規則
1. th: xxx ——可以任意替換原生屬性值;(參照官方文檔第十課,網上有中文版)
比如:(可以看到,原生的屬性,都替換成了hello的值)
<div id="abc" class="aaa" th:id="${hello}" th:class="${hello}" th:text="${hello}">這是沒有引擎展示的數據</div>
2.表達式的語法(官方文檔第四章),最重要的幾個,如下:
2.1 其中我們用的最多的當屬${...},這個功能十分強大,通常用來獲取我們在代碼中的值的,包括取方法中的參數、session/request中的參數等等,比如:
th:id="${session.abc} 或者 th:id="${string.tostring()}"
2.2 表達式*{...}的使用,在功能上同${...},但經常會配合th:object{...}來使用,表示其子集,例如:
<div th:object="${odin.user}" th:text="${hello}">這是沒有引擎展示的數據</div> <a th:id="*{name}"></a> <a th:id="*{sex}"></a> </div>
這里 * 就表示上邊object定義的變量odin.user。其下邊的*{name} 等同於 ${odin.user.name}
2.3 表達式#{...}的使用,表示獲取國際化內容
2.4 表達式@{...}的使用,用來定義url,比如:(可以看到url后邊的參數,使用小括號,key=value的形式來編寫的,多個參數,用逗號分隔)
另外,還可以拼接我們需要的url,如圖:
2.5 表達式~{...}表示片段的引用,如:(具體使用,去看官方文檔,自己實踐一下吧)
3. 其他的表達式
還有很多后邊會用到的表達式,
比如,字面量、文本操作(字符串拼接)、數學/布爾/比較/條件運算、特殊操作,參考文檔來學習吧!