賈麗芳+鄭建

摘要：隨著Web前端技術(shù)的發(fā)展，用戶對Web應(yīng)用的需求也隨之提高，實(shí)現(xiàn)一個具有炫酷的界面、豐富的數(shù)據(jù)交互功能的web應(yīng)用是開發(fā)人員夢寐以求的事，但除了滿足需求，企業(yè)還需要員工提高工作效率。 SmartAdmin作為一款當(dāng)前比較流行的前端框架，它能夠極大地縮減項(xiàng)目開發(fā)人員的工作量，降低企業(yè)運(yùn)營成本，達(dá)成企業(yè)與員工之間的互利共贏。本文首先介紹了SmartAdmin框架，其次是對數(shù)據(jù)維護(hù)軟件的功能分析，最后闡述了軟件前臺功能模塊構(gòu)建過程中對框架組件的典型應(yīng)運(yùn)，項(xiàng)目開發(fā)實(shí)踐對Web應(yīng)用的前臺快速構(gòu)建起到了很好地示范作用。

關(guān)鍵詞：Web前端框架；SmartAdmin；數(shù)據(jù)維護(hù)

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044（2016）12-0001-02

數(shù)據(jù)的定義五花八門，但都可以歸入結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)范疇。隨著企業(yè)數(shù)據(jù)的爆發(fā)式增長，企業(yè)急需一套能夠幫助管理員實(shí)時監(jiān)測數(shù)據(jù)狀態(tài)、發(fā)現(xiàn)異常迅速響應(yīng)的數(shù)據(jù)維護(hù)（Data Maintenance）軟件，然而在短時間內(nèi)開發(fā)一套樣式美觀、內(nèi)容豐富、形式生動的前臺界面絕非易事，與自己從零開始編寫代碼相比，選擇一種合適的前臺框架是更加明智的選擇，通過對比，我們最終采用了SmartAdmin作為項(xiàng)目的前臺框架，網(wǎng)頁使用JSP語言開發(fā)，完全滿足了軟件需求和開發(fā)進(jìn)度。

1 SmartAdmin框架簡介

介紹SmartAdmin之前，先來簡單講講Bootstrap框架。

Bootstrap是Twitter公司于2011年8月開源的一個前端開發(fā)工具包。它由Twitter的設(shè)計師Mark Otto和Jacob Thornton共同開發(fā)，目前已經(jīng)成為Github上比較流行的開源項(xiàng)目。 Bootstrap提供了豐富的元素和組件，支持響應(yīng)與非響應(yīng)式WEB設(shè)計，有較強(qiáng)的兼容性，可在多種設(shè)備上良好的運(yùn)行。它對常見的CSS布局小組件以及JavaScript插件也做了很好地封裝，前臺開發(fā)人員可以很方便地加以應(yīng)用。

Bootstrap使用的網(wǎng)格系統(tǒng)可以使開發(fā)人員很容易地控制頁面的跨設(shè)備顯示效果；響應(yīng)式設(shè)計能夠使布局與組件根據(jù)不同的屏幕分辨率與上網(wǎng)設(shè)備做出響應(yīng)，自動縮放；扁平化設(shè)計風(fēng)格能夠優(yōu)化網(wǎng)站加載速度，提高網(wǎng)站被檢索機(jī)率。

SmartAdmin是基于Bootstrap開發(fā)的Webapp模板，開發(fā)者可以付費(fèi)使用或者使用免費(fèi)開源的Bootstrap自行開發(fā)插件、模板。SmartAdmin是Bootstrap框架的最佳實(shí)踐之一，因此Bootstrap框架具有的特點(diǎn)，SmartAdmin也完全具備。

SmartAdmin開發(fā)包目錄包括DESIGNER、DEVELOPER、DOCUMENTATION三個文件夾，開發(fā)者只需關(guān)注后兩個文件夾即可，DOCUMENTATION提供了很好地文檔支持，方便開發(fā)人員查閱，DEVELOPER主要包括AJAX_version、HTML_version、PHP_version三個開發(fā)版本，用戶可以根據(jù)需要選擇適合自己的開發(fā)版本。

2 軟件前臺的總體功能分析

通過需求分析，數(shù)據(jù)維護(hù)軟件共分為五個功能模塊，分別為數(shù)據(jù)目錄、數(shù)據(jù)統(tǒng)計、數(shù)據(jù)瀏覽、數(shù)據(jù)管理、備份恢復(fù)等功能，數(shù)據(jù)維護(hù)軟件的功能分解圖如圖1所示。

