于淑云

（福建船政交通職業(yè)技術(shù)學(xué)院 信息工程系，福建 福州 350002）

0 引 言

自1990年HTML語言誕生以來，網(wǎng)站開發(fā)技術(shù)的演進進入了第1階段，即靜態(tài)頁面開發(fā)階段。這一時期，主要借助于HTML語言作為開發(fā)工具，可以實現(xiàn)含有圖片和文字的靜態(tài)頁面。該技術(shù)對硬件要求低，文檔數(shù)據(jù)難以維護，不利于大量信息的管理與使用。直到1993年，誕生了CGI技術(shù)，網(wǎng)站開發(fā)進入了第2階段，即動態(tài)網(wǎng)頁開發(fā)階段。這一時期出現(xiàn)了PHP、ASP、JSP等技術(shù)，在以后的幾年時間里，動態(tài)網(wǎng)站開發(fā)技術(shù)得到了長足的發(fā)展，為新技術(shù)的出現(xiàn)奠定了基礎(chǔ)。隨著網(wǎng)絡(luò)應(yīng)用的豐富和發(fā)展，很多網(wǎng)站往往不能迅速跟進大量信息衍生及業(yè)務(wù)模式變革的腳步，常常需要花費大量的時間和人力來處理信息的更新和維護工作，網(wǎng)站的擴充、整合、改版工作變得更加復(fù)雜，這時候人們提出了網(wǎng)站群的概念，對于網(wǎng)站群進行有效管理最廣泛的技術(shù)就是內(nèi)容管理系統(tǒng)（Content Management System，CMS）［1］。簡而言之，CMS就是不需要學(xué)習(xí)復(fù)雜的建站技術(shù)，不需要學(xué)習(xí)太多的編程語言，就可以通過CMS構(gòu)建出一個風(fēng)格統(tǒng)一、功能強大的專業(yè)網(wǎng)站，此時網(wǎng)頁技術(shù)發(fā)展進入了第3階段，即網(wǎng)站集群管理階段。近幾年來，由于網(wǎng)站群的建立模式被廣泛應(yīng)用，人們對于網(wǎng)站群的管理和維護也提出了各種解決方案，應(yīng)用較為廣泛的是基于模版技術(shù)的網(wǎng)站集群內(nèi)容管理系統(tǒng)［2］。

1 基于模版技術(shù)的網(wǎng)站集群管理系統(tǒng)工作原理

基于模版的網(wǎng)站集群管理系統(tǒng)［3］是將原有網(wǎng)站的內(nèi)容和樣式分離開，樣式設(shè)計存儲在模版里，而數(shù)據(jù)內(nèi)容存儲在數(shù)據(jù)庫或獨立的文件中，Web服務(wù)器接到瀏覽器請求后，執(zhí)行CGI程序，根據(jù)程序調(diào)用的模版和數(shù)據(jù)庫內(nèi)容，動態(tài)生成HTML頁面。

網(wǎng)站頁面中的數(shù)據(jù)內(nèi)容可以分為多種內(nèi)容來源，這在數(shù)據(jù)庫上反映為多個表結(jié)構(gòu)，CMS可以為每一類數(shù)據(jù)建立一個數(shù)據(jù)庫表，另外，還需要提供擴展方式以供用戶定制使用，這屬于管理系統(tǒng)后臺的工作。由于該課題主要研究前端框架設(shè)計，因此后臺系統(tǒng)如何管理數(shù)據(jù)內(nèi)容，這里不做詳述，重點研究網(wǎng)站前端框架結(jié)構(gòu)。

網(wǎng)站的前端頁面總體來說可以分為3大類：首頁類、欄目類、內(nèi)容頁類。對于任何一個頁面來講，它都是由數(shù)據(jù)及HTML結(jié)構(gòu)組成的，數(shù)據(jù)包含在HTML標(biāo)簽里。HTML結(jié)構(gòu)包含了頁面的版式、色調(diào)樣式等外觀性展示，這些通過DIV＋CSS來實現(xiàn)。基于模版技術(shù)的網(wǎng)站集群管理系統(tǒng)最大的特點在于模版技術(shù)。網(wǎng)頁模版承載著網(wǎng)站的頁面布局和顯示風(fēng)格，其實質(zhì)就是HTML語言編寫的頁面，模版的基本結(jié)構(gòu)單元是DIV，語法結(jié)構(gòu)為＜div id＝"…"＞…＜／div＞，DIV區(qū)分不同的布局塊，用戶在對不同的布局塊進行配置的時候，系統(tǒng)根據(jù)不同的DIV的id值查找到當(dāng)前的布局塊進行配置。當(dāng)用戶配置完模版的布局塊之后，即可生成網(wǎng)頁。

