公安部第一研究所 王曉侃 黃瑩

該系統(tǒng)利用Web 框架適應(yīng)性廣、靈活多變的特點(diǎn)，部署于局域網(wǎng)的使用環(huán)境中，用于替換傳統(tǒng)的客戶端-服務(wù)器架構(gòu)，彌補(bǔ)傳統(tǒng)方法的不足。同時(shí)，使用Web 框架可兼容移動(dòng)式及固定式站點(diǎn)，進(jìn)而豐富的系統(tǒng)中的設(shè)備形態(tài)。借助近年來(lái)基于Web 框架的可視化效果的長(zhǎng)足進(jìn)步，為系統(tǒng)中不同角色的使用者提供不同層次的數(shù)據(jù)展示形式，是在局域網(wǎng)中引入廣域網(wǎng)相關(guān)技術(shù)的一次有益嘗試。

構(gòu)建于局域網(wǎng)中的數(shù)據(jù)采集管理系統(tǒng)通常采用客戶端-服務(wù)器架構(gòu)（Client-server 架構(gòu)，C/S 架構(gòu)），即根據(jù)部署局域網(wǎng)中的設(shè)備形態(tài)，采用對(duì)應(yīng)的開(kāi)發(fā)手段編寫(xiě)客戶端程序，與數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互，最終完成數(shù)據(jù)的采集、存儲(chǔ)、分析、展示等工作。這類系統(tǒng)在長(zhǎng)期的應(yīng)用中存在如下不足[1]：（1）擴(kuò)容成本較大，如需新增客戶端，需要根據(jù)程序的設(shè)計(jì)要求安裝相應(yīng)的環(huán)境并對(duì)程序進(jìn)行相應(yīng)配置，并且一旦客戶端的操作系統(tǒng)等客觀條件與開(kāi)發(fā)程序時(shí)不同可能會(huì)導(dǎo)致兼容性等問(wèn)題，特別是硬件類型不受客戶端程序支持，如，基于x86 架構(gòu)開(kāi)發(fā)的客戶端無(wú)法運(yùn)行在手機(jī)、平板電腦等移動(dòng)設(shè)備平臺(tái)時(shí)，需要重新開(kāi)發(fā)客戶端程序；（2）客戶端程序受部署硬件平臺(tái)的限制，無(wú)法提供統(tǒng)一的數(shù)據(jù)展示效果，且修改、升級(jí)程序的成本較大。為解決傳統(tǒng)C/S 架構(gòu)的不足，本文引入廣域網(wǎng)中流行的Web 框架解決C/S 架構(gòu)的不足。由于采用Web 頁(yè)面作為展示形式，Web 框架對(duì)客戶端的硬件類型及架構(gòu)沒(méi)有特別要求，并且部署方式友好，只要客戶端硬件平臺(tái)可以安裝瀏覽器軟件即可使用該程序，不僅可兼容不同操作系統(tǒng)的PC 平臺(tái)，而且可以無(wú)縫對(duì)接手機(jī)、平板電腦等移動(dòng)平臺(tái)，解決了C/S 架構(gòu)擴(kuò)容成本高的問(wèn)題[2]。由于采用Web 技術(shù)開(kāi)發(fā)，可以做到不同平臺(tái)具有一致的展示效果，為局域網(wǎng)中各類不同架構(gòu)的硬件設(shè)備提供統(tǒng)一的用戶體驗(yàn)，同時(shí)也減少了系統(tǒng)的開(kāi)發(fā)量，節(jié)約了開(kāi)發(fā)成本。

本文的安排如下：第一部分介紹整個(gè)系統(tǒng)的組成；第二部分介紹各模塊的主要功能及實(shí)現(xiàn)手段；第三部分是總結(jié)部分。

1 系統(tǒng)概述

本系統(tǒng)依照目前比較流行的MVC 框架創(chuàng)建整個(gè)Web 應(yīng)用程序，將應(yīng)用程序輸入、處理和輸出分開(kāi)。構(gòu)成Web 系統(tǒng)的三個(gè)核心部件：模型（Model）、視圖（View）、控制器（Control），整體結(jié)構(gòu)如圖1所示，按業(yè)務(wù)類型分為生產(chǎn)業(yè)務(wù)和管理業(yè)務(wù)兩部分，分別部署在對(duì)應(yīng)的工作場(chǎng)景中。在生產(chǎn)業(yè)務(wù)中，由采集模塊、存儲(chǔ)模塊構(gòu)成數(shù)據(jù)獲取、存儲(chǔ)，共同對(duì)應(yīng)MVC 框架中的模型部件，將在本文的后續(xù)內(nèi)容中詳細(xì)介紹。分析模塊是整個(gè)系統(tǒng)的基礎(chǔ)，該模塊根據(jù)具體的業(yè)務(wù)分析數(shù)據(jù)，得到數(shù)據(jù)的分析結(jié)果。Web 服務(wù)器對(duì)應(yīng)MVC 框架中的視圖和控制器部件，其作用是匯總各類行為數(shù)據(jù)并響應(yīng)管理人員的操作，其中的數(shù)據(jù)可視化模塊依據(jù)不同的需求為管理業(yè)務(wù)中不同管理人員提供多樣的展示不同類別的分析結(jié)果（圖1中管理業(yè)務(wù)的不同站點(diǎn)對(duì)應(yīng)了不同的管理業(yè)務(wù)），是連接生產(chǎn)業(yè)務(wù)和管理業(yè)務(wù)的樞紐。通常，管理業(yè)務(wù)涉及多方面的任務(wù)，圖1中采用多個(gè)管理站點(diǎn)代表不同的任務(wù)，這些管理任務(wù)的執(zhí)行者，即管理人員，通過(guò)Web 服務(wù)器提供的瀏覽器頁(yè)面對(duì)相關(guān)業(yè)務(wù)進(jìn)行操作，并根據(jù)需要控制分析模塊產(chǎn)生對(duì)應(yīng)的分析結(jié)果。

