基于模板庫的動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)研究及實(shí)現(xiàn)

摘 要：動(dòng)態(tài)網(wǎng)頁是指網(wǎng)頁能依據(jù)不同的情況做出動(dòng)態(tài)的響應(yīng)。在對(duì)基于模板的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)問題進(jìn)行分析的基礎(chǔ)上，使用JSP 這種動(dòng)態(tài)網(wǎng)頁技術(shù)，并使用Struts模板標(biāo)簽，說明模板技術(shù)是如何將網(wǎng)頁所要實(shí)現(xiàn)的功能和網(wǎng)頁中的圖形、文字等的布局進(jìn)行分離的，并把模板庫思想動(dòng)態(tài)網(wǎng)頁相結(jié)合，最終將頁面按照整體各部分的功能類型分類，總結(jié)歸納出多個(gè)不同的頁面模板，組成一種小型應(yīng)用系統(tǒng)的常用模板庫。

關(guān)鍵詞：模板庫；動(dòng)態(tài)網(wǎng)頁；JSP；Struts

中圖分類號(hào)：TP311.52文獻(xiàn)標(biāo)識(shí)碼：B文章編號(hào)：1004373X(2008)2011603

Research and Realization of Dynamic Web Pages Based on Template Storage

ZHAO Yang，ZHANG Suning，CHEN Weiru

(School of Computer Science and Technology，Shenyang Institute of Chemical Technology，Shenyang，110142，China)

Abstract：Dynamic web page is that the web page can make dynamic response according to different situation.The design of dynamic web page，which is based on template is analyzed.Using JSP and Struts based on analysis，the problem about separation between the design of web page and the function is illustrated.Finally，the common page type is generalized，the common template storage，which is used in small application system is implemented.

Keywords：template storage;dynamic web page;JSP;Struts

1 引 言

目前，隨著各種應(yīng)用軟件的開發(fā)趨于系統(tǒng)化，模板技術(shù)被廣泛地應(yīng)用于各種應(yīng)用系統(tǒng)的開發(fā)設(shè)計(jì)中，使用模板可以方便管理網(wǎng)絡(luò)應(yīng)用程序，它事先搭建出一些常用的框架結(jié)構(gòu)，系統(tǒng)設(shè)計(jì)人員可以根據(jù)自己的需要方便地從模板庫中選擇模板，而不用自己重新去搭建系統(tǒng)模型，節(jié)省了用戶的開發(fā)時(shí)間＜sup＞［1］＜/sup＞。簡單的說，模板技術(shù)是一種使用相同的代碼來實(shí)現(xiàn)不同的函數(shù)和類的技術(shù)。通過定義模板函數(shù)和模板類，使不同的函數(shù)和類共享同一段代碼，從而提高開發(fā)效率。

動(dòng)態(tài)網(wǎng)頁是指網(wǎng)頁能依據(jù)不同的情況做出動(dòng)態(tài)的響應(yīng)。模板技術(shù)應(yīng)用在C++中的核心思想是通過將所要實(shí)現(xiàn)的函數(shù)或者類的功能，與這個(gè)函數(shù)或者類的數(shù)據(jù)類型分離，從而實(shí)現(xiàn)不同的函數(shù)和類共享同一段代碼；而將模板技術(shù)應(yīng)用于動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)時(shí)，主要是利用模板技術(shù)的這種將功能和數(shù)據(jù)類型分離的思想，把網(wǎng)頁所要實(shí)現(xiàn)的功能和網(wǎng)頁中的圖形、文字等的布局進(jìn)行分離。因?yàn)閯?dòng)態(tài)網(wǎng)頁和C++的內(nèi)涵是完全不同的，所以把模板技術(shù)應(yīng)用于動(dòng)態(tài)網(wǎng)頁中，讓網(wǎng)頁的程序員只需專注于內(nèi)核的程序、算法的開發(fā)和調(diào)試，而網(wǎng)頁的界面則由網(wǎng)頁美術(shù)設(shè)計(jì)人員利用自己最熟悉的可視化編輯器設(shè)計(jì)頁面布局，無需擔(dān)心破壞任何嵌入到頁面的代碼＜sup＞［2］＜/sup＞。在這種意義上實(shí)現(xiàn)系統(tǒng)設(shè)計(jì)人員工作上真正的合作與分工。

在本設(shè)計(jì)應(yīng)用中，以JSP 這種動(dòng)態(tài)網(wǎng)頁技術(shù)為例，并使用Struts模板標(biāo)簽，說明模板技術(shù)是如何將網(wǎng)頁所要實(shí)現(xiàn)的功能和網(wǎng)頁中的圖形、文字等的布局進(jìn)行分離的，并最終使頁面按照整體各個(gè)部分的功能類型分類，總結(jié)歸納出多個(gè)不同的頁面模板，組成一種小型應(yīng)用系統(tǒng)的常用模板庫。