基于模版技術(shù)的網(wǎng)站內(nèi)容的管理將網(wǎng)站管理變得簡易化，使得沒有專業(yè)知識的人員也可以管理和維護子網(wǎng)站，但這種基于模版的管理方式對于頁面的設(shè)置不夠靈活，因此，迫切需要一種既能夠操作簡單，又能靈活布局頁面的技術(shù)來實現(xiàn)網(wǎng)站群的管理。

2 高校網(wǎng)站目前發(fā)展現(xiàn)狀及存在問題

近年來，網(wǎng)站集群建設(shè)模式已經(jīng)被廣泛應(yīng)用，網(wǎng)站建設(shè)實現(xiàn)了從“一群網(wǎng)站”到“網(wǎng)站群”的飛躍發(fā)展。在這樣的背景下，網(wǎng)站集群內(nèi)容管理系統(tǒng)（Website Group Content Management System，WG－CMS）應(yīng)運而生，我校也順勢改進了網(wǎng)站管理方案，采用了集群管理模式，改進后的主網(wǎng)站及各個子網(wǎng)站風(fēng)格統(tǒng)一，管理配置統(tǒng)一，形成了一個有機體的網(wǎng)站群。但是，現(xiàn)有的網(wǎng)站集群管理系統(tǒng)，前端頁面的顯示方式一般都是通過模版來實現(xiàn)，而且這些模版一旦選擇，頁面的布局方式就基本定下來了，一旦需要增刪改內(nèi)容或者板塊，需網(wǎng)站群管理員手動修改，隨著網(wǎng)絡(luò)應(yīng)用的發(fā)展，網(wǎng)站群規(guī)模增大，網(wǎng)站信息變更速度增快，網(wǎng)站群管理員工作量日益增大；與此相對的是，各個子網(wǎng)站管理員需要對網(wǎng)站進行實時維護的需求旺盛，但一方面舊的網(wǎng)站管理權(quán)限決定了其管理模式受限［4－7］，另一方面各級子網(wǎng)站管理員尤其是不懂相關(guān)網(wǎng)絡(luò)編程語言和頁面編排軟件的純內(nèi)容維護員，還無法自由調(diào)整網(wǎng)頁布局，以快速實現(xiàn)自己想要的效果。因此，如何實現(xiàn)可配置的前端框架，進一步優(yōu)化網(wǎng)站集群管理系統(tǒng)，就成了擺在我校集群化網(wǎng)站管理員面前亟待解決的問題。

3 可配置網(wǎng)站集群前端框架設(shè)計方案

3.1 網(wǎng)頁結(jié)構(gòu)

一個完整的網(wǎng)頁由3部分組成，分別為內(nèi)容、表現(xiàn)和行為，它們的關(guān)系如圖1所示。

圖1 一個完整的網(wǎng)頁

結(jié)構(gòu)就是網(wǎng)頁的內(nèi)容，主要由HTML語言實現(xiàn)；表現(xiàn)即為網(wǎng)頁的樣式，主要由CSS樣式表實現(xiàn)；行為是網(wǎng)頁和用戶交互的動作，主要由JavaScript、jQuery等腳本語言實現(xiàn)。隨著互聯(lián)網(wǎng)在金融、商貿(mào)、公共服務(wù)、社會管理等經(jīng)濟社會生活中的應(yīng)用，以及互聯(lián)網(wǎng)與電信網(wǎng)、廣電網(wǎng)等的融合，單一的HTML頁面已經(jīng)不能滿足用戶的需求，用戶除了瀏覽相關(guān)信息外，還希望能與頁面進行交互操作，在這種需求下，1995年以后的瀏覽器都發(fā)展成可以支持Web頁中加入JavaScript或者VBscript等腳本代碼的網(wǎng)頁，以便創(chuàng)建內(nèi)容和表現(xiàn)力更豐富的頁面。90年代后期，在微軟與Netscape的“瀏覽器大戰(zhàn)”中誕生了DOM，文檔對象模型（Document Object Model，DOM）。DOM具有對HTML文件和XML文件元素的訪問控制能力，使得我們能夠利用DOM對某個HTML或XML文件實行添加、修改、刪除元素等操作，更改其現(xiàn)有的結(jié)構(gòu)或內(nèi)容。