圖1 數(shù)據(jù)采集管理系統(tǒng)框圖Fig.1 Chart of data acquisition and management system

2 各模塊主要功能

2.1 采集模塊

采集模塊位于系統(tǒng)的底層，包括底層硬件、采集單元和協(xié)作單元兩部分。采集單元協(xié)調(diào)硬件設(shè)備獲取數(shù)據(jù)；協(xié)作單元有兩個(gè)主要功能：（1）與數(shù)據(jù)存儲(chǔ)模塊交互，存儲(chǔ)上述數(shù)據(jù)采集單元獲取的數(shù)據(jù)；（2）對(duì)采集得到的數(shù)據(jù)進(jìn)行匹配融合獲得初步的分析結(jié)果。

此外，數(shù)據(jù)采集單元與協(xié)作單元的交互遵循固定的接口，所有滿足交互接口的數(shù)據(jù)采集單元均可與協(xié)作單元連接，便于今后集成其他數(shù)據(jù)獲取手段。

2.2 存儲(chǔ)模塊

存儲(chǔ)模塊采用數(shù)據(jù)庫(kù)作為數(shù)據(jù)存儲(chǔ)的工具，將采集模塊獲取的數(shù)據(jù)以結(jié)構(gòu)化的描述方式存入數(shù)據(jù)庫(kù)，并被分析模塊調(diào)用。在分析模塊得出結(jié)果之后，存儲(chǔ)模塊負(fù)責(zé)存儲(chǔ)分析結(jié)果，供Web 服務(wù)器調(diào)用形成各類可視化數(shù)據(jù)。

2.3 分析模塊

分析模塊利用存儲(chǔ)模塊中的各類數(shù)據(jù)做進(jìn)一步的統(tǒng)計(jì)分析。所涉及的數(shù)據(jù)可以完全由采集模塊獲取也可以結(jié)合外部其他系統(tǒng)提供的數(shù)據(jù)做綜合分析。在這兩部分?jǐn)?shù)據(jù)的基礎(chǔ)上，分析模塊通過(guò)各類統(tǒng)計(jì)方法，總結(jié)蘊(yùn)含于數(shù)據(jù)中的規(guī)律性結(jié)論并將這些分析結(jié)果回寫(xiě)入存儲(chǔ)模塊，供Web 服務(wù)器的相關(guān)功能提取并向管理業(yè)務(wù)提供展示數(shù)據(jù)。

2.4 實(shí)現(xiàn)工具及框架

本系統(tǒng)主要采用Python 語(yǔ)言實(shí)現(xiàn)，Python 是網(wǎng)絡(luò)應(yīng)用中廣泛采用的語(yǔ)言之一，具有眾多流行的Web 應(yīng)用框架，如Django、Flask 等，可以快速搭建網(wǎng)站系統(tǒng)，快速迭代完善，十分適合本系統(tǒng)的開(kāi)發(fā)工作。但Python語(yǔ)言的執(zhí)行效率不高，不適用于對(duì)運(yùn)行速度要求高的場(chǎng)景，特別是局域網(wǎng)的使用場(chǎng)景中，經(jīng)常需要與底層硬件設(shè)備交互獲取實(shí)時(shí)數(shù)據(jù)，更加放大了執(zhí)行效率低的短板，針對(duì)這一問(wèn)題，可以采用C++語(yǔ)言重寫(xiě)與低層硬件的交互邏輯，并封裝成動(dòng)態(tài)鏈接庫(kù)的形式供上層的Python 語(yǔ)言調(diào)用，彌補(bǔ)Python 語(yǔ)言執(zhí)行效率低的劣勢(shì)。