2 基于模板庫的動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)研究

2.1 模板思想

通過模板可以創(chuàng)建很多結(jié)構(gòu)相似的東西，模板幫助避免許多重復(fù)的工作，這對(duì)創(chuàng)建網(wǎng)絡(luò)應(yīng)用程序是一件很方便的事情。

在大多數(shù)的網(wǎng)絡(luò)應(yīng)用程序中，經(jīng)常需更換的是內(nèi)容。JSP很容易做到這一點(diǎn)，模板是一種JSP文件，它包含參數(shù)化了的內(nèi)容。因?yàn)镴SP默認(rèn)提供一個(gè)include機(jī)制-＜jsp:include＞標(biāo)簽。一個(gè)標(biāo)準(zhǔn)頁面可以通過改變include文件來改變它的內(nèi)容。當(dāng)需要改變的不僅是頁面的內(nèi)容，還包括此頁面的布局時(shí)，用Java提供的布局管理機(jī)制可以幫人們更形象地理解這些問題。

當(dāng)容器中的組件改變時(shí)，布局管理器會(huì)決定怎么樣將新的組件部署到容器中。此外，容器本身也可以作為其他容器的組件，從而實(shí)現(xiàn)嵌套。在一些簡單的情況下，JSP就可以作為一個(gè)網(wǎng)絡(luò)應(yīng)用程序的模板，其功能則等價(jià)于布局管理器。模板隱藏了Web頁面布局的實(shí)現(xiàn)方法，換句話說，它隱藏了布局的法則。假如布局法則需要改變，則這些改變將會(huì)受限于模板。Web頁面通過實(shí)現(xiàn)這個(gè)模板來改變內(nèi)容。

模板集成了布局法則，當(dāng)要改變布局時(shí)，需要做的僅是改變模板。這些改變會(huì)引起相關(guān)頁面布局的改變，而不需要去改變這些頁面本身。在門戶應(yīng)用程序中，這就意味著當(dāng)大量頁面需要采用同樣布局時(shí)在時(shí)間上的節(jié)省。

2.2 基于模板庫的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)

Struts是Jakarta-Apache論壇下的一個(gè)開源項(xiàng)目，它提供類集、標(biāo)簽庫和一些能作為Web開發(fā)基礎(chǔ)的接口。網(wǎng)絡(luò)應(yīng)用程序框架使用MVC（Model，View，Controller）模式，能簡化網(wǎng)絡(luò)站點(diǎn)的開發(fā)。Struts正是這樣的一個(gè)框架。

標(biāo)簽庫的功能是將Java代碼從JSP頁面中移走，這意味這不懂Java的Web設(shè)計(jì)者也可以維護(hù)一個(gè)基于JSP的Web站點(diǎn)。

在Struts框架中，用3個(gè)模板標(biāo)簽來實(shí)現(xiàn)模板：

Template標(biāo)簽庫定義了處理頁面布局的標(biāo)簽，它可以幫助用戶在擁有許多相同的情況下，只需改變模板，就可以使用所有頁面產(chǎn)生同樣的效果。

插入標(biāo)簽InsertTag-＜template:insert＞：該標(biāo)簽可以在應(yīng)用程序的JSP頁面中插入動(dòng)態(tài)模板，在容器/集合單元文件（collecting unit file）中使用。它定義了當(dāng)前容器要使用的模板，類似于Java GUI中的container.setLayout(layout)方法。在它之后用＜template:put＞標(biāo)簽定義組件。

放入標(biāo)簽PutTag—＜template:put＞：它是＜template:insert＞標(biāo)簽的子標(biāo)簽，在容器/集合單元文件（collecting unit file）中使用。其定義了組成容器/集合單元的組件/內(nèi)容，類似于Java GUI中的container.add(component)方法。每個(gè)PutTag標(biāo)簽必須有一個(gè)相關(guān)組件的名稱。

獲得標(biāo)簽GetTag—＜template:get＞：在作為模板的JSP文件中使用，它告訴模板由PutTag標(biāo)簽定義的不同組件的名稱。類似于Java GUI中的layout.addLayoutComponent(componentName，component)方法。

從Struts 1.1開始，引入另一種模板機(jī)制—Tiles，現(xiàn)在它已經(jīng)成為了模板機(jī)制的一個(gè)主要分支。Tiles機(jī)制定義與Tiles網(wǎng)絡(luò)站點(diǎn)中，并且與Struts定義的模板標(biāo)簽兼容。事實(shí)上，Tiles是模板標(biāo)簽的一個(gè)擴(kuò)展集。Tiles允許傳遞參數(shù)，從而對(duì)容器有更多的控制權(quán)。當(dāng)想要使模板和容器具有動(dòng)態(tài)特性時(shí)變的非常有用。此外，Tiles與Struts動(dòng)作組件（Struts action components）結(jié)合的更為緊密。但是，Tiles會(huì)使代碼變的更為復(fù)雜。

