链接：https://pan.baidu.com/s/1ncrmpJ_9Y-r9hyWcsH10RA 

提取码：tlq9

《中国互联网络发展状况统计报告》显示，截至 2018 年 6 月

30 日，我国手机网民规模达 7．88 亿，网民中使用手机上网人群的 占比达到 98．3％［1］。在网民数量不断增加的同时，各种新的移动应 用层出不穷，为了快速了解移动应用的业务流量特征和交互过程

等关键信息，设计了该基于 Vue 框架的移动应用可视化平台。 1 开发框架与数据库 该平台选择的是前后端分离的开发模式， 前端负责界面的 开发，后端负责数据的处理。 这种前后端分离的开发模式主要有 三个优点：一是前端 JS 可以做很大部分的数据处理工作，减小 了服务器的压力；二是后台出现的错误不会反映到前台，不会对 前端的开发产生干扰，是一种较为友好的处理方式；三是后台很 难去探知前端页面的分布情况，而这又是 JS 的强项，但 JS 无 法独立和服务器进行通讯的。 所以单单用后台去控制整体页面， 又或者只靠 JS 完成效果，都会难度加大，前后台各尽其职可以

最大程度地减少开发难度。

1．1 前端框架

Vue．js 是一个轻量级的框架，具有性能高、灵活性强的特点［2］。 数据的绑定在前端领域是个大问题。 现在我们更专注于数据，而 不是像使用 jQuery 一样对 DOM 进行微观的管理。 Vue 通过双 向响应数据绑定系统巧妙地处理了这个问题。 为实现这种响应

性，Vue 为状态中的每个变量添加了许多 getter 和 setter，以便 它可以跟踪更改并自动更新 DOM。 Vue 提供了 Vue Router 和

Vuex，这是为 Vue 量身定制的很好的库。 Vue 允许将一个网页 分割成可复用的组件， 每个 组 件 都 包 含 属 于 自 己 的 HTML、

CSS、JavaScript 以用来渲染到网页中相应的地方，从而提高了代 码的复用性，有利于进行后续界面的扩展。 此外，Vue 的文档也很 容易阅读，学习成本较低，所以选择了这款比较流行的前端框架。

1．2 后端框架

Express 是一个简洁灵活的基于 Node．js 的 Web 应用的 轻量级的框架，该框架提供了强大的特性供我们创建各种 Web

应用比如：模板解析、静态文件服务、中间件、路由控制等等［3］。 还可以使用插件或整合其他模块来帮助我们创建各种 Web 和 移动设备应用，并且支持 Ejs、jade 等多种模板，可以快速地搭 建一个具有完整功能的网站。 在快速发展的互联网时代，个性化

服务成为一种趋势，Node．js 高并发的优势比较明显，个性化服务

使得内容数据不能在前端服务器做缓存，因为每个人看到的都不

一样。 这时候前端服务器就必须处理每一个请求，但后端数据计 算则可以并行地做，让用户感觉不到明显延时。 该框架主要有三 个核心特性：①可以通过设置中间件来响应 HTTP 请求；②可以

通过设置不同的路由来执行 HTTP 的请求动作； ③向模板传递

参数就可以实现对 HTML 页面的渲染。

1．3 数据库 此项目的数据库选用的是非关系型数据库 Mongo DB。 通 过简单数据模型、 元数据和应用数据分离、 弱一致性等技术，

NoSQL 能够非常好地应对大数据的挑战［4］。Mongo DB 是一个

基于分布式文件存储的数据库，支持松散的数据结构，可以存储

比较复杂的数据类型。 Mongo 的最大特点是支持非常强大的查 询语言，还能够对数据建立索引［5］。 2 研究内容与方法

2．1 研究内容

该解析平台分为三层：第一层是信息的提取，将抓包工具获 取的 Pcap 包以 flow 为单位，提取出用于分析的信息，主要包括

①basic information，是 flow 的基本信息，包含协议信息、流量