1） 數(shù)據(jù)目錄：提供數(shù)據(jù)目錄生成及展示功能。

2） 數(shù)據(jù)統(tǒng)計：提供結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)的統(tǒng)計功能，結(jié)構(gòu)化數(shù)據(jù)細(xì)分為元數(shù)據(jù)、基礎(chǔ)數(shù)據(jù)及業(yè)務(wù)數(shù)據(jù)分別統(tǒng)計，非結(jié)構(gòu)化數(shù)據(jù)則從數(shù)量、日志、變化趨勢等角度進(jìn)行統(tǒng)計。

3） 數(shù)據(jù)瀏覽：提供針對存儲數(shù)據(jù)及可訪問數(shù)據(jù)的瀏覽功能，用戶通過該功能針對結(jié)構(gòu)化數(shù)據(jù)可以獲取數(shù)據(jù)庫屬性、數(shù)據(jù)表結(jié)構(gòu)及表數(shù)據(jù)等信息；針對非結(jié)構(gòu)化數(shù)據(jù)可以獲取存儲節(jié)點(diǎn)屬性及文件名稱、類型、大小等信息。

4） 數(shù)據(jù)管理：提供對數(shù)據(jù)存儲節(jié)點(diǎn)數(shù)據(jù)的維護(hù)功能。包括數(shù)據(jù)過濾、導(dǎo)出數(shù)據(jù)、單個或批量下載、刪除數(shù)據(jù)等功能。

5） 備份恢復(fù)：提供針對結(jié)構(gòu)化數(shù)據(jù)的備份恢復(fù)功能，用戶能夠在線針對數(shù)據(jù)庫表進(jìn)行備份及恢復(fù)操作。

3軟件前臺的總體功能實(shí)現(xiàn)

3.1 SmartAdmin框架安裝部署

SmartAdmin的HTML_version版本安裝步驟如下：

1） 首先在已有的開發(fā)包中按照“SmartAdmin＼DEVELOPER＼HTML_version”文件路徑打開文件；

2） 將HTML_version文件夾下的JS、CSS、Fonts、IMG四個子目錄復(fù)制到Web工程的對應(yīng)目錄下，此處可以根據(jù)開發(fā)需求去除一些多余的文件；

3） 打開Web工程的index.jsp主頁面，輸入代碼基本結(jié)構(gòu)如下所示；

4） 啟動工程，訪問index.jsp頁面，你可以看到如圖2所示的界面，代表SmartAdmin框架安裝成功。

3.2框架組件典型應(yīng)用

SmartAdmin提供了大量的組件，包括柱狀圖、餅狀圖、趨勢圖、彈出框、圖標(biāo)、表格、表單元素等等，我們可以根據(jù)功能需求很方便地加以復(fù)用，復(fù)用組件時需要在jsp頁面中同時引用對應(yīng)組件的js文件以及組件的html標(biāo)簽代碼。

數(shù)據(jù)目錄功能復(fù)用了SmartAdmin的目錄樣式；數(shù)據(jù)統(tǒng)計功能復(fù)用了SmartAdmin的餅狀圖、柱狀圖、表格、Tab頁等組件；數(shù)據(jù)瀏覽、數(shù)據(jù)管理、備份恢復(fù)也都復(fù)用了SmartAdmin的組件或樣式。

4 結(jié)束語

Web前端技術(shù)的空前繁榮使得前端開發(fā)有了更多的選擇，挑選一款適合的框架可以讓我們事半功倍，數(shù)據(jù)維護(hù)軟件項(xiàng)目采用的SmartAdmin框架完全滿足了軟件前臺快速構(gòu)建以及界面具有良好交互能力等多種需求，圓滿完成了前臺開發(fā)任務(wù)。

參考文獻(xiàn)：

[1] Bootstrap中文網(wǎng)[EB/OL].http：//www.bootcss.com/.

[2] Bootstrap主題模板網(wǎng)[EB/OL].https：//www.wrapbootstrap.com/.

[3] 吳曉明，潘永紅，謝惠芳.基于jQuery的中南大學(xué)門戶網(wǎng)站W(wǎng)ebUI的實(shí)現(xiàn)[J].武漢大學(xué)學(xué)報： 理學(xué)版， 2012（增刊1）361-364.

[4] 曹劉陽.編寫高質(zhì)量代碼-Web前端開發(fā)修煉之道[M].北京：機(jī)械工業(yè)出版社， 2010.