基于網(wǎng)站的系統(tǒng)開發(fā)中，頁面的設(shè)計(jì)基本上都遵循了一個(gè)模式，即包含導(dǎo)航、頁面、頁眉、頁腳和主體，如圖1所示。

而在整個(gè)的頁面中，導(dǎo)航、頁眉、頁腳一般不會(huì)改變，只有主體部分需要依照實(shí)際進(jìn)行個(gè)性化的設(shè)置。這種一致性的布局為用戶瀏覽網(wǎng)站提供了更多的方便。

在理想狀態(tài)下頁面的代碼反應(yīng)了高層抽象的組織結(jié)構(gòu)。應(yīng)使用一種通用模板來說明頁面結(jié)構(gòu)，然后僅改變需要更改的內(nèi)容，而這樣的結(jié)構(gòu)體系就是復(fù)合視圖。

在復(fù)合視圖模式中，把對(duì)象看作是一種樹狀結(jié)構(gòu)，父結(jié)點(diǎn)與子結(jié)點(diǎn)實(shí)現(xiàn)相同的接口，在J2EE設(shè)計(jì)模式中，視圖的應(yīng)用是其被稱為復(fù)合視圖模式的一大原因。該模式的思想繼承了GOF的復(fù)合模式：把視圖（頁面）視為大量元素（“導(dǎo)航”、“頁眉”、“頁腳”和“主體”）的集合，每個(gè)元素是一個(gè)葉結(jié)點(diǎn)，而每個(gè)元素也可以是一個(gè)容器，包含更多的子元素。復(fù)合視圖模型中子元素在顯示時(shí)的排列構(gòu)造稱為“布局”。在一個(gè)視圖中將子元素處理得更好的解決方案就是將視圖的布局從視圖中抽離出來，形成由一系列通用組件組成的模板。模板提供一組普通的組件，用于描述頁面高層抽象的組織結(jié)構(gòu)，可靈活修改和添加組件，動(dòng)態(tài)地改變整個(gè)視圖，而模板本身又具有可重用的性質(zhì)^［3］。

3 模板庫的設(shè)計(jì)實(shí)現(xiàn)

模板庫的設(shè)計(jì)采用上述基于模板的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)思想，主要由Struts的Tiles框架實(shí)現(xiàn)，系統(tǒng)采用Tomcat5.0作為應(yīng)用服務(wù)器，以Eclipse3.2作為前端開發(fā)工具，定義了模板頁面：Manager_template.jsp和Student_template.jsp來具體構(gòu)架整個(gè)系統(tǒng)頁面，其主要是根據(jù)一般應(yīng)用系統(tǒng)的管理員和用戶2種身份來設(shè)計(jì)的。模板Manager_template.jsp是管理員的頁面模板，Student_template.jsp是用戶的頁面模板。這兩個(gè)模板定義了2種布局方式，換句話說，它們定義了2種不同的布局法則。相應(yīng)地，還可以定義其他的頁面布局模板，Others_template.jsp。

下邊列舉模板頁面Manager_template.jsp作為說明：Manager_template.jsp結(jié)構(gòu)圖（見圖2）。

＜%@ taglib uri=\"http://struts.apache.org/tags-bean\" prefix=\"bean\"%＞

…//聲明將會(huì)用到的標(biāo)簽庫

＜html:html locale=\"true\"＞

＜head＞＜title＞Home Page＜/title＞

＜meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2³¹2\" /＞

…

＜/head＞＜style type=\"text/css\"＞

