基于Web框架的局域网数据采集管理系统

公安部第一研究所 王晓侃 黄莹

该系统利用Web 框架适应性广、灵活多变的特点，部署于局域网的使用环境中，用于替换传统的客户端-服务器架构，弥补传统方法的不足。同时，使用Web 框架可兼容移动式及固定式站点，进而丰富的系统中的设备形态。借助近年来基于Web 框架的可视化效果的长足进步，为系统中不同角色的使用者提供不同层次的数据展示形式，是在局域网中引入广域网相关技术的一次有益尝试。

构建于局域网中的数据采集管理系统通常采用客户端-服务器架构（Client-server 架构，C/S 架构），即根据部署局域网中的设备形态，采用对应的开发手段编写客户端程序，与数据库进行数据交互，最终完成数据的采集、存储、分析、展示等工作。这类系统在长期的应用中存在如下不足[1]：（1）扩容成本较大，如需新增客户端，需要根据程序的设计要求安装相应的环境并对程序进行相应配置，并且一旦客户端的操作系统等客观条件与开发程序时不同可能会导致兼容性等问题，特别是硬件类型不受客户端程序支持，如，基于x86 架构开发的客户端无法运行在手机、平板电脑等移动设备平台时，需要重新开发客户端程序；（2）客户端程序受部署硬件平台的限制，无法提供统一的数据展示效果，且修改、升级程序的成本较大。为解决传统C/S 架构的不足，本文引入广域网中流行的Web 框架解决C/S 架构的不足。由于采用Web 页面作为展示形式，Web 框架对客户端的硬件类型及架构没有特别要求，并且部署方式友好，只要客户端硬件平台可以安装浏览器软件即可使用该程序，不仅可兼容不同操作系统的PC 平台，而且可以无缝对接手机、平板电脑等移动平台，解决了C/S 架构扩容成本高的问题[2]。由于采用Web 技术开发，可以做到不同平台具有一致的展示效果，为局域网中各类不同架构的硬件设备提供统一的用户体验，同时也减少了系统的开发量，节约了开发成本。

本文的安排如下：第一部分介绍整个系统的组成；第二部分介绍各模块的主要功能及实现手段；第三部分是总结部分。

1 系统概述

本系统依照目前比较流行的MVC 框架创建整个Web 应用程序，将应用程序输入、处理和输出分开。构成Web 系统的三个核心部件：模型（Model）、视图（View）、控制器（Control），整体结构如图1所示，按业务类型分为生产业务和管理业务两部分，分别部署在对应的工作场景中。在生产业务中，由采集模块、存储模块构成数据获取、存储，共同对应MVC 框架中的模型部件，将在本文的后续内容中详细介绍。分析模块是整个系统的基础，该模块根据具体的业务分析数据，得到数据的分析结果。Web 服务器对应MVC 框架中的视图和控制器部件，其作用是汇总各类行为数据并响应管理人员的操作，其中的数据可视化模块依据不同的需求为管理业务中不同管理人员提供多样的展示不同类别的分析结果（图1中管理业务的不同站点对应了不同的管理业务），是连接生产业务和管理业务的枢纽。通常，管理业务涉及多方面的任务，图1中采用多个管理站点代表不同的任务，这些管理任务的执行者，即管理人员，通过Web 服务器提供的浏览器页面对相关业务进行操作，并根据需要控制分析模块产生对应的分析结果。

图1 数据采集管理系统框图Fig.1 Chart of data acquisition and management system

2 各模块主要功能

2.1 采集模块

采集模块位于系统的底层，包括底层硬件、采集单元和协作单元两部分。采集单元协调硬件设备获取数据；协作单元有两个主要功能：（1）与数据存储模块交互，存储上述数据采集单元获取的数据；（2）对采集得到的数据进行匹配融合获得初步的分析结果。

此外，数据采集单元与协作单元的交互遵循固定的接口，所有满足交互接口的数据采集单元均可与协作单元连接，便于今后集成其他数据获取手段。

2.2 存储模块

存储模块采用数据库作为数据存储的工具，将采集模块获取的数据以结构化的描述方式存入数据库，并被分析模块调用。在分析模块得出结果之后，存储模块负责存储分析结果，供Web 服务器调用形成各类可视化数据。

2.3 分析模块