在Web 應(yīng)用框架方面，本系統(tǒng)選擇使用靈活、輕量，擴(kuò)展性強(qiáng)的Flask 后端框架，作為搭建后臺(tái)系統(tǒng)的基本框架。使用Python 語(yǔ)言編寫(xiě)的Flask 框架符合Python 語(yǔ)言的設(shè)計(jì)哲學(xué)，追求“優(yōu)美勝于丑陋、簡(jiǎn)單勝過(guò)復(fù)雜”。Flask 將諸多復(fù)雜的后端操作，結(jié)合MVC 的開(kāi)發(fā)模式，使用簡(jiǎn)潔明快的調(diào)用方式設(shè)計(jì)API，基于這些API 可在短時(shí)間內(nèi)輕松上手Flask，為小型團(tuán)隊(duì)短期完成功能豐富的網(wǎng)站后端提供了保障。并且，該框架對(duì)第三方的擴(kuò)展十分開(kāi)放，因此吸引了眾多開(kāi)發(fā)者為Flask提供了各種類型插件的支持，為后端功能的個(gè)性化定制提供了可能。一方面追求核心內(nèi)容視線的簡(jiǎn)潔性；另一方面保持生態(tài)的健康發(fā)展，眾多插件作為外延保持了該框架的活力，在開(kāi)源社區(qū)范圍內(nèi)，F(xiàn)lask 框架也被稱為“微框架”，在肯定其內(nèi)核簡(jiǎn)潔輕量的同時(shí)，也預(yù)示著使用該框架擁有很高的自由度，例如數(shù)據(jù)庫(kù)和模板引擎等方面的選擇完全交給后端開(kāi)發(fā)者自主選擇，可根據(jù)實(shí)際條件，如，數(shù)據(jù)吞吐量、前端訪問(wèn)量等選擇對(duì)應(yīng)的數(shù)據(jù)庫(kù)及模板引擎。

在前端框架的選擇方面，使用Bootstrap 優(yōu)化頁(yè)面顯示，Bootstrap 框架是由Twitter 公司提出的開(kāi)源前端框架，使開(kāi)發(fā)者在投入很小精力的同時(shí)，搭建具有統(tǒng)一風(fēng)格的Web 頁(yè)面體系，是目前很受歡迎的前端框架。Bootstrap 基于HTML、CSS、JavaScript，它簡(jiǎn)潔靈活，使得Web 開(kāi)發(fā)更加快捷。它由Twitter 的設(shè)計(jì)師Mark Otto 和Jacob Thornton 合作開(kāi)發(fā)，是一個(gè)CSS/HTML 框架。Bootstrap提供了優(yōu)雅的HTML 和CSS 規(guī)范，它即是由動(dòng)態(tài)CSS語(yǔ)言Less 寫(xiě)成。Bootstrap 一經(jīng)推出后頗受歡迎，一直是GitHub 上的熱門(mén)開(kāi)源項(xiàng)目，包括NASA 的MSNBC（微軟全國(guó)廣播公司）的Breaking News 都使用了該項(xiàng)目。國(guó)內(nèi)一些移動(dòng)開(kāi)發(fā)者較為熟悉的框架，如WeX5 前端開(kāi)源框架等，也是基于Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。其特點(diǎn)為：

（1）跨設(shè)備、瀏覽器。甚至兼容IE7、8，一般不考慮IE9 以下的瀏覽器。

（2）響應(yīng)式布局。不僅可以支持PC 端的各種分辨率的顯示，還可以支持移動(dòng)端屏幕響應(yīng)式切換顯示。

（3）提供全面的組件。提供大量實(shí)用的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件。

（4）內(nèi)置jQuery 插件。內(nèi)置很多實(shí)用的jQuery 插件。

（5）支持HTML5、CSS3。HTML5 語(yǔ)義化標(biāo)簽和CSS3屬性都得到很好的支持。

（6）支持LESS 動(dòng)態(tài)樣式。LESS 實(shí)用變量、嵌套，操作混合編碼，編寫(xiě)更快、更靈活的CSS，能和Bootstrap 很好的配合開(kāi)發(fā)。

在數(shù)據(jù)可視化方面[3]，采用目前流行的EChars 數(shù)據(jù)可視化框架[4]，該框架是一個(gè)使用JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11、Chrome、Firefox、Safari 等），提供直觀、交互豐富、可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。部分展示效果如圖2所示。

圖2 ECharts 部分?jǐn)?shù)據(jù)可視化效果Fig.2 Examples of data visualization effect provided by ECharts

3 總結(jié)

本文主要從系統(tǒng)設(shè)計(jì)和功能實(shí)現(xiàn)兩方面，介紹了基于Web 框架的局域網(wǎng)數(shù)據(jù)采集管理系統(tǒng)。與傳統(tǒng)的客戶端-服務(wù)器架構(gòu)相比，本系統(tǒng)具有擴(kuò)容成本低、數(shù)據(jù)展示風(fēng)格統(tǒng)一美觀等特點(diǎn)，是在局域網(wǎng)中引入廣域網(wǎng)相關(guān)技術(shù)的一次有益嘗試。