特征、时间信息等；②Protocol information，是该 flow 的协议信 息。例如对于 DNS 来说，包含了 DNS 请求的域名、返回结果、响 应时间等；③Application information，是该 flow 的应用层信息。 例如请求的是视频文件， 那么需要解析视频文件的分辨率、码 率、帧率等信息；第二层是特征抽象，根据 flow information 提取

基于 Vue．js 的移动应用可视化平台的研究*

Research on Mobile Application Visualization Platform Based on Vue．js

冯传波 彭章友 张钟浩 （上海大学通信与信息工程学院，上海 200444）

摘要：移动应用是互联网产业的重要组成之一，随着智能终端和移动互联网的普及，我国的人口红利为移动应用创造了

良好的发展环境，移动应用产业也随之呈现爆发式增长。成千上万的移动应用程序涌现并深入到社会生活的各个领域，改善

了我们的生活。 移动应用具有业务变化快、业务本地化、业务流加密、无法分析业务交互流程等特征。 为此设计了一个基于

Vue 框架的移动应用分析平台，利用该平台可以实现快速分析未知业务、热门应用等，掌握第一手资源。

关键词：Vue，移动应用，流量特征，可视化平台

Abstract:Mobile applications have the characteristics of fast business change,business localization,business flow encryp￾tion,and inability to analyze business interaction processes in this paper．To this end,a Vue framework－based mobile applica￾tion analysis platform is designed,which can be used to quickly analyze unknown services,popular applications,etc．,and mas￾ter first－hand resources．

Keywords:Vue,mobile application,traffic characteristics,visualization platform

*国家自然科学基金青年科学基金项目（6170129） 图 1 解析平台系统框架图

102 基于 Vue．js 的移动应用可视化平台的研究

《工业控制计算机》2019 年第 32 卷第 5 期 出描述该业务的特征， 如业务是否加密、 业务采用的流媒体协 议、视频文件封装格式和编码方式、主机 DNS、主机信息等；第 三层是呈现， 将 flow information 和 feature 以可视化方法在网

站上进行显示。 该平台的可视化系统框架如图 1。 首先是数据的采集，选取的是 AppTracer，这是一款运行在

安卓客户端的抓包工具，相对于其他抓包工具，使用 AppTracer

用户不需要 root 手机就可以直接使用。 该工具以本地代理的方

式截获客户端与服务器之间的 IP 数据报文，可以在移动端直接 解析 IP 数据包， 默认情况下会引入其他应用后台产生的杂包， 会影响对某个移动应用的分析。 也可以通过过滤器选择指定应 用，监听指定移动应用的流量。 接下来是数据的存储， 可以将监听产生的 Pcap 文件上传 至阿里云、亚马逊云、局域网。 用户也可以用自己的阿里云账号、 亚马逊云账号进行 Pcap 文件管理，我们可以通过对 AppTracer 的 Setting 模块的参数进行配置来实现。 现在我们设置的是

上传至自己的服务器。 最后是对收集的数据进行处理，对 Pcap

文本进行解析，提取出关键信息，进行统计分析，以便用来进行

数据的可视化展示。

2．2 数据的可视化 首先我们需要安装 node（npm

包管理器是集成在 node 中）， 然后

安装淘宝镜像的相关依赖。 接下来 安装 vue－cli 脚手架构建工具，输入

命令 npm install －g vue－cli，安装 完成即可。 最后选定项目的存放路 径， 通过指令 vue init webpack ＋

项目名称，开始新建项目，并配置好

相对应的参数。 图 2 是本文建立的 项目的前端目录结构。

build 文 件 夹 里 边 是 项 目 构 建 （webpack）的 相 关 代 码 ，项 目 最 后

发布的时候也是发布在这里。 config

文件夹主要是配置项目的目录，包 括端口号等。 node＿modules 文件夹 里面主要是使 npm 加载的项目依赖模块。 src 是我们的开发目 录，主要包括 assets、components、views、App．vue、和 main．js。 其中 assets 主要放置一些图标，components 是项目的组件文 件，将用到比较多的部分抽取出来设置为组件，方便在其他界面 中调用。 views 是最终要呈现的界面。 static 主要是静态资源目 录，如图片、字体等。 index．html 是项目首页入口文件，packge．

