基于SmartAdmin的數(shù)據維護軟件前臺的快速構建

賈麗芳+鄭建

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

關鍵詞：Web前端框架；SmartAdmin；數(shù)據維護

中圖分類號：TP311 文獻標識碼：A文章編號：1009-3044（2016）12-0001-02

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

1 SmartAdmin框架簡介

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1 SmartAdmin框架安裝部署

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

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

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

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

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

3.2框架組件典型應用

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

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

4 結束語

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

參考文獻：

[1] Bootstrap中文網[EB/OL].http：//www.bootcss.com/.

[2] Bootstrap主題模板網[EB/OL].https：//www.wrapbootstrap.com/.

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

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