我計(jì)劃完成 50 到 100 篇有關(guān) Spring 的文章,這是第十八篇.如果您對(duì)Spring和編程感興趣,歡迎訂閱我的頭條號(hào),也歡迎關(guān)注我的個(gè)人獨(dú)立IT博客：談?wù)処T,網(wǎng)址就是tantanit.com哦.

有時(shí)候,一些頁(yè)面會(huì)共用同樣的布局,比如相同的頭部菜單或者底部?jī)?nèi)容,可以將重復(fù)的內(nèi)容抽取出來(lái),寫(xiě)在單獨(dú)的文件里,而每個(gè)頁(yè)面在適當(dāng)?shù)牡胤揭脒@些文件.但是即使這樣,也還是顯得繁瑣,而且一旦布局變化(比如頭部的菜單移動(dòng)到側(cè)邊欄),每個(gè)文件也都要改.而使用Apache Tiles,可以將方便地重復(fù)使用布局模板,由于布局間可以繼承,對(duì)布局變化的處理也更加方便.

定義Tiles視圖解析器

下面代碼是繼承自WebMvcConfigurerAdapter的WebConfig類(lèi),在其中定義了TilesConfigurer和TilesViewResolver的bean.

配置TilesConfigurer和TilesViewResolver

上述代碼中,配置TilesConfigurer,指定tiles定義文件,并指定了多個(gè)tiles定義文件.然后,定義視圖解析器為T(mén)ilesViewResolver.
下面讓我們看一下/WEB-INF/layout/tiles.xml的內(nèi)容.

tiles定義

tiles定義

第一個(gè)definition中,定義了名稱(chēng)為base的模板,模板內(nèi)容為page.jsp,并且指定了兩個(gè)屬性header和footer,內(nèi)容分別為header.jsp,footer.jsp,這兩個(gè)屬性可以在page.jsp中使用.
第二個(gè)definition,定義了名稱(chēng)為home的頁(yè)面,這個(gè)頁(yè)面繼承了base模板,同時(shí),指定名稱(chēng)為body的屬性值為home.jsp,該屬性可以在page.jsp中使用.可以這樣理解,名稱(chēng)為home的頁(yè)面的布局已經(jīng)在page.jsp中定義了,個(gè)性化的部分,只有body屬性的內(nèi)容.
第三個(gè)definition,定義了名稱(chēng)為about的頁(yè)面,這個(gè)頁(yè)面也是繼承base模板,同時(shí),指定名稱(chēng)為body的屬性值為about.jsp.
這樣說(shuō)起來(lái)有點(diǎn)抽象,但看完page.jsp的內(nèi)容就會(huì)比較清楚了.

渲染頁(yè)面

page.jsp

page.jsp頁(yè)面中,作為模板頁(yè)面.定義了三個(gè)div,header,content和footer,其中,header的內(nèi)容由屬性header指定,footer的內(nèi)容由屬性footer指定,而這兩個(gè)屬性在名稱(chēng)為base的模板定義中已經(jīng)分別指定為header.jsp和footer.jsp,屬于每個(gè)頁(yè)面共同的布局.而id為content的內(nèi)容由屬性body指定,這個(gè)屬性由具體的頁(yè)面決定,是每個(gè)頁(yè)面除布局外的具體內(nèi)容.
在頁(yè)面渲染時(shí),比如要渲染home.jsp,除了home.jsp外,還會(huì)根據(jù)模板定義,加上相應(yīng)的布局,渲染完整的頁(yè)面.
下面貼出布局和具體頁(yè)面內(nèi)容,并展示最終效果.
header.jsp：

header.jsp

footer.jsp：

footer.jsp

home.jsp:

home.jsp

about.jsp:

about.jsp

首頁(yè)渲染效果如下：

關(guān)于頁(yè)面渲染效果如下：

樣式略丑,多包涵.

我已經(jīng)將代碼放在 https://github.com/4zd/spring-tiles 上,歡迎下載.

如果您喜歡這篇文章,可以收藏和分享給更多朋友哦,在此拜謝orz!收藏和分享后,在PC上看IT文章,觀感更好.您可以通過(guò)toutiao.com拜訪(fǎng)今日頭條,也可以直接拜訪(fǎng)我的獨(dú)立博客tantanit.com.這篇文章的地址是http://tantanit.com/spring-apache-tiles