DOM的這些操作大大增強了用戶體檢的Web設(shè)計。由于用戶可以通過DOM自由更改頁面的結(jié)構(gòu)和內(nèi)容，這就為網(wǎng)站集群前端框架設(shè)計的可配置提供了可能。我校近年來不斷發(fā)展，學(xué)校網(wǎng)站也成為廣大師生獲取學(xué)校信息的一個重要平臺，因此，學(xué)校網(wǎng)站群規(guī)模日益增大，信息變更速度加快，原有的基于模版技術(shù)的網(wǎng)站集群管理系統(tǒng)相對成熟，如果將原有的網(wǎng)站推翻重新開發(fā)，無疑是個聲勢浩大的工程。因此，可配置網(wǎng)站集群前端框架的設(shè)計思路就是在原有網(wǎng)站集群管理系統(tǒng)的基礎(chǔ)上，通過添加JavaScript、jQuery腳本以及jQuery UI插件，改進網(wǎng)站群管理，實現(xiàn)各級子網(wǎng)站用戶靈活自由布局頁面的功能。JQuery是一個兼容多瀏覽器的JavaScript庫，它提供API讓開發(fā)者編寫插件，現(xiàn)在基于JQuery的各種插件層出不窮，JQuery UI就是其中一款。使用JQuery UI可以實現(xiàn)可視化網(wǎng)站布局，支持拖拽并且是可視化的，即拖即用，支持眾多的Bootstrap組件。

3.2 可配置頁面框架設(shè)計

可配置的網(wǎng)站集群前端框架模版頁面有兩種設(shè)計思路，第1種思路操作界面如圖2所示。

圖2 第1種前端框架頁面簡圖

將各種控件放置在左側(cè)的“box組件區(qū)”，單擊或者拖拽某項組件，在右側(cè)“content頁面布局區(qū)”生成該控件，用戶通過拖拽操作，實現(xiàn)移動、縮放該控件。

在圖2中，常用的組件如菜單導(dǎo)航、數(shù)據(jù)表格、按鈕、提示框等放置在左側(cè)的box組件區(qū)，用戶從左側(cè)的組件區(qū)拖拽頁面元素放置到右邊的頁面布局窗口，該窗口為所見即所得的可視化視圖，頁面布局區(qū)content實際上就對應(yīng)了HTML代碼中的＜body＞＜／body＞對象。當(dāng)用戶從左側(cè)組件區(qū)拖拽一個組件放置到右側(cè)的頁面布局區(qū)時，實際上是產(chǎn)生了一個相應(yīng)的組件副本，將組件副本放置到右邊的content容器。這個過程類似于面向?qū)ο笳Z言中的類和實例的關(guān)系。在左側(cè)的組件區(qū)中，一個組件可以拖拽出若干個相同的組件副本，用戶可以調(diào)整各個組件副本的位置和大小。不同的組件可以實現(xiàn)嵌套拖放。組件就是模版的基本結(jié)構(gòu)單元，這個基本結(jié)構(gòu)單元是由DIV實現(xiàn)的，而DIV是可以實現(xiàn)嵌套的。當(dāng)用戶拖拽一個組件放置到content布局區(qū)域中時，當(dāng)前組件的父對象就是頁面即＜body＞＜／body＞；當(dāng)用戶拖拽一個組件到頁面布局區(qū)中的另一個組件上時，就會將另一個組件作為自己的父對象。當(dāng)用戶拖動組件在右邊的頁面布局區(qū)部署完成時，單擊“保存”按鈕。當(dāng)頁面布局完成后，可以通過遍歷頁面的DOM結(jié)構(gòu)，獲取到各個組件的信息，并轉(zhuǎn)變成字符串提交到后臺，由后臺處理生成新的頁面。

該設(shè)計思路使得用戶在頁面布局時，操作簡單，布局靈活，給用戶帶來了極大的便捷性。但是，該設(shè)計思路由于賦予用戶自由調(diào)整控件大小的權(quán)力，這樣，由不同二級管理員維護的各級子網(wǎng)站的外觀風(fēng)格很難實現(xiàn)整齊統(tǒng)一，這就使得網(wǎng)站群在外觀上又回到了參差不齊的格局。如何改進網(wǎng)站群的建設(shè)，使得各級子網(wǎng)站管理員既可以自主調(diào)整網(wǎng)頁布局，又能使得各個子網(wǎng)站風(fēng)格統(tǒng)一呢？根據(jù)我院各級子網(wǎng)站的具體特點，萌生第2種設(shè)計思路。第2種設(shè)計思路操作界面如圖3所示。

