后臺(tái)人員的強(qiáng)大之處在于,不僅可以寫(xiě)后臺(tái)代碼匹耕,還可以寫(xiě)前端頁(yè)面。
以前的ssm或者ssh赔蒲,常用的就是Jsp頁(yè)面泌神,還有的用模板技術(shù),比如freemarker,velocity等等舞虱,springboot推薦使用Thymeleaf模板技術(shù)欢际。簡(jiǎn)單說(shuō), Thymeleaf 是一個(gè)跟 Velocity矾兜、FreeMarker 類似的模板引擎损趋,它可以完全替代 JSP 。相較與其他的模板引擎椅寺,它有如下三個(gè)極吸引人的特點(diǎn):?
? ? 1.Thymeleaf 在有網(wǎng)絡(luò)和無(wú)網(wǎng)絡(luò)的環(huán)境下皆可運(yùn)行浑槽,即它可以讓美工在瀏覽器查看頁(yè)面的靜態(tài)效果,也可以讓程序員在服務(wù)器查看帶數(shù)據(jù)的動(dòng)態(tài)頁(yè)面效果返帕。這是由于它支持 html 原型桐玻,然后在 html 標(biāo)簽里增加額外的屬性來(lái)達(dá)到模板+數(shù)據(jù)的展示方式。瀏覽器解釋 html 時(shí)會(huì)忽略未定義的標(biāo)簽屬性荆萤,所以 thymeleaf 的模板可以靜態(tài)地運(yùn)行镊靴;當(dāng)有數(shù)據(jù)返回到頁(yè)面時(shí),Thymeleaf 標(biāo)簽會(huì)動(dòng)態(tài)地替換掉靜態(tài)內(nèi)容链韭,使頁(yè)面動(dòng)態(tài)顯示偏竟。
? ? 2.Thymeleaf 開(kāi)箱即用的特性。它提供標(biāo)準(zhǔn)和spring標(biāo)準(zhǔn)兩種方言敞峭,可以直接套用模板實(shí)現(xiàn)JSTL踊谋、 OGNL表達(dá)式效果,避免每天套模板旋讹、該jstl殖蚕、改標(biāo)簽的困擾。同時(shí)開(kāi)發(fā)人員也可以擴(kuò)展和創(chuàng)建自定義的方言骗村。
? ? 3. Thymeleaf 提供spring標(biāo)準(zhǔn)方言和一個(gè)與 SpringMVC 完美集成的可選模塊嫌褪,可以快速的實(shí)現(xiàn)表單綁定、屬性編輯器胚股、國(guó)際化等功能。
繼續(xù)使用前面的類似ssm的例子裙秋,使用Thymeleaf需要加入一個(gè)依賴:
加入依賴后琅拌,模板的使用配置基本搞定缨伊,說(shuō)一下默認(rèn)目錄,
/src/java/resources?:Maven的資源文件目錄
/src/java/resources/static:放置js进宝,css刻坊,圖片等靜態(tài)內(nèi)容的目錄
/src/java/resources/templates:放置頁(yè)面視圖文件的目錄
在視圖文件目錄中,加入index.html頁(yè)面党晋,內(nèi)容如下:
可以看到谭胚,這是個(gè)非常普通的html文件,唯一區(qū)別是在html標(biāo)簽中未玻,加入了下面這個(gè)屬性:
xmlns:th="http://www.thymeleaf.org"
這個(gè)簡(jiǎn)單的屬性就把Thymeleaf命名空間引入了進(jìn)來(lái)灾而,其它內(nèi)容就是普通的HTML元素。
頁(yè)面寫(xiě)好以后扳剿,寫(xiě)一個(gè)普通的Controller來(lái)跳轉(zhuǎn)旁趟,內(nèi)容如下:
可以看到,類注解改用了@Controller庇绽,因?yàn)橐D(zhuǎn)視圖頁(yè)面锡搜,所以不再使用@RestController(因?yàn)锧RestController=@Controller+@ResponeBody,會(huì)直接返回josn數(shù)據(jù))瞧掺,return內(nèi)容為頁(yè)面文件的位置耕餐,啟動(dòng)項(xiàng)目,訪問(wèn)對(duì)應(yīng)的頁(yè)面鏈接辟狈,可以看到內(nèi)容如下(http://localhost/thymeleaf):
可以看到在springboot中加入頁(yè)面視圖非常簡(jiǎn)單肠缔,幾乎也是零配置。后面將繼續(xù)介紹Thymeleaf技術(shù)上陕。
代碼地址:?https://gitee.com/blueses/spring-boot-demo