玩轉(zhuǎn)SpringBoot集成 Thymeleaf 模版引擎

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，在前后端分離開發(fā)模式已經(jīng)逐漸成為主流今天，前后端技術(shù)的劃分也越來越清晰，社會(huì)分工進(jìn)一步細(xì)化，職業(yè)崗位也更加細(xì)分，慢慢開始就有了前端攻城獅和后端攻城獅，技術(shù)也進(jìn)一步細(xì)分，出現(xiàn)了以HTML、JS等為主的頁面技術(shù)，以Java、Python為主的后端開發(fā)語言技術(shù)。

在Javaweb開發(fā)領(lǐng)域有著很多很優(yōu)秀的頁面技術(shù)，有靜態(tài)頁面技術(shù)，如：HTML/HTML5等，有動(dòng)態(tài)頁面技術(shù)，如：jsp。這些優(yōu)秀的頁面技術(shù)，使Java在web開發(fā)領(lǐng)域有著舉足輕重的地位。

今天咱們就來介紹一個(gè)在Java開發(fā)領(lǐng)域非常流行的模板引擎技術(shù)-Thymeleaf，用過SpringBoot的同學(xué)可能都知道，SpringBoot在自己體系里面默認(rèn)支持的頁面技術(shù)不是JSP，而是一個(gè)叫Thymeleaf的模板引擎技術(shù)，當(dāng)然它也是有一網(wǎng)頁技術(shù)。

為什么SpringBoot在web開發(fā)的時(shí)候不是默認(rèn)支持JSP了呢，做過web開發(fā)的同學(xué)可能都知道，其實(shí)JSP本身就是Servlet，在生產(chǎn)環(huán)境中，SpringBoot重新編譯JSP可能會(huì)導(dǎo)致較大的性能損失，并且很難追查到問題根源。

所以SpringBoot官方推薦的官方推薦使用Thymeleaf，今天咱們就來一起學(xué)習(xí)一下SpringBoot集成Thymeleaf模板引擎技術(shù)做web開發(fā)。

究竟是什么樣的一個(gè)技術(shù)，竟然可以得到SpringBoot的青睞，那這個(gè)我必須要好好研究一番。

什么是模板引擎

在傳統(tǒng)的頁面開發(fā)過程中通常采用的HTML+ JS技術(shù)，而現(xiàn)在大部分網(wǎng)站都采用標(biāo)簽化+模塊化 的設(shè)計(jì)。模板引擎其實(shí)就是根據(jù)這種方式，使用戶界面與業(yè)務(wù)數(shù)據(jù)（內(nèi)容）分離而產(chǎn)生的，它可以生成特定格式的文檔，用于網(wǎng)站的模板引擎就會(huì)生成一個(gè)標(biāo)準(zhǔn)的HTML文檔在原有的HTML頁面中來填充數(shù)據(jù)。最終達(dá)到渲染頁面的目的。而模板引擎技術(shù)主要分兩種：

常用的模板引擎技術(shù)：

• Thymeleaf

• FreeMarker

• Velocity
  今天咱么就來學(xué)習(xí)Thymeleaf.

什么是Thymeleaf

Thymeleaf是適用于Web和獨(dú)立環(huán)境的現(xiàn)代服務(wù)器端Java模板引擎，能夠處理HTML，XML，JavaScript，CSS甚至純文本。

Thymeleaf的主要目標(biāo)是提供一種優(yōu)雅且高度可維護(hù)的模板創(chuàng)建方式。為此，它以自然模板的概念為基礎(chǔ)，以不影響模板用作設(shè)計(jì)原型的方式將其邏輯注入模板文件。這樣可以改善設(shè)計(jì)溝通，并縮小設(shè)計(jì)團(tuán)隊(duì)與開發(fā)團(tuán)隊(duì)之間的差距。

Thymeleaf也已經(jīng)從一開始就設(shè)計(jì)了Web標(biāo)準(zhǔn)-尤其是HTML5-如果需要的話，允許您創(chuàng)建完全驗(yàn)證的模板

在現(xiàn)代web開發(fā)領(lǐng)域，前后端分離已經(jīng)成了標(biāo)配，前端可以獨(dú)立部署成為服務(wù)，前后端從物理上完全進(jìn)行隔離，降低程序耦合度。但是SpringBoot官方依然為我們提供了模版引擎用于一些無需前后端分離的場景。Thymeleaf是新一代的模板引擎，在Spring Boot 中，官方推薦使用Thymeleaf來做前端模版引擎。

Thymeleaf的主要特點(diǎn)：

• Thymeleaf 在有網(wǎng)絡(luò)和無網(wǎng)絡(luò)的環(huán)境下皆可運(yùn)行，即它可以讓美工在瀏覽器查看頁面的靜態(tài)效果，也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動(dòng)態(tài)頁面效果。這是由于它支持 html 原型，然后在 html 標(biāo)簽里增加額外的屬性來達(dá)到模板 數(shù)據(jù)的展示方式。瀏覽器解釋 html 時(shí)會(huì)忽略未定義的標(biāo)簽屬性，所以 Thymeleaf 的模板可以靜態(tài)地運(yùn)行；當(dāng)有數(shù)據(jù)返回到頁面時(shí)Thymeleaf 標(biāo)簽會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容，使頁面動(dòng)態(tài)顯示。

• Thymeleaf 開箱即用的特性。它提供標(biāo)準(zhǔn)和 Spring 標(biāo)準(zhǔn)兩種方言，可以直接套用模板實(shí)現(xiàn) JSTL、 OGNL表達(dá)式效果，避免每天套模板、改 Jstl、改標(biāo)簽的困擾。同時(shí)開發(fā)人員也可以擴(kuò)展和創(chuàng)建自定義的方言。

• Thymeleaf 提供 Spring 標(biāo)準(zhǔn)方言和一個(gè)與 SpringMVC 完美集成的可選模塊，可以快速的實(shí)現(xiàn)表單綁定、屬性編輯器、國際化等功能。

Thymeleaf渲染 Web 頁面

添加pom依賴

首先我們要根據(jù)之前學(xué)習(xí)SpringBoot的文章，先創(chuàng)建一個(gè)最簡單的SpringBoot工程，然后第一步添加Thymeleaf的依賴。

添加Thymeleaf相關(guān)屬性配置

在application.properties文件中添加Thymeleaf相關(guān)配置

創(chuàng)建HTML

創(chuàng)建html文件，放在template文件夾中

導(dǎo)入thymeleaf的名稱空間

<htmllang="en"xmlns:th="http://www.thymeleaf.org">

thymeleaf基礎(chǔ)語法

創(chuàng)建html頁面，我們使用的th:text；可以改變當(dāng)前元素里面的文本內(nèi)容；

創(chuàng)建controller測試

在寫controller的時(shí)候，一定要注意這次controller我們使用注解是@Controller，因?yàn)槲覀円D(zhuǎn)到html，不在是返回JSON數(shù)據(jù)了。

最后啟動(dòng)SpirngBoot工程，在瀏覽器地址欄中輸入http://localhost:8080/demo就可以了。

如果你看到了以上幾個(gè)大字，說明你已經(jīng)掌握了SpringBoot在web開發(fā)領(lǐng)域的重要技能了。

這節(jié)主要是把SpirngBoot集成模板引擎Thymeleaf中的步驟梳理了一下，希望同學(xué)們可以有所收獲。