| 失效链接处理 |
|
ZVue.js的移动应用可视化q_的研I?PDF 下蝲
本站整理下蝲Q?/strong>
链接Q?a target="_blank">https://pan.baidu.com/s/1ncrmpJ_9Y-r9hyWcsH10RA
提取码：(x)tlq9
相关截图Q?/strong>
主要内容Q?/strong>
《中国互联网l发展状늻计报告》显C，截至 2018 q?6 ?/div>
30 日，我国手机|民规模?7Q?8 亿，|民中用手Z|h的 占比辑ֈ 98Q?QE1Q。在|民数量不断增加的同Ӟ各种新的Ud?用层ZIPZ快速了解移动应用的业务量特征和交互过E?/div>
{关键信息，设计了该Z Vue 框架的移动应用可视化q_?1 开发框架与数据?该^台选择的是前后端分ȝ开发模式， 前端负责界面?开发，后端负责数据的处理?q种前后端分ȝ开发模式主要有 三个优点Q一是前?JS 可以做很大部分的数据处理工作Q减?了服务器的压力；二是后台出现的错误不?x)反映到前台Q不?x)?前端的开发生干扎ͼ是一U较为友好的处理方式Q三是后台很 隑֎探知前端面的分布情况，而这又是 JS 的强，?JS ?法独立和服务器进行通讯的?所以单单用后台L制整体页面， 又或者只?JS 完成效果Q都?x)难度加大，前后台各其职可?/div>
最大程度地减少开发难度?/div>
1Q? 前端框架
VueQjs 是一个轻量的框Ӟh性能高、灵zL强的特点E2Q?数据的绑定在前端领域是个大问题?现在我们更专注于数据Q?不是像?jQuery 一样对 DOM q行微观的管理?Vue 通过?向响应数据绑定系ly妙地处理了这个问题?为实现这U响?/div>
性，Vue 为状态中的每个变量添加了许多 getter ?setterQ以?它可以跟t更改ƈ自动更新 DOM?Vue 提供?Vue Router ?/div>
VuexQ这是ؓ(f) Vue 量n定制的很好的库?Vue 允许一个网?分割成可复用的组Ӟ 每个 l??????????HTML?/div>
CSS、JavaScript 以用来渲染到|页中相应的地方Q从而提高了?码的复用性，有利于进行后l界面的扩展?此外QVue 的文也?Ҏ(gu)阅读Q学?fn)成本较低，所以选择了这ƾ比较流行的前端框架?/div>
1Q? 后端框架
Express 是一个简z灵zȝZ NodeQjs ?Web 应用?轻量U的框架Q该框架提供了强大的Ҏ(gu)供我们创徏各种 Web
应用比如Q模板解析、静态文件服务、中间g、\由控制等{E3Q?q可以用插件或整合其他模块来帮助我们创建各U?Web ?Ud讑֤应用Qƈ且支?Ejs、jade {多U模板，可以快速地?Z个具有完整功能的|站?在快速发展的互联|时代，个性化
服务成ؓ(f)一U趋势，NodeQjs 高ƈ发的优势比较明显Q个性化服务
使得内容数据不能在前端服务器做缓存，因ؓ(f)每个人看到的都不
一栗?q时候前端服务器必d理每一个请求，但后端数据计 则可以q行地做Q让用户感觉不到明显延时?该框架主要有?个核心特性：(x)①可以通过讄中间件来响应 HTTP hQ②可以
通过讄不同的\由来执行 HTTP 的请求动作； ③向模板传?/div>
参数可以实现对 HTML 面的渲染?/div>
1Q? 数据?此项目的数据库选用的是非关pd数据?Mongo DB??q简单数据模型?元数据和应用数据分离?׃致性等技术，
NoSQL 能够非常好地应对大数据的挑战Q?Q。Mongo DB 是一?/div>
Z分布式文件存储的数据库，支持松散的数据结构，可以存储
比较复杂的数据类型?Mongo 的最大特Ҏ(gu)支持非常强大的查 询语aQ还能够Ҏ(gu)据徏立烦引E5Q?2 研究内容与方?/div>
2Q? 研究内容
该解析^台分Z层：(x)W一层是信息的提取，抓包工兯 取的 Pcap 包以 flow 为单位，提取出用于分析的信息Q主要包?/div>
①basic informationQ是 flow 的基本信息，包含协议信息、流?/div>
特征、时间信息等Q②Protocol informationQ是?flow 的协议信 息。例如对?DNS 来说Q包含了 DNS h的域名、返回结果、响 应时间等Q③Application informationQ是?flow 的应用层信息?例如h的是视频文gQ?那么需要解析视频文件的分L率、码 率、率等信息Q第二层是特征抽象，Ҏ(gu) flow information 提取
Z VueQjs 的移动应用可视化q_的研I?
Research on Mobile Application Visualization Platform Based on VueQjs
冯传?彭章?张钟?Q上大学通信与信息工E学院，上v 200444Q?/div>
摘要Q移动应用是互联|业的重要l成之一Q随着l端和移动互联网的普?qing)，我国的h口红利ؓ(f)Ud应用创造了
良好的发展环境，Ud应用产业也随之呈现爆发式增长。成千上万的Ud应用E序涌现q深入到C会(x)生活的各个领域，改善
了我们的生活?Ud应用h业务变化快、业务本地化、业务流加密、无法分析业务交互流E等特征?为此设计了一个基?/div>
Vue 框架的移动应用分析^収ͼ利用该^台可以实现快速分析未知业务、热门应用等Q掌握第一手资源?/div>
关键词：(x)VueQ移动应用，量特征Q可视化q_
Abstract:Mobile applications have the characteristics of fast business change,business localization,business flow encrypKtion,and inability to analyze business interaction processes in this paperQTo this end,a Vue frameworkQbased mobile applicaKtion analysis platform is designed,which can be used to quickly analyze unknown services,popular applications,etcQ?and masKter firstQhand resourcesQ?/div>
Keywords:Vue,mobile application,traffic characteristics,visualization platform
*国家自然U学基金青年U学基金目Q?170129Q??1 解析q_pȝ框架?/div>
102 Z VueQjs 的移动应用可视化q_的研I?/div>
《工业控制计机?019 q第 32 L(fng) 5 ?出描q该业务的特征， 如业务是否加密?业务采用的流媒体?议、视频文件封装格式和~码方式、主?DNS、主Z息等Q第 三层是呈玎ͼ ?flow information ?feature 以可视化Ҏ(gu)在网
站上q行昄?该^台的可视化系l框架如?1?首先是数据的采集Q选取的是 AppTracerQ这是一ƾ运行在
安卓客户端的抓包工具Q相对于其他抓包工具Q?AppTracer
用户不需?root 手机可以直接用?该工具以本地代理的方
式截获客L(fng)与服务器之间?IP 数据报文Q可以在Ud端直?解析 IP 数据包， 默认情况下会(x)引入其他应用后台产生的杂包， ?x)媄响对某个Ud应用的分析?也可以通过qo(h)器选择指定?用，监听指定Ud应用的流量?接下来是数据的存储， 可以监听生的 Pcap 文g上传 至阿里云、亚马逊云、局域网?用户也可以用自己的阿里云账号?亚马逊云账号q行 Pcap 文g理Q我们可以通过?AppTracer ?Setting 模块的参数进行配|来实现?现在我们讄的是
上传臌q服务器?最后是Ҏ(gu)集的数据q行处理Q对 Pcap
文本q行解析Q提取出关键信息Q进行统计分析，以便用来q行
数据的可视化展示?/div>
2Q? 数据的可视化 首先我们需要安?nodeQnpm
包管理器是集成在 node 中）Q?然后
安装淘宝镜像的相关依赖?接下?安装 vueQcli 脚手架构建工P输入
命o(h) npm install Qg vueQcliQ安?完成卛_?最后选定目的存放\ 径， 通过指o(h) vue init webpack Q?/div>
目名称Q开始新建项目，q|好
相对应的参数??2 是本文徏立的 目的前端目录结构?/div>
build ??????????QwebpackQ的 ????Q项 ?最 ?/div>
发布的时候也是发布在q里?config
文g夹主要是配置目的目录，?括端口号{?nodeQmodules 文g?里面主要是 npm 加蝲的项目依赖模块?src 是我们的开发目 录，主要包括 assets、components、views、AppQvue、和 mainQjs?其中 assets 主要攄一些图标，components 是项目的lg?Ӟ用到比较多的部分抽取出来设|ؓ(f)lgQ方便在其他界面 中调用?views 是最l要呈现的界面?static 主要是静态资源目 录，如图片、字体等?indexQhtml 是项目首入口文ӞpackgeQ?/div>
json 主要是项目的配置文g?面部分分成了三部分Q最上面是该q_?logoQ左Ҏ(gu)?航栏Q右Ҏ(gu)内容展示区?内容展示区又分ؓ(f)搜烦dcd区、面 包屑D区和囑Ş展示区?界面部分是通过cd选择具体的应?/div>
名称Q然后根据选中的应用名U选择一个抓包名Q最后通过查询 按钮q行可视化显C?通过 vue 框架中的 vQfor 指o(h)循环遍历?l，类别、应用名、抓包名q行昄?我们在该目中主要分?了比较常用的Ud端应用，主要包括视频、游戏、社交、浏览器、手 机助手、购物等?具体的每一cd包括几个不同的应用名Uͼ比如 视频cM要分析了腾讯视频、爱奇艺、优酗搜狐视频、youtube?Z直观展示单次业务的流量和服务器的地理化分布，?/div>
用了 ECharts 插gQ?它是一个?JavaScript 实现的开源可?化库Q能够流畅的q行?PC 和移动设备上Q可以ؓ(f)我们提供?观、交互丰富、可以高度定制化的数据可视化图表?本文使用?/div>
折线图来展示单次业务的流量情况，横坐标ؓ(f)旉Q单位是U?U坐标通过q行换算折算为数字信L(fng)传输速率Q?也就是每U?传输多少个千位的信息?图例讄为我们从后台获取的一l?IP
地址Q设|一ơ传递五个）Qƈ用不用颜色的图例图标来进行区 分??3 是选取的优酯频的一个抓包文件处理的l果??3 IO Graph of Servers
从图 3 我们可以直观地看出在该段旉内， 本次业务的流 量访问情况，大致每隔 20s 辑ֈ一个峰|q是把这五个不同?/div>
IP 地址叠加之后的结果，也可以点d例，选择其中一个或者几
?IP 地址来单独进行分析?该图的纵坐标高度是自适应的，?便我们查看流量的讉K情况?Z直观昄业务讉K服务器的地理化分布， 采取了在?图上打点的方式，Ҏ(gu)不同的经U度来定位服务器所在的城市?q里一ơ传q来五个 IP 地址Q?如果两个 IP 地址所在的城市?同，将 IP 地址q行叠加Q具体实现方法如下：(x)
var objQ邀?
forQvar iQ?;iQmapData[i]Qlength;iQ＋Q邀
ifQ选obj[mapData[i]Qname]Q邀
obj[mapData[i]QnameQmapData[i];
妖else邀
obj[mapData[i]Qname]Qvalue[2]Qobj[mapData[i]QnameQvalue[2]Q?lsquo;,’Q?/div>
mapData[i]Qvalue[2];
??跟图 3 同一抓包文g的地理可视化l果呈现Q?当鼠标?zhn)?在红色点上时?x)把?IP 地址昄出来Q?图中定位Z三个?市，分别是上杭州、福州，因ؓ(f)有两l?IP 地址对应杭州和福 州这两个城市Q所以图上打了三个点?q可以用来研I视频服?/div>
?CDN 部v情况Qؓ(f)优化客户体验提供Ҏ(gu)?3 l束?/div>
Z VueQjs 的移动应用可视化q_可以处理热门Ud?用， 单ơ业务的量讉K情况和服务器的位|进行直观的?C，方便了我们分析热门移动应用业务，可以掌握W一手资源?后箋可以考虑扩展该^台的功能Q?比如增加业务所用传输协?/div>
的分析等?/div>
参考文?/div>
Q?Q中国互联网l信息中心．中国互联|发展统计报告（2018 q_(d)QRQ．?京，2018
Q?Q朱二华Q基?VueQjs ?Web 前端应用研究QJQ．U技与创斎ͼ2017
Q?0Q：(x)119Q?21
Q?Q程桂花Q沈炜，何松林，{．NodeQjs ?Express 框架路由机制的研I?/div>
QJQ．工业控制计算机，2016Q?9Q?Q：(x)101Q?02
Q?Q李青．Z NoSQL 的大数据处理的研IӞEDQ．西安Q西安电(sh)子科技?学，2014
Q?Q张旭．Z Mongo DB 的气象数据三l可视化pȝ的研I与设计QDQ． 上vQ同大学，2013
QLE日期：(x)2019Q?Q?3Q?br />
|
| Java1234官方?5Q?/td> | 
|
| Java1234官方?5Q?/td> | 838462530 |
苏公|安?32061202001004?/p>
