高校可配置網站集群前端框架設計

于淑云

（福建船政交通職業技術學院 信息工程系，福建 福州 350002）

0 引 言

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

1 基于模版技術的網站集群管理系統工作原理

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

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

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

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

2 高校網站目前發展現狀及存在問題

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

3 可配置網站集群前端框架設計方案

3.1 網頁結構

一個完整的網頁由3部分組成，分別為內容、表現和行為，它們的關系如圖1所示。

圖1 一個完整的網頁

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

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

3.2 可配置頁面框架設計

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

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

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

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

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

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

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

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

3.3 可配置的網站集群前端框架的實現方法

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

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

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

簡單介紹實現可配置的網站集群前端框架的幾個關鍵技術點如下：

3.3.1 添加對象

在頁面上通過鼠標單擊實現添加對象，JQuery操作方法核心代碼如下：

var box＝＄（＇＜div＞節點＜／div＞＇）；／／創建一個節點

3.3.2 拖拽復制

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

使用droppable實現拖拽復制功能關鍵代碼如下：

3.3.3 移動

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

使用JQuery實現的拖拽代碼如下：

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

關鍵代碼如下：

3.3.4 刪除

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

4 結 語

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

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

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

［2］ 周方.基于模版技術的網站內容管理系統的設計與實現［D］.北京：北京交通大學，2009.

［3］ 王曦光.基于內容管理系統的農業信息網站集群系統的設計與實現［D］.北京：中國農業科學院，2010.

［4］ 葛世海.基于J2EE的站群管理平臺的設計與實現［D］.成都：電子科技大學，2010.

［5］ 張宏武.基于分布式高校網站站群管理系統的設計與實現［J］.科研應用，2013，（12）：112－114.

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

［7］ 王蓉，陳黎明，汪秀莉，等.基于集群技術的網站內容管理系統的設計與實現［J］.科技創新導報，2013（36）：180－181.