圖3 第2種前端框架頁面簡圖

根據(jù)我院網(wǎng)站內(nèi)容的特點，各級子網(wǎng)站所展示的信息內(nèi)容相對固定，可以將這些信息做成固定的欄目，由用戶添加，用戶可以添加系統(tǒng)已有的欄目，還可以自定義新的欄目。用戶通過“欄目設(shè)置”可以查看已有的欄目和添加新欄目，“欄目設(shè)置”就是為系統(tǒng)添加資源類型。建立好資源類型后，用戶通過“添加版塊”將建立好的資源模塊添加到頁面中去。版塊添加到頁面中后，用戶可以鼠標(biāo)拖動版塊，更改版塊在頁面中的位置，但不允許更改大小。這樣，既允許用戶自由添加內(nèi)容，又能確保網(wǎng)站外觀樣式的統(tǒng)一。

版塊的尺寸和外觀是既定的，也就是在前端框架模版頁面中HTML結(jié)構(gòu)和CSS樣式是預(yù)先規(guī)劃好的。頁面區(qū)域采用流式布局。如從組件區(qū)中拖動一個導(dǎo)航項到頁面布局區(qū)中，一般頁面中導(dǎo)航是通過列表即＜ul＞＜／ul＞或者＜o(jì)l＞＜／ol＞標(biāo)簽來實現(xiàn)的，增加一個導(dǎo)航項實際上是往＜ul＞＜／ul＞或者＜o(jì)l＞＜／ol＞標(biāo)簽中添加一對＜li＞＜／li＞標(biāo)簽。其他組件對象的使用同理。添加的列表項的樣式是固定的，同時，新的列表項添加進來后，JavaScript會自動去計算新添加的對象和其兄弟對象的位置距離大小，并確保每個子對象和其兄弟對象都有一個基礎(chǔ)的邊距。也即在同一個父對象中，不同子對象都有一個默認(rèn)的并且相同的padding和margin。用戶可以調(diào)整它在頁面上的數(shù)量和位置。當(dāng)用戶在布局區(qū)調(diào)整新對象的位置時，JavaScript根據(jù)操作對象的新位置自動調(diào)整其兄弟對象的位置及與其兄弟對象的邊距。布局區(qū)所有對象的排放順序是按照從上往下，從左往右的順序布置的，這樣做既符合文檔流式布局的原則，又符合人們常規(guī)的布局習(xí)慣。組件區(qū)的組件規(guī)格都是固定的，這樣一方面既可以賦予用戶權(quán)利靈活調(diào)整頁面的布局，又能統(tǒng)一網(wǎng)站的元素尺寸規(guī)格，使得各個頁面整齊劃一；另一方面，組件規(guī)格統(tǒng)一便于網(wǎng)站集群管理系統(tǒng)從后臺讀取json數(shù)據(jù)。這種通過便捷的拖拽實現(xiàn)可視化組件操作的方式主要通過JavaScript、JQuery以及JQuery UI插件來實現(xiàn)。

3.3 可配置的網(wǎng)站集群前端框架的實現(xiàn)方法

可配置的網(wǎng)站集群前端框架主要通過JavaScript、JQuery及其插件來實現(xiàn)的。至于JQuery，可以看成是JavaScript的精簡版，用更少的代碼實現(xiàn)更強大的功能。這里我們不再去細(xì)究JQuery插件中實現(xiàn)可視化布局的詳細(xì)代碼，只要引用相應(yīng)的文件即可。在頁面中添加以下代碼片段：

＜script type＝"text／javascript"src＝"js／jquery－1.8.min.js"＞＜／script＞

＜script type＝"text／javascript"src＝"js／jqueryui.js"＞＜／script＞

簡單介紹實現(xiàn)可配置的網(wǎng)站集群前端框架的幾個關(guān)鍵技術(shù)點如下：

3.3.1 添加對象

在頁面上通過鼠標(biāo)單擊實現(xiàn)添加對象，JQuery操作方法核心代碼如下：

var box＝＄（＇＜div＞節(jié)點＜／div＞＇）；／／創(chuàng)建一個節(jié)點

3.3.2 拖拽復(fù)制

可配置的前端框架中可以通過鼠標(biāo)拖拽實現(xiàn)網(wǎng)頁布局。如何在組件區(qū)拖拽出組件放置到頁面布局區(qū)（見圖2），在此過程中實現(xiàn)對象的復(fù)制呢？使用JQuery UI插件，開發(fā)人員只需要分別在拖拽源（source）和目標(biāo)（target）上調(diào)用draggable和droppable兩個函數(shù)即可。復(fù)制的功能主要是通過draggable函數(shù)的helper參數(shù)設(shè)定的。