body {//定義主體格式

…

＜/style＞

＜body bgcolor=\"#F4FFE4\" ＞

…

＜tr width=\"100%\"＞＜td colspan=\"3\" height=\"120\" width=\"100%\"＞

＜!--title--＞//定義導(dǎo)航的位置等屬性＜tiles:insert attribute=\"left\" flush=\"true\"＞＜/tiles:insert＞＜!--title--＞＜/td＞＜/tr＞…＜/div＞

＜/body＞＜/html:html＞

這里具體細(xì)節(jié)不一一列出，模板文件中定義了各個(gè)子頁面的擺放位置。

下面對(duì)Struts配置文件struts-config.xml進(jìn)行說明：Struts的配置文件主要是對(duì)struts框架用到的各種元素進(jìn)行配置，如actionform 類，action類，插件，轉(zhuǎn)發(fā)路徑等。這個(gè)配置文件也可以作為struts的控制文件，在這里主要說明Tiles框架的插件TilesPlugin的配置。

struts-config.xml

＜form-beans＞//actionform Bean的配置

＜form-bean name=\"loginForm\" type=\"jsp.shopstore.struts.form.LoginForm\"/＞…＜/form-beans＞

＜global-forwards＞//全局轉(zhuǎn)發(fā) ＜/global-forwards＞

＜action-mappings＞//設(shè)置通過模板組裝網(wǎng)頁的請(qǐng)求路徑

＜action path=\"/index\" type=\"org.apache.struts.actions.ForwardAction\"…＜/action-mappings＞

＜plug-in className=\"org.apache.struts.tiles.TilesPlugin\"＞//對(duì)于template插件設(shè)置

＜set-property property=\"definitions-config\" value=\"/WEB-INF/tiles-defs.xml\"/＞＜set-property property=\"moduleAware\" value=\"true\"/＞ ＜/plug-in＞

＜/struts-config＞

Tiles配置文件tiles-defs.xml說明：這個(gè)配置文件主要是給tiles框架提供一個(gè)網(wǎng)頁的詳細(xì)組成元素，通過definition的name找到模板頁，在從模板頁中tiles:insert的attribute屬性得到對(duì)應(yīng)的名字，把對(duì)應(yīng)的value加入模板頁中，形成要顯示的網(wǎng)頁。

tiles-defs.xml

＜tiles-definitions＞

＜definition name=\"indexT\" path=\"/web/pages/templateC.jsp\"＞//模板文件位置

＜put name=\"top\" value=\"/web/pages/client/top.jsp\"＞＜/put＞＞//模板包含文件

……＜/definition＞…………

＜/tiles-definitions＞

最終設(shè)計(jì)生成的小型系統(tǒng)模板庫如圖3所示，用戶可以根據(jù)自己的網(wǎng)頁設(shè)置安排，選擇相應(yīng)的模板文件和網(wǎng)頁子元素，組成前端顯示網(wǎng)頁。

4 結(jié) 語

本文介紹基于模板庫的動(dòng)態(tài)網(wǎng)頁的設(shè)計(jì)思想，并最終以JSP 這種動(dòng)態(tài)網(wǎng)頁技術(shù)為例，并結(jié)合Struts模板，說明模板技術(shù)是如何將網(wǎng)頁所要實(shí)現(xiàn)的功能和網(wǎng)頁中的圖形、文字等的布局進(jìn)行分離的，并最終將頁面按照功能類型進(jìn)行分類，設(shè)計(jì)出一種簡單的小型應(yīng)用系統(tǒng)的常用模板庫。

參考文獻(xiàn)

［1］李桂芳.淺談基于模板和標(biāo)簽庫JSP的網(wǎng)頁自動(dòng)生成的設(shè)計(jì)［J］.黑龍江科技信息，2007（5）：54-157.

［2］呂律，劉光昌.基于模板類的動(dòng)態(tài)網(wǎng)頁的實(shí)現(xiàn)［J］.計(jì)算機(jī)應(yīng)用與軟件，2004，21(12)：102-104.

［3］戎偉，張雙.Struts-Java流行服務(wù)器、框架、工具及整合應(yīng)用［M］.北京:人民郵電出版社，2006.

［4］曾雋芳，鄒益仁，葉正明.一種基于模板的系統(tǒng)開發(fā)方法［J］.計(jì)算機(jī)工程與應(yīng)用，2001，37(1):116-118.

［5］計(jì)磊，李里，周偉.J2EE-eclipse Struts Hibernate Spring整合應(yīng)用案例［M］.北京:人民郵電出版社，2006.

［6］瞿澤力，謝汶.JSP 網(wǎng)頁自動(dòng)生成工具設(shè)計(jì)與實(shí)現(xiàn)［J］.四川電力技術(shù)，2003(1):43-46.

［7］邵麗萍，紹光亞，張后揚(yáng).Java語言程序設(shè)計(jì)［M］.北京:清華大學(xué)出版社，2005.

［8］韓世芬.基于JSP 網(wǎng)頁自動(dòng)生成工具的開發(fā)［N］.科技咨詢，2006（17）：145.

［9］Cay S.Horstmann，Gary Cornell.Java 2核心技術(shù)卷I：基礎(chǔ)知識(shí)［M］.北京:機(jī)械工業(yè)出版社，2006.

［10］Bruce Eckel.Java編程思想［M］.北京:機(jī)械工業(yè)出版社，2005.

［11］Arnold Doray.Struts基礎(chǔ)教程［M］.北京:人民郵電出版社，2007.

作者簡介 趙 洋 男，1974年出生，遼寧撫順人，講師，碩士。主要從事計(jì)算機(jī)軟件方面的研究。

張素寧 女，1984年出生，河北衡水人，在讀碩士研究生。主要從事計(jì)算機(jī)軟件方面的研究。

陳未如 男，1963年出生，遼寧鐵嶺人，教授，碩士。主要從事構(gòu)件平臺(tái)技術(shù)與程序設(shè)計(jì)方法方面的研究。