2023年03月09日 13:21供稿中心:AG 尊龙凯时總部
隨着互聯網技術的發展,在前後端分離開發模式已經逐漸成為主流今天,前後端技術的劃分也越來越清晰,社會分工進一步細化,職業崗位也更加細分,慢慢開始就有了前端攻城獅和後端攻城獅,技術也進一步細分,出現了以HTML、JS等為主的頁面技術,以Java、Python為主的後端開發語言技術。
在Javaweb開發領域有着很多很優秀的頁面技術,有靜態頁面技術,如:HTML/HTML5等,有動態頁面技術,如:jsp。這些優秀的頁面技術,使Java在web開發領域有着舉足輕重的地位。
今天咱們就來介紹一個在Java開發領域非常流行的模板引擎技術-Thymeleaf,用過SpringBoot的同學可能都知道,SpringBoot在自己體系裏面默認支持的頁面技術不是JSP,而是一個叫Thymeleaf的模板引擎技術,當然它也是有一網頁技術。
為什麼SpringBoot在web開發的時候不是默認支持JSP了呢,做過web開發的同學可能都知道,其實JSP本身就是Servlet,在生產環境中,SpringBoot重新編譯JSP可能會導致較大的性能損失,並且很難追查到問題根源。
所以SpringBoot官方推薦的官方推薦使用Thymeleaf,今天咱們就來一起學習一下SpringBoot集成Thymeleaf模板引擎技術做web開發。
究竟是什麼樣的一個技術,竟然可以得到SpringBoot的青睞,那這個我必須要好好研究一番。
在傳統的頁面開發過程中通常採用的HTML+ JS技術,而現在大部分網站都採用標籤化+模塊化 的設計。模板引擎其實就是根據這種方式,使用戶界面與業務數據(內容)分離而產生的,它可以生成特定格式的文檔,用於網站的模板引擎就會生成一個標準的HTML文檔在原有的HTML頁面中來填充數據。最終達到渲染頁面的目的。而模板引擎技術主要分兩種:
常用的模板引擎技術:
Thymeleaf
FreeMarker
Velocity
今天咱麼就來學習Thymeleaf.
Thymeleaf是適用於Web和獨立環境的現代服務器端Java模板引擎,能夠處理HTML,XML,JavaScript,CSS甚至純文本。
Thymeleaf的主要目標是提供一種優雅且高度可維護的模板創建方式。為此,它以自然模板的概念為基礎,以不影響模板用作設計原型的方式將其邏輯注入模板文件。這樣可以改善設計溝通,並縮小設計團隊與開發團隊之間的差距。
Thymeleaf也已經從一開始就設計了Web標準-尤其是HTML5-如果需要的話,允許您創建完全驗證的模板
在現代web開發領域,前後端分離已經成了標配,前端可以獨立部署成為服務,前後端從物理上完全進行隔離,降低程序耦合度。但是SpringBoot官方依然為我們提供了模版引擎用於一些無需前後端分離的場景。Thymeleaf是新一代的模板引擎,在Spring Boot 中,官方推薦使用Thymeleaf來做前端模版引擎。
Thymeleaf 在有網絡和無網絡的環境下皆可運行,即它可以讓美工在瀏覽器查看頁面的靜態效果,也可以讓程式設計師在服務器查看帶數據的動態頁面效果。這是由於它支持 html 原型,然後在 html 標籤里增加額外的屬性來達到模板 數據的展示方式。瀏覽器解釋 html 時會忽略未定義的標籤屬性,所以 Thymeleaf 的模板可以靜態地運行;當有數據返回到頁面時Thymeleaf 標籤會動態地替換掉靜態內容,使頁面動態顯示。
Thymeleaf 開箱即用的特性。它提供標準和 Spring 標準兩種方言,可以直接套用模板實現 JSTL、 OGNL表達式效果,避免每天套模板、改 Jstl、改標籤的困擾。同時開發人員也可以擴展和創建自定義的方言。
Thymeleaf 提供 Spring 標準方言和一個與 SpringMVC 完美集成的可選模塊,可以快速的實現表單綁定、屬性編輯器、國際化等功能。
添加pom依賴
首先我們要根據之前學習SpringBoot的文章,先創建一個最簡單的SpringBoot工程,然後第一步添加Thymeleaf的依賴。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> |
添加Thymeleaf相關屬性配置
在application.properties文件中添加Thymeleaf相關配置
#Thymeleaf配置 # 編碼類型 spring.thymeleaf.encoding=utf-8 # 模板文件解析模式 spring.thymeleaf.mode=HTML5 # 模板文件位置前綴 spring.thymeleaf.prefix=classpath:/templates/ # 模板文件位置後綴 spring.thymeleaf.suffix=.html |
創建HTML
創建html文件,放在template文件夾中
導入thymeleaf的名稱空間
<htmllang="en"xmlns:th="http://www.thymeleaf.org">
thymeleaf基礎語法
創建html頁面,我們使用的th:text;可以改變當前元素裏面的文本內容;
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>SpringBoot集成thymeleaf</title> </head> <body> <h1>thymeleaf模板引擎</h1> <p th:text="${hello}">這是的內容將被替換</p> </body> </html> |
在寫controller的時候,一定要注意這次controller我們使用註解是@Controller,因為我們要跳轉到html,不在是返回JSON數據了。
/** * SpringBoot集成thymeleaf */ @Controller public class ThymeleafController { @RequestMapping("/demo") public String demo(Map<String,Object> map) { map.put("hello", "課工場, 更可靠的IT教育!!!"); // 返回到模板引擎地址 return "/demo"; } } |
最後啟動SpirngBoot工程,在瀏覽器地址欄中輸入http://localhost:8080/demo就可以了。
如果你看到了以上幾個大字,說明你已經掌握了SpringBoot在web開發領域的重要技能了。
這節主要是把SpirngBoot集成模板引擎Thymeleaf中的步驟梳理了一下,希望同學們可以有所收穫。
版本:1.0.2
版本:1.0.2
版本:1.1.0