使用droppable實現(xiàn)拖拽復(fù)制功能關(guān)鍵代碼如下：

3.3.3 移動

對象添加到頁面中后，用戶通過鼠標(biāo)拖動改變其位置。鼠標(biāo)拖拽移動操作在JavaScript原生代碼中的思想是：當(dāng)鼠標(biāo)移動時，讓元素捕獲事件在mousedown時，標(biāo)記開始拖拽，并獲取元素及鼠標(biāo)的坐標(biāo)位置；在mousemove時，不斷獲取鼠標(biāo)的新位置，并通過相應(yīng)的位置算法，來重新定位元素位置；在mouseup時，結(jié)束拖拽……然后重復(fù)。

使用JQuery實現(xiàn)的拖拽代碼如下：

如果使用JQuery UI插件代碼就更簡單了，用戶不需要寫大量的語句，直接用draggable函數(shù)就可以解決。

關(guān)鍵代碼如下：

3.3.4 刪除

當(dāng)用戶需要在可視化模版中更改頁面布局時，需要刪除頁面中已添加的組件對象。刪除組件時，通過鼠標(biāo)點擊獲取到相應(yīng)的DOM對象，進行刪除。在JQuery中，刪除的操作方法有很多，這里列舉幾種常用的方法。舉例如下：

4 結(jié) 語

在站群管理系統(tǒng)中，實現(xiàn)了對象的添加和移動的功能，可配置模版的主要功能基本實現(xiàn)，基于JQuery UI的可配置的前端框架設(shè)計思路也基本可以實現(xiàn)。在我院可配置的前端框架網(wǎng)站改進實施的具體過程中，還有許多問題需要思考和解決。例如用戶具體權(quán)限的合理分配；當(dāng)用戶實施了不符合規(guī)范的操作后的處理解決方法；不同對象之間的合理布局；不同瀏覽器下的兼容性問題等。網(wǎng)站框架的改進，增強了系統(tǒng)的功能，也增加了代碼量，如何精簡腳本，提高代碼的健壯性，也是要考慮的一個問題。另外，原有的版塊資源類型也存在冗余，需要進一步優(yōu)化改進。

高校網(wǎng)站作為各系統(tǒng)的綜合體現(xiàn)，已經(jīng)成為數(shù)字化校園的重要組成部分，高校站群管理系統(tǒng)基于B／S架構(gòu)設(shè)計，這種可視化和組建模塊拖拽的建站比傳統(tǒng)的站點開發(fā)、編輯、維護更加方便，易于操作，不需要代碼編輯就可以幫助用戶在短時間內(nèi)開發(fā)出功能完善、風(fēng)格多樣的站點。而基于JQuery UI實現(xiàn)的可視化網(wǎng)站布局的思路降低了多個站點的投入成本，避免了重復(fù)建設(shè)，充分利用現(xiàn)有成熟技術(shù)，實現(xiàn)網(wǎng)站集群前端框架改造，成本低，速度快，可擴展性好，適合向其他高校推廣。

［1］ 游洋.運用CMS建設(shè)高校信息平臺［J］.科技信息，2009（3）：87－88.

［2］ 周方.基于模版技術(shù)的網(wǎng)站內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)［D］.北京：北京交通大學(xué)，2009.

［3］ 王曦光.基于內(nèi)容管理系統(tǒng)的農(nóng)業(yè)信息網(wǎng)站集群系統(tǒng)的設(shè)計與實現(xiàn)［D］.北京：中國農(nóng)業(yè)科學(xué)院，2010.

［4］ 葛世海.基于J2EE的站群管理平臺的設(shè)計與實現(xiàn)［D］.成都：電子科技大學(xué)，2010.

［5］ 張宏武.基于分布式高校網(wǎng)站站群管理系統(tǒng)的設(shè)計與實現(xiàn)［J］.科研應(yīng)用，2013，（12）：112－114.

［6］ 謝金生.基于B／S模式共享型專業(yè)學(xué)習(xí)平臺［J］.長春工業(yè)大學(xué)學(xué)報，2015，36（1）：91－96.

［7］ 王蓉，陳黎明，汪秀莉，等.基于集群技術(shù)的網(wǎng)站內(nèi)容管理系統(tǒng)的設(shè)計與實現(xiàn)［J］.科技創(chuàng)新導(dǎo)報，2013（36）：180－181.