json 主要是项目的配置文件。 页面部分分成了三部分，最上面是该平台的 logo，左边是导 航栏，右边是内容展示区。 内容展示区又分为搜索添加类别区、面 包屑导航区和图形展示区。 界面部分是通过类别选择具体的应用

名称，然后根据选中的应用名称选择一个抓包名，最后通过查询 按钮进行可视化显示。 通过 vue 框架中的 v－for 指令循环遍历数 组，将类别、应用名、抓包名进行显示。 我们在该项目中主要分析 了比较常用的移动端应用，主要包括视频、游戏、社交、浏览器、手 机助手、购物等。 具体的每一类又包括几个不同的应用名称，比如 视频类主要分析了腾讯视频、爱奇艺、优酷、搜狐视频、youtube。 为了直观展示单次业务的流量和服务器的地理化分布，引

用了 ECharts 插件， 它是一个使用 JavaScript 实现的开源可视 化库，能够流畅的运行在 PC 和移动设备上，可以为我们提供直 观、交互丰富、可以高度定制化的数据可视化图表。 本文使用了

折线图来展示单次业务的流量情况，横坐标为时间，单位是秒。 纵坐标通过进行换算折算为数字信号的传输速率， 也就是每秒 传输多少个千位的信息。 图例设置为我们从后台获取的一组 IP

地址（设置一次传递五个），并用不用颜色的图例图标来进行区 分。 图 3 是选取的优酷视频的一个抓包文件处理的结果。 图 3 IO Graph of Servers

从图 3 我们可以直观地看出在该段时间内， 本次业务的流 量访问情况，大致每隔 20s 达到一个峰值，这是把这五个不同的

IP 地址叠加之后的结果，也可以点击图例，选择其中一个或者几

个 IP 地址来单独进行分析。 该图的纵坐标高度是自适应的，方 便我们查看流量的访问情况。 为了直观显示业务访问服务器的地理化分布， 采取了在地 图上打点的方式，根据不同的经纬度来定位服务器所在的城市。 这里一次传过来五个 IP 地址， 如果两个 IP 地址所在的城市相 同，就将 IP 地址进行叠加，具体实现方法如下：

var obj＝邀妖;

for（var i＝0;i＜mapData[i]．length;i＋＋）邀

if（选obj[mapData[i]．name]）邀

obj[mapData[i]．name＝mapData[i];

妖else邀

obj[mapData[i]．name]．value[2]＝obj[mapData[i]．name．value[2]＋‘,’＋

mapData[i]．value[2];

妖 妖 跟图 3 同一抓包文件的地理可视化结果呈现， 当鼠标悬浮 在红色点上时会把该 IP 地址显示出来， 图中定位出了三个城 市，分别是上海、杭州、福州，因为有两组 IP 地址对应杭州和福 州这两个城市，所以图上打了三个点。 这可以用来研究视频服务

器 CDN 部署情况，为优化客户体验提供方案。 3 结束语

基于 Vue．js 的移动应用可视化平台可以处理热门移动应 用， 将单次业务的流量访问情况和服务器的位置进行直观的展 示，方便了我们分析热门移动应用业务，可以掌握第一手资源。 后续可以考虑扩展该平台的功能， 比如增加业务所用传输协议

的分析等。

参考文献

［1］中国互联网络信息中心．中国互联网发展统计报告（2018 年）［R］．北 京，2018

［2］朱二华．基于 Vue．js 的 Web 前端应用研究［J］．科技与创新，2017

（20）：119－121

［3］程桂花，沈炜，何松林，等．Node．js 中 Express 框架路由机制的研究

［J］．工业控制计算机，2016，29（8）：101－102

［4］李青．基于 NoSQL 的大数据处理的研究［D］．西安：西安电子科技大 学，2014

［5］张旭．基于 Mongo DB 的气象数据三维可视化系统的研究与设计［D］． 上海：同济大学，2013

［收稿日期：2019．1．23］