分析模块利用存储模块中的各类数据做进一步的统计分析。所涉及的数据可以完全由采集模块获取也可以结合外部其他系统提供的数据做综合分析。在这两部分数据的基础上，分析模块通过各类统计方法，总结蕴含于数据中的规律性结论并将这些分析结果回写入存储模块，供Web 服务器的相关功能提取并向管理业务提供展示数据。

2.4 实现工具及框架

本系统主要采用Python 语言实现，Python 是网络应用中广泛采用的语言之一，具有众多流行的Web 应用框架，如Django、Flask 等，可以快速搭建网站系统，快速迭代完善，十分适合本系统的开发工作。但Python语言的执行效率不高，不适用于对运行速度要求高的场景，特别是局域网的使用场景中，经常需要与底层硬件设备交互获取实时数据，更加放大了执行效率低的短板，针对这一问题，可以采用C++语言重写与低层硬件的交互逻辑，并封装成动态链接库的形式供上层的Python 语言调用，弥补Python 语言执行效率低的劣势。

在Web 应用框架方面，本系统选择使用灵活、轻量，扩展性强的Flask 后端框架，作为搭建后台系统的基本框架。使用Python 语言编写的Flask 框架符合Python 语言的设计哲学，追求“优美胜于丑陋、简单胜过复杂”。Flask 将诸多复杂的后端操作，结合MVC 的开发模式，使用简洁明快的调用方式设计API，基于这些API 可在短时间内轻松上手Flask，为小型团队短期完成功能丰富的网站后端提供了保障。并且，该框架对第三方的扩展十分开放，因此吸引了众多开发者为Flask提供了各种类型插件的支持，为后端功能的个性化定制提供了可能。一方面追求核心内容视线的简洁性；另一方面保持生态的健康发展，众多插件作为外延保持了该框架的活力，在开源社区范围内，Flask 框架也被称为“微框架”，在肯定其内核简洁轻量的同时，也预示着使用该框架拥有很高的自由度，例如数据库和模板引擎等方面的选择完全交给后端开发者自主选择，可根据实际条件，如，数据吞吐量、前端访问量等选择对应的数据库及模板引擎。

在前端框架的选择方面，使用Bootstrap 优化页面显示，Bootstrap 框架是由Twitter 公司提出的开源前端框架，使开发者在投入很小精力的同时，搭建具有统一风格的Web 页面体系，是目前很受欢迎的前端框架。Bootstrap 基于HTML、CSS、JavaScript，它简洁灵活，使得Web 开发更加快捷。它由Twitter 的设计师Mark Otto 和Jacob Thornton 合作开发，是一个CSS/HTML 框架。Bootstrap提供了优雅的HTML 和CSS 规范，它即是由动态CSS语言Less 写成。Bootstrap 一经推出后颇受欢迎，一直是GitHub 上的热门开源项目，包括NASA 的MSNBC（微软全国广播公司）的Breaking News 都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5 前端开源框架等，也是基于Bootstrap 源码进行性能优化而来。其特点为：

（1）跨设备、浏览器。甚至兼容IE7、8，一般不考虑IE9 以下的浏览器。

（2）响应式布局。不仅可以支持PC 端的各种分辨率的显示，还可以支持移动端屏幕响应式切换显示。

（3）提供全面的组件。提供大量实用的组件，包括：导航、标签、工具条、按钮等一系列组件。

（4）内置jQuery 插件。内置很多实用的jQuery 插件。

（5）支持HTML5、CSS3。HTML5 语义化标签和CSS3属性都得到很好的支持。

（6）支持LESS 动态样式。LESS 实用变量、嵌套，操作混合编码，编写更快、更灵活的CSS，能和Bootstrap 很好的配合开发。

在数据可视化方面[3]，采用目前流行的EChars 数据可视化框架[4]，该框架是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11、Chrome、Firefox、Safari 等），提供直观、交互丰富、可高度个性化定制的数据可视化图表。部分展示效果如图2所示。

图2 ECharts 部分数据可视化效果Fig.2 Examples of data visualization effect provided by ECharts

3 总结

本文主要从系统设计和功能实现两方面，介绍了基于Web 框架的局域网数据采集管理系统。与传统的客户端-服务器架构相比，本系统具有扩容成本低、数据展示风格统一美观等特点，是在局域网中引入广域网相关技术的一次有益尝试。