基于vue联通积分商城数据可视化APP设计与实现
来源：导游资格 发布时间：2021-01-05 点击：
目
录
摘
要 ....................................................................................................... I Abstract ...................................................................................................... II 引
言 ....................................................................................................... 1 1 前端技术介绍 ........................................................................................ 3 1.1 前端开发语言 ............................................................................... 3 1.1.1 HTML5 ................................................................................. 3 1.1.2 CSS3 ..................................................................................... 3 1.1.3 JavaScript .............................................................................. 3 1.2 MVVM 开发模式.......................................................................... 4 1.3 Vue 框架 ........................................................................................ 4 1.4 Axios 技术 ..................................................................................... 5 1.5 ECharts ........................................................................................... 5 1.6 数据库技术 ................................................................................... 5 1.7 本章小结 ....................................................................................... 6 2 前端开发的分析 .................................................................................... 7 2.1 功能性需求分析 ........................................................................... 7 2.2 非功能性需求分析 ....................................................................... 8 2.2.1 兼容性需求 .......................................................................... 8 2.2.2 性能需求 .............................................................................. 8 2.3 本章小结 ....................................................................................... 8 3 前端开发的设计 .................................................................................... 9 3.1 前端架构设计 ............................................................................... 9 3.2 系统功能设计 ............................................................................... 9 3.2.1 登录页面设计 ...................................................................... 9 3.2.2 首页页面设计 ...................................................................... 9 3.2.3 流量分析页面设计 ............................................................ 10 3.2.4 转化分析页面设计 ............................................................ 11 3.2.5 用户分析页面设计 ............................................................ 11 3.2.6 商品分析页面设计 ............................................................ 12
3.2.7 底部导航栏设计 ................................................................ 13 3.3 数据库设计 ................................................................................. 14 3.4 本章小结 ..................................................................................... 16 4 前端开发的具体实现 .......................................................................... 17 4.1 系统开发环境 ............................................................................. 17 4.1.1 开发环境 ............................................................................ 17 4.1.2 项目框架搭建 .................................................................... 17 4.1.3 开发系统前端项目结构 .................................................... 17 4.2 通用组件的开发 ......................................................................... 18 4.3 开发系统页面功能实现 ............................................................. 19 4.3.1 登录页 ................................................................................ 19 4.3.2 首页 .................................................................................... 20 4.3.3 流量分析页 ........................................................................ 22 4.3.4 转化分析页 ........................................................................ 23 4.3.5 用户分析页 ........................................................................ 24 4.3.6 商品分析页 ........................................................................ 25 4.4 开发系统的创新点 ..................................................................... 26 4.5 本章小结 ..................................................................................... 26 5 前端开发的系统测试 .......................................................................... 27 5.1 功能性测试 ................................................................................. 27 5.2 兼容性测试 ................................................................................. 27 5.3 本章小结 ..................................................................................... 28 总
结 ................................................................................................... 29 致
谢 ................................................................................................... 30 参考文献 ................................................................................................... 32
沈阳城市学院毕业设计（论文）
I
摘
要
当今互联网技术突飞猛进，全球经济模式也随之变化，由传统的一手交钱，一手交货，变成现在的线上交易，加大了各种商品的成交率。而企业想要得到长久稳定的发展，则必须要对交易中产生的商业数据进行分析处理，充分利用分析结果，实现企业进一步壮大，由此可见，对企业来说企业信息化显得极为重要。在以节省成本的制约下，对企业来说，信息化的实现就显得尤为重要，而且将会是一项繁杂的工作。因此，开发一款具有数据分析能力的系统，将有效的推进企业信息化，这也将成为本课题研究的主要内容。
本课题意在研究并开发一款数据信息可视化的移动端软件，主要研究项目实现的前端框架技术。在开发项目的过程中，使用到了MVVM 开发模式实现前后端分离开发，并且在 Vue 框架、Axios 技术、ECharts 组件等工具的支持下，完成该项目前端开发。实现一款多种形式的数据展示页面，来对联通积分消费用户的地理位置及消费方向进行分析。
关键词：Vue 框架；数据可视化；Web 前端；ECharts
沈阳城市学院毕业设计（论文）
II
Abstract
With the development of Internet currently, global economy form has changed from traditional payment to modern online transition,which deepen the turnover ratio of all kinds of goods. And enterprises want to get long-term achievement, they must analyze the business information during the transition. Hence, it’s necessary to make full use of enterprise information for them. Constraints to saving cost, the popularity of information makes enormous difference for enterprises. Hence, the development of a data analysis system will effectively promote enterprise information, which will also become the main content of this study. The project aims to study and develop a mobile terminal software for data information visualization, and primarily research the front-end framework technology that the project wants to achieve. In the process of developing the project, the mode, MVVM development, was used to achieve the before and after the end of separating development, and
with the support of VUE framework, AXIOS technology, ECHARTS components and other tools to complete the current end development. Realize a variety of forms of data display page to analyze the geographical location and consumption direction of UNICOM points consumers. Keywords: Vue framework; Data visualization; Web front end; ECharts
沈阳城市学院毕业设计（论文）
1
引
言
现今，科技发展势头迅猛，信息技术也随之得到了进一步发展，所以数据可视化已成为当今社会极其重要的领域之一。在这个大数据时代，需要解决的关键性问题，就是如何在错综庞杂的数据中，高速处理、分析数据内部的信息规律。数据可视化经过几代人共同的发展，由最初的计算机图形学，发展到如今的多种表现形式，例如实时动态变化、用户交互使用等，对人们而言提供了多样选择，而且更有助于人们认识和理解数据。
现在处于大数据时代，数据可视化也并不是一个新的技术，因为人们对数据分析的需求越来越强烈，所以数据可视化越发的让人灼以重视。对于开发者来说，数据分析是一个比较困难的问题，数据可视化相对是较为容易的，但是对当今社会而言，数据可视化却是一个重要的技术。
目前来看，国内外发展是有一定差距的。在国外，数据可视化的发展历程已经相当之久，其应用范围和影响也随之逐渐扩大。早期，在数据可视化这个新兴领域，国外对其重视的程度远超国内，他们不仅在这方面投入大量财力、物力，而且还有政府、高校为此专门成立各种研究机构，用来探索数据奥妙。相对于国外，国内数据可视化发展几乎晚了近十年之久，但也取得了一定的成果。由于近几年国内互联网技术的高速发展，也带动了高校、研究院、互联网公司等研究机构对数据可视化方面的研究，在数据可视化学术和应用方面取得了很大的进步。阿里巴巴旗下 DataV 数据可视化，已经颇有追赶世界一流技术的趋势，而且学习开发愈发简单易懂，场景模板愈加完善，数据接入方式愈加强大，例如天猫双十一狂欢购物节，阿里巴巴总部大屏展示的各类产品交易额数据，实现对大量数据进行稳定的实时更新，为数据可视化研究树立了一个新的里程碑；相对于阿里巴巴这个新起之秀，我们更为熟知的百度 ECharts 数据可视化图表开发，同样是国内数据可视化顶尖的存在，它以更强的兼容性深得数据可视化开发者的喜爱。
本系统主要针对联通公司积分商城 APP 应用的数据可视化的设
沈阳城市学院毕业设计（论文）
2
计与实现。数据分析交互显示是系统的核心，其次能够高速处理、分析大量数据，并通过前后端数据交互展示，实现数据实时更新监控，并且创建有吸引力的数据图表，通过大数据获取意见，为用户提供具有决策性地数据依据，创造商业价值。本文通过对数据可视化技术的研究，采用 Web 前端技术以及可视化框架实现了数据可视化系统，实现了数据特征以及规律易发现的效果 [1] 。
本文第 1 章主要是对开发系统前端技术介绍。本章通过对前端页面开发语言、MVVM 开发模式、Vue 框架、Axios 技术、ECharts 插件以及数据库 MySQL 技术等介绍，简单说明这些技术框架的主要功能和优缺点。第 2 章则是对系统前端开发的具体分析，本章中简要的介绍了对前端开发的功能与非功能性需求分析，通过前端模块分析图，说明了该系统都具备哪些功能模块，以及提前了解好系统性能等方面对所产生的影响。第 3 章为前端的设计工作，主要介绍了开发架构设计、开发系统各个页面模块功能设计以及数据库中部分数据表设计，为接下来具体实现做好基础说明。第 4 章介绍了开发系统的具体实现过程，主要对开发环境的部署和项目的创建进行了简单的介绍，由此来实现了各页面在实际应用中的具体功能，在各个页面实现过程中列举了该页面主要的一些数据接口，并在章节最后简要的说明了该开发系统的创新点。第 5 章对开发系统的测试，本章节按照该开发系统各个页面中不同的功能点进行检查测试，在兼容性方面，主要用到Chrome 浏览器，来完成了该项目前端性能测试。
沈阳城市学院毕业设计（论文）
3
1 前端技术介绍
1.1 前端开发语言 随着软件开发技术的发展，Web 前端开发不可避开的技术就是HTML5、CSS3、 JavaScript 这三个核心技术，都是基于此开发的各种技术框架和解决方案 [2] 。
1.1.1 HTML5 HTML5 是超文本标记语言 HTML 的第 5 代版本 [3] 。通过一代一代的版本变更，HTML5 增加了很多非常实用的新特性和功能 [4] ，值得一提的是 HTML5 通过 Canvas 实现了动画操作。在 2010 年，苹果宣布其移动设备不支持 Flash 插件后，HTML5 标准更是迅速成为移动网站打造丰富的网页应用的首选 [5] [5]。其由众多的新特性组成，其功能也是呈现多样化，因此，将其用于移动互联网开发中的页面设计，更易满足开发人员、用户在页面整体视觉效果方面的需求 [6] 。
1.1.2 CSS3 CSS3 作为一种对网页内容的修饰技术，以便捷式的操作，得到了众多前端开发者的追捧。不仅可以对网页布局进行科学合理的控制，提高代码重用率和网页传输速率，而且还能简化 HTML 中的繁琐标记，避免重复劳动的现象发生 [7] 。其继承了 CSS 的功能特性，而且新增了很多属于自己的特性，其中主要新增特性有边框圆角设置、多层背景图片设置、多方向颜色渐变、动画设置以及多种艺术字体设置等等。所以有效地运用 CSS3 技术可令网页的布局更加灵活，页面效果更新颖美观 [8] 。
1.1.3 JavaScript JavaScript 作为一种轻量级的编程语言，是完全可以被嵌入到HTML 页面代码中，并且几乎可以支持所有浏览器来代为执行。JavaScript 虽然被嵌入到了 HTML 文档中，但其程序的语法规则还是与 java 非常接近的 [9] 。随着科技的发展变化，JavaScript 技术在前端编程中的地位越发的重要。其能够成为 Web 当中最流行的脚本编写语言，与其自身所具备的特点是分不开的，相比于其他语言都是先进性编译后再进行执行操作，JavaScript 则是在浏览器中直接进行执行操作，同时不仅可以创建新的对象，还可以对已经存在的对象进行引
沈阳城市学院毕业设计（论文）
4
用操作，完全符合封装、继承、多态等面向对象编程特征。
1.2
MVVM 开发模式 MVVM 模式最早由 JohnGossman 在 2005 年正式提出 [10] ，其将数据层，业务逻辑层以及表现层区分开来，以最大程度的使得业务逻辑与界面分离开 [11] 。如同其他语言的更新过程一样，MVVM 开发模式也是由 MVC 模式逐渐衍生而来，不仅继承了 MVC 的特性，还由此更新了属于自己的独特特性。基于 MVVM 开发模式的软件架构可以分离成为 View、Model 和 ViewModel 三层，如图 1.1 所示，使数据和界面得到很好的分离，达到软件设计中的“高内聚，低耦合”的目标 [12] 。
图 1.1 MVVM 模型 在 MVVM 开发模式中，三个模块各司其职，但是互相联系密切，其中占主导地位的是 ViewModel 层，作为 View 层和 Model 层之间的沟通介质，其作用不言而喻，扮演着数据的传递者，实现对数据的同步整理。以 MVVM 框架为开发基础，在前端开发中，数据变化的监听主要通过对象的访问器属性来实现 [13] 。鉴于 MVVM 开发模式，使人们可以做到对 Web 的简化开发，大大的减少了开发者对其的开发成本。
1.3
Vue 框架 Vue 作为目前三大主流的前端框架之一，它是一个非常灵活开放
沈阳城市学院毕业设计（论文）
5
的解决方案。它允许你以任何的方式来组织应用程序，着重关注MVVM 开发模式下，前端的 View 和 Model 模块。作为轻量级的前端开发框架，与另外两个主流重量级框架（React [14] 和 Angular [15] ）相比，Vue 的显得更为专注于某一阶段或某一方面。所以 Vue 框架更适合于前端开发的初学者，易于上手实践操作。
Vue 通过双向响应数据绑定系统巧妙地处理了前端关于数据绑定的最大问题。Vue 除了解决在对数据绑定上的问题，还有诸多可圈可点的主要功能，其中组件化是 Vue 的核心技术所在，比如在一个页面中，我们可以分为若干个小模块，并把它们作为各个通用组件，只需要在使用时将其引入即可，这样的组件化操作，不仅利于后期维护，还可以在相同的功能模块中进行重复利用。Vue 中不仅在使用中功能强大，而且在学习过程中，也同样的通俗易懂，其包含了大部分的HTML 的语法，能够被大部分浏览器解析。
1.4
Axios 技术 在 Vue1.0 版本时,开发者常使用的是官方推荐的 ajax 库vue-resource。当 Vue2.0 发布之后，官方推荐开发者使用 Axios，并且不再对 vue-resource 进行更新维护 [16] ，在这之后 Axios 被越来越多的开发者所了解。而Axios在大部分项目中都会使用到其http请求功能，Axios 在使用中通常会以两个参数字段存在（data 和 params），其中主要请求方式为两种 GET 方法请求和 POST 方法请求，由此方法请求调用相对应的接口，来实现前后端的交互操作。
1.5
ECharts ECharts（Enterprise Charts），是国内的一款非常优秀的的可视化图表控件 [17] ，其中它不仅支持的图标种类众多，而且支持的绘制图案也是种类繁多。比如 ECharts 官网所介绍的不同样式的折线图、颜色渐变的柱状图、多样化的饼状图等基本图形，还有比较高级的 3D 曲面图、3D 路径图、GL 矢量场图等复杂图形，为开发者在实际应用中提供更多的选择空间。
1.6
数据库技术 MySQL 是一种关系型数据库管理系统，关系数据库将数据保存
沈阳城市学院毕业设计（论文）
6
在不同的表中，而不是将所有数据放在一个大仓库内 [18] ，在使用MySQL 数据库时，通过分布式对数据进行储存，可以实现安全快速的执行存储操作，并且可以通过简单地编程，实现复杂的判断运算。另外，由于 MySQL 具备开源、简单易用等特点，所以其使用成本较低，更促进了其应用推广 [19] 。
1.7
本章小结 本章节介绍了该项目前端开发过程中所需的基本技术，包括了HTML5、JavaScript、CSS3、MVVM 开发模式、Vue 框架、Axios 技术、ECharts 以及数据库 MySQL 技术等，在项目开发中都有所涉及，也是设计与实现本系统的重要前提。
沈阳城市学院毕业设计（论文）
7
2 前端开发的分析 2.1 功能性需求分析
图 2.1 前端模块分析图 如图 2.1 所示，登录页面，包含登录前的个人信息验证；首页，主要用于统计显示用户访问量情况，其中包括应用积分及兑换率、应用用户及活跃率、收入及利润、商品浏览量及订单量等数据信息显示功能；流量分析页面，其中主要展示的内容有对用户访问次数(VV)、独立访客(UV)、浏览次数(PV)等渠道来源分布趋势的数据显示功能；转化分析页面，其中主要展示的内容有由访客向消费客户的转化环节分布趋势的数据显示工能；用户分析页面，其中主要展示内容有用户应用积分及兑换率、应用用户及活跃率、新老用户页面及客户归属页面入口等功能，新老客户页面，主要展示内容为新老用户分布趋势，用户归属页面，主要展示内容为用户归属地数据及用户归属地用户多少排名；商品分析页面，其中主要展示内容有商品浏览量及订单量、收入及利润、选品推荐页面及商品渠道页面入口等功能，选品推荐页面，主要展示内容为商品品类分布趋势，商品渠道页面，主要展示内容为商品销售渠道分布趋势。
沈阳城市学院毕业设计（论文）
8
2.2 非功能性需求分析 开发者在进行系统功能性需求分析时，将不直接关系到为用户提供服务的功能称之为非功能性需求。非功能性需求一般与系统的总体特性相关，可以看作是对系统质量的要求 [20] 。
2.2.1 兼容性需求 在我们进行项目开发工作时，会碰到各种兼容问题，而各种浏览器的兼容性问题，则是前端开发者在开发时势必会遇到麻烦。随着科技化不断进步，市场上的浏览器也呈百花争鸣般出现，由于不同的浏览器以及不同版本的内核都不一样，在兼容性上可能会导致一些效果产生偏差或者无法实现 [21] 。因此，如何解决高版本和不同浏览器之间的兼容性将是前端开发者重点解决的问题。
2.2.2 性能需求 软件性能被广泛应用与改进软件质量、提高软件可靠性方面 [22] 。在开发时，让系统达到一个稳定的性能，给用户一个完美的体验，是开发工程师的最终目标。综上所述，我们要格外的重视对开发代码的优化处理过程。其中，主要优化的方面有适当的减少 HTTP 请求操作、减少 DOM 操作、数据的交换使用、合理使用 CSS 样式和 HTML 标签、优化图片等。
2.3 本章小结 本章中简要的介绍了对前端开发的功能与非功能性需求分析，通过前端模块分析图，说明了该系统都具备哪些功能模块，以及提前了解好系统性能等方面对所产生的影响。
沈阳城市学院毕业设计（论文）
9
3 前端开发的设计 3.1 前端架构设计 根据该项目开发情况，本系统使用了 MVVM 开发模式，进行了前后端分离开发，其中前端开发中对 CSS、HTML、JavaScript、HTTP等都有涉及。
如图 3.1 所示，为我们展示了本开发项目的一个整体的架构，其中本文主要研究的是架构中的前端工程，其余部分分别由后端开发人员和数据库开发人员完成。
图 3.1 整体架构图 3.2 系统功能设计 3.2.1 登录页面设计 登录页面设计，由用户名、用户密码、验证码、忘记密码和登录按钮等构成的一个表单。当用信户息填写正确时，点击登录按钮，跳转首页，实现登录成功。交互设计如图 3.2 所示。
图 3.2 登录页设计
3.2.2 首页页面设计
沈阳城市学院毕业设计（论文）
10
首页页面为系统登录成功所跳转的主页。主页面包括首页显示部分和弹框隐藏页面部分。
首页显示主要由隐藏弹框按钮、访问量情况（PV、VV、UV）、轮播图展示、公告条、应用积分模块（应用积分：当日、累计、环比；兑换率：当日、累计、环比）、应用用户模块（应用用户：当日、累计、环比；活跃率：当日、累计、环比、进度）、收入模块（收入：当日、累计、环比；利润：当日、累计、环比）、商品浏览量模块（商品浏览量：当日、累计、环比；订单量：当日、累计、环比、进度）等部分组成，实现系统数据情况的大概展示。
隐藏弹框页面，当点击隐藏弹框按钮，隐藏页面弹出并覆盖首页。主要由姓名显示、职位显示、上次登录时间显示、修改密码按钮、退出登录按钮等部分组成。交互设计如图 3.3 所示。
图 3.3 首页设计
3.2.3 流量分析页面设计 流量分析页面由三个模块组成，主要通过 ECharts 图表来展示数据走向趋势，分别为渠道来源分布（PV、VV、UV）饼状图、渠道来源趋势（PV、VV、UV）日期折线图、渠道来源趋势（PV、VV、UV）小时折线图等实现当月某日某时用户流量来源渠道分布趋势对比。交互设计如图 3.4 所示。
沈阳城市学院毕业设计（论文）
11
图 3.4 流量分析设计
3.2.4 转化分析页面设计 转化分析页面由两个模块组成，分别为转化环节分布象形柱图、趋势来源趋势折线图。象形柱图主要展示内容是各种渠道访问用户转化为消费用户的转化率数据统计。折线图展示的为每日所转化成消费用户的趋势。交互设计如图 3.5 所示。
图 3.5 转化分析设计
3.2.5 用户分析页面设计 用户分析页面由公告条、新老用户子页面入口、用户归属子页面入口、应用积分模块、应用用户模块等部分组成，主要用于记录当日和当月累计的应用积分、兑换率、应用用户、活跃率，同时进行对比，得到环比值。
新老用户子页面由新老用户分布饼状图、新老用户趋势折线图两个模块组成。其中饼状图为对新用户和老用户的占比对比，以饼状图加以展示，使人更能显而易见的看出区别，折线图为分时间段展示新用户量和老客户量增加趋势。通过两个模块的分别展示，让人更加立
沈阳城市学院毕业设计（论文）
12
体清晰了解用户趋势。
用户归属子页面由用户归属地图和用户归属柱状图两个模块组成。其中可以通过地图中各地区颜色深浅来直观地查看某地区用户量情况，而通过用户归属柱状图能对各地区用户量进行更加直白的显示。交互设计如图 3.6 所示。
图 3.6 用户分析设计
3.2.6 商品分析页面设计 商品分析页面由公告条、选品推荐子页面入口、商品渠道子页面入口、商品浏览量模块、收入模块等部分组成，主要用于记录当日和当月累计的商品浏览量、订单量、收入、利润，同时进行对比，得到环比值。
商品推荐子页面由商品品类分布饼状图和商品品类趋势折线图两个模块组成，通过饼状图和折线图两个 ECharts 图表分析对选品推荐的商品、积分、PV、UV 等四类数据分布趋势。
商品渠道子页面由商品渠道分布饼状图和商品渠道趋势折线图两个模块组成，通过饼状图和折线图两个 ECharts 图表分析对商品渠道的订单、积分、产品、用户等四类数据分布趋势。交互设计如图
沈阳城市学院毕业设计（论文）
13
3.7 所示。
图 3.7 商品分析设计
3.2.7 底部导航栏设计 底部导航栏设计，主要为首页、流量、转化、用户、商品等五个文字加图标的标签，跳转分别对应首页页面、流量分析页面、转化分析页面、用户分析页面、商品分析页面，实现页面的交互跳转操作。通过底部标签式导航栏的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效 [23] 。交互设计如图 3.8 所示。
图 3.8 底部导航栏设计
沈阳城市学院毕业设计（论文）
14
3.3 数据库设计
图 3.9 数据库 ER 图 如图 3.9 所示，根据展示的数据库 ER 图，可以清晰地看出数据表之间的关系，通过对登录页、首页、流量分析页、转化分析页、用户分析页以及商品分析页的功能实现，共创建 21 张数据表。
如表 3.1 至表 3.7 所示的为数据库设计的部分数据表，在这些列举的数据表中，分别对其参数名、数据类型，数据说明等信息都进行了简单的介绍。
如表 3.1 所示，表中共有 2 个参数，分别为 resultcode 字符串参数和 resultcode 字符串参数，该表与修改密码功能相互依赖，当点击修改密码时，会访问到表数据。
表 3.1 修改密码数据表 参数名 类型 说明 resultcode String ”0000”成功，”9999”失败，“5555”输入参数格式错误 resultdesc String "success"成功, "error"失败，“5555”输入参数格式错误 如表 3.2 所示，表中共有 6 个参数，其中 4 个为整数型参数，2个为字符串参数，该表与流量分析饼状图相互依存，当访问流量分析
沈阳城市学院毕业设计（论文）
15
页面时，会调用该数据表。
表 3.2 流量分析饼状图数据表 参数名 类型 说明 beginDate Integer 开始时间 endDate Integer 结束时间 compareType Integer 对比周期 0-不比 1-同比 2-环比 userProvinceCode String 登陆用户省份码，0 全国，原路回传 placeId String 地区下拉列表 searchType Integer 分析范围 1-手厅 2-网厅 3-全量 如表 3.3 所示，表中共有 7 个参数，其中 5 个为整数型参数，2个为字符串参数，该表与流量分析日期折线图相互依存，而与本表拥有相同的参数的流量分析小时折线图，只是其在请求数据显示的时候，横坐标显示的是以小时为单位的折线图，当对流量分析页面进行访问时，同样会调用相应的数据表。
表 3.3 流量分析日期折线图数据表 参数名 类型 说明 beginDate Integer 开始时间 endDate Integer 结束时间 searchType Integer 分析范围 1-手厅 2-网厅 3-全量
compareType Integer 对比周期 0-不比 1-同比 2-环比 userProvinceCode String 登陆用户省份码，0 全国，原路回传 placeId String 地区下拉列表 trafficTypeId Intrger 渠道类型 Id（0-总量 1-电商 2-直接访问）
如表 3.4 所示，表中共有 7 个参数，其中 4 个为整数型参数，3个为字符串参数，该表与转化分析象形柱图相互依存，每当访问转化分析也面时，象形柱图就会调用该数据表，实现前后端的数据交互操作。
表 3.4 转化分析象形柱图数据表 参数名 类型 说明 statistics Integer
searchType Integer
rateType Integer 对比周期 1-无 2-对比周期 3-环比 beginDate String 开始时间 endDate String 结束时间 goodsAttr String 商品属性 0-全量 1-实物 2-虚拟 goodsType Integer 产品类型 0-全量 1-通信类产品 2-非通信类产品 如表 3.5 所示，表中共有 6 个参数，其中 2 个为整数型参数，4个为字符串参数，而该页面中的另一个部分柱状图所用的数据表，与该页地图数据表为同一个，只是用更加丰富的表现形式，给人以不同的体验，该表与用户归属地图和柱状图相互依存，当访问用户归属页
沈阳城市学院毕业设计（论文）
16
面时，实现数据交互。
表 3.5 用户归属地图数据表 参数名 类型 说明 beginDate String 开始时间 endDate String 结束时间 searchType Integer 分析范围 1-手厅 2-网厅 3-全量
compareType Integer 对比周期 0-不比 1-同比 2-环比 userprovinceCode String 登陆用户省份码，0 全国，原路回传 placeId String
如表 3.6 所示，表中共有 7 个参数，其中 4 个为整数型参数，3个为字符串参数，该表与选品推荐饼状图相互依赖，当访问该页面时，实现数据交互。
表 3.6 选品推荐饼状图数据表 参数名 类型 说明 beginDate String 开始时间 yyyy-MM-dd endDate String 结束时间 yyyy-MM-dd goodsAttr Integer 商品属性 0:全量；1：实物；2:虚拟 goodsType String 商品类型编号（其中 0 为根节点）
dataType Integer 0 订单量 1 积分应用量 2PV 3UV 4 转换率 compareType Integer 0 无 1 同比 2 环比 scoreInterval Integer
如表 3.7 所示，表中共有 6 个参数，其中 3 个为整数型参数，3个为字符串参数，该表与商品渠道折线图相互依赖，当访问用户归属页面时，实现数据交互。
表 3.7 商品渠道折线图数据表 参数名 类型 说明 beginDate String 开始时间 yyyy-MM-dd endDate String 结束时间 yyyy-MM-dd channelType Integer 0 全量 1 积分商城 2 电商 3 客服微厅 4 线下扫码 5 产品输出 goodsType String 0 全量 1 通信类产品 2 非通信类产品 3 活动 dataType Integer 0 订单量 1 积分应用量 2 产品兑换量 3 应用用户数 compareType Integer 0 无 1 同比 2 环比 3.4 本章小结 本章为前端的设计工作，介绍了开发架构设计、开发系统各个页面模块功能设计以及数据库中部分数据表设计，为接下来具体实现做好基础说明。
沈阳城市学院毕业设计（论文）
17
4 前端开发的具体实现 4.1 系统开发环境 4.1.1 开发环境 开发环境指的是在基本的硬件和软件的支持下 [24] ，为开发者提供的相应的应用程序开发的环境。如表 4.1 和 4.2 所示，分别为系统开发环境的硬件和软件所需的环境。
表 4.1 硬件环境
硬件环境 操作系统 Win10 处理器 Intel Core i7-4720HQ 3.60GHz 内存 8GB
表 4.2 软件环境 软件环境 开发语言 JavaScript 前端开发框架 Vue 代码编辑器 Visual Studio Code 调试工具 Google Chrome 依赖管理 Npm、Cnpm 构建打包 Webpack 脚手架 vue-cli 4.x 4.1.2 项目框架搭建 该项目的框架搭建过程是在 Windows10 系统下进行的，在项目的开始阶段，需要对 Vue 框架中进行脚手架 vue-cli 的全局安装，执行安装命令如下：
#全局安装 npm install -g vue-cli
#基于 webpack 模板创建名为 lianxi 的新项目 vue init webpack lianxi #安装依赖 npm install -g cnpm --registry=https://registry.npm.taobao.org #运行项目 npm run serve 接下来访问 http://localhost:8080 ， 然后就可以看到创建的初始化项目了。
4.1.3 开发系统前端项目结构
沈阳城市学院毕业设计（论文）
18
通过开发环境搭建，系统会自动生成一些项目文件，其中主要目录文件如表 4.3 所示。
表 4.3 目录结构 文件夹名/文件名 功能 build/build.js 生成环境构建脚本 build/webpack.base.conf.js webpack 基础配置 build/webpack.dev.conf.js webpack 开发环境配置 build/webpack.prod.conf.js webpack 生产环境配置 build/dev-server.js 运行本地开发服务器 config/index.js 主要项目配置 src/components/所有文件 前端公用组件 src/until/index,js 工具组件、方法 src/main.js 入口 js 文件 src/app.vue 根组件 src/index,js 项目配置文件 src/router/index,js 前端路由 src/page/所有文件 前端通用组件 .eslintrc 监测代码规范 package.json
构建脚本和依赖关系 index.html 首页入口文件 4.2 通用组件的开发 组件技术的应用现在已经非常广泛，组件作为软件开发复用的核心技术，是近几年来随着中间件产品的完善而飞速发展并受高度重视的一个分支 [25] 。本文将根据开发系统所需的功能进行相应的组件开发，如表 4.4 所示，该表格记录了本项目开发系统的组件简介，同时对几个复用率较高的组件进行单独介绍。
表 4.4 通用组件
组件名 组件功能 Header 开发系统头部固定栏 Footer 开发系统底部固定导航栏 Login 开发系统登录页面 Home 开发系统登录首页 FlowAnalysis 开发系统流量分析页面 TransformationAnalysis 开发系统转化分析页面 UserAnalysis 开发系统用户分析页面 NewAndOldAnalysis 用户分析子页面-新老用户页面 UserBelongs 用户分析子页面-用户归属页面 CommodityAnalysis 开发系统商品分析页面 CommodityRecommendation 商品分析子页面-选品推荐页面 CommodityChannel 商品分析子页面-商品渠道页面 （1）Header Header 是一个页面分模块组件，主要固定于系统头部，与底部导航栏实现收尾呼应的同时，双向绑定各个页面所展示的文字提示。
沈阳城市学院毕业设计（论文）
19
layerOut()和 loginOut()方法封装的是用于系统头部固定栏左边图标样式，而本系统中分为两种情况。一种是当浏览页为首页时，显示的是隐藏弹框图标，点击时跳出隐藏框。另一种是浏览页为非首页时，显示的是返回图标，点击时会返回上一级浏览页面。方法代码如下：
layerOut() {
this.$emit("layerOutFn") }, loginOut() {
this.$router.go(-1) } （2）Footer Footer 组件，和 Header 组件功能类似，在项目的每个页面中都有引用，主要用于帮助用户实现页面跳转操作，每项由图标和文字组成，当点击跳转成功后，图标和文字的颜色由黑色变为淡紫色，其中图片变色实现方法为每项绑定两张只有颜色不同的图标，再由封装方法实现两张图片互相变化。addClassName()方法则实现了图片及文字变色操作。代码方法如下：
addClassName(index) { this.tabs.forEach((element, key) => {
if (key == index) { element.cls = "is-active"; } else { element.cls = "";
} }); } 4.3 开发系统页面功能实现 4.3.1 登录页 系统登录页面如图 4.3 所示，本系统的开发源于公司需要，所以本系统只支持在公司内部人员使用，通过对公司内部员工账号授权后，输入正确用户名和密码，同时在验证码输入框输入图片显示的验证码，点击立即登录按钮，即可完成登录操作，并跳转首页页面。
沈阳城市学院毕业设计（论文）
20
通过 checkInput ()和 loginFn ()方法，来实现对登录信息格式的核对，并由 POST 请求方式调用“/jf-statistics/JsAdmin/login”接口，实现登录页的交互操作。
图 片 验 证 码 功 能 ， 则 是 由 一 个 画 布 标 签 来 承 载 ， 通 过getNewCode() 方 法 直 接 调 用 后 台 接 口“/jf-statistics/JsAdmin/kaptcha?time=”随机生成的验证码图片，在传回前端显示的一个过程。
图 4.3 登录页面 4.3.2 首页 如图 4.4 所示，首页包含访问量情况栏、轮播图、公告栏、用户
沈阳城市学院毕业设计（论文）
21
分析信息统计表、商品分析信息统计表、隐藏弹框等功能。访问量情况栏用来记录浏览积分商城的 PV、VV、UV 访问数量，轮播图用来介绍积分商城的活动展示，公告栏主要是每次系统更新改动及显示展示数据的时间点，用户分析统计表中的两个模块分别记录应用积分、兑换率、应用用户、活跃率等，商品分析信息统计表中的两个模块分别记录收入、利润、商品浏览量、订单量等，隐藏弹框则记录着用户的姓名、职位、上次登陆时间等信息，同时可在弹框实现修改密码和退出登录的操作。
图 4.4 首页页面(左)、首页弹框(右)
沈阳城市学院毕业设计（论文）
22
4.3.3 流量分析页 如图 4.5 所示，流量分析页主要为三部分，分别为渠道来源分布饼状图、趋势日期折线图、趋势小时折线图。渠道来源分布饼状图展示的是 PV、VV、UV 三类访问状况来源的分布，主要来源有短信、电商、直接访问、微信、引荐等。渠道来源趋势日期折线图展示的是在 PV、VV、UV 三类访问状况来源的分布下，当月的访客增减趋势变化。渠道来源趋势小时折线图展示的是在 PV、VV、UV 三类访问状况来源的分布下，前一天各个小时段的访客增减趋势变化。
图 4.5 流量分析页面 如表 4.5 所示，为该页面 ECharts 图各接口，所以直接以图表方式，直接列举实现数据接入方法。
沈阳城市学院毕业设计（论文）
23
表 4.5 流量分析页接口 方法 接口 实现内容 请求 drawPie() /jf-statistics/traffidSources/pieData 饼状图 post drawLine() /jf-statistics/traffidSources/lineChart 日期折线图 post drawHoursLine() /jf-statistics/traffidSources/lineHours 小时折线图 post 4.3.4 转化分析页 如图 4.6 所示，转化分析页分为两部分，分别为转化环节分布象形柱图和渠道来源趋势折线图。转化环节分布象形柱图展示的是手机访客数、详情访客数、下单量、支付量四类数据，同时得到由手机访客数逐渐转变详情访客数，成为下单客户，最后由下单客户成功支付过程中，客户各级转化情况。而渠道来源趋势折线图展示的内容则是当月每日从手机访客转化为支付成功用户量的增减趋势变化。
图 4.6 转化分析页面
沈阳城市学院毕业设计（论文）
24
如表 4.6 所示，由于本页内容组成都为 ECharts 图，分别是以drawFunnel()和 drawFunnelLine()方法直接调用相应接口，所以直接以图表方式，直接列举实现数据接入方法。
表 4.6 转化分析页接口 方法
接口
实现内容
请求 drawFunnel() jf-statistics/funnelPolt/searchData 象形柱图 fetch
drawFunnelLine() /jf-statistics/funnelPolt/lineChart 日期折线图 fetch
4.3.5 用户分析页 如图 4.7 所示，用户分析页包括公告栏、用户分析数据统计表及新老用户子页面和用户归属子页面入口。公告栏和用户分析数据统计表展示功能同首页相同。新老用户子页面中分为两部分，一部分为新老用户分布饼状图，用来记录展示用户中新老成分所占比例，另一部分为新老用户趋势日期折线图，记录了当月每天新老用户的增减趋势变化。用户归属子页面中同样分为两部分，一部分为用户归属地图，如图所见，通过各地区颜色深浅来区分，能直观地看出各地区用户的多少，深颜色地区用户基数比较大，浅颜色地区用户基数比较小，另一部分为用户归属柱状图，主要展示各省市用户多少排名情况。
图 4.7 用户分析页面(左)、新老用户子页面(中)、用户归属子页面(右) 如表 4.7 所示，在新老用户子页面中分别以 drawNewUserPie ()和drawNewUserLine ()方法来直接调用该页面中饼状图和日期折线图数据，在用户归属子页面中分别以 drawMap()和 drawBar()方法来直接
沈阳城市学院毕业设计（论文）
25
调用该页面中地图和柱状图数据，所以直接以图表方式，直接列举实现数据接入方法。
表 4.7 用户分析页接口
方法
接口
实现内容
请求 drawNewUserPie () /jf-statistics/newUser/searchData 饼状图 fetch drawNewUserLine () /jf-statistics/newUser/lineChart 日期折线图 fetch drawMap() /jf-statistics/provinceUser/searchData 地图 post drawBar() /jf-statistics/provinceUser/searchData 柱状图 post 4.3.6 商品分析页 如图 4.8 所示，商品分析页包括公告栏、商品分析数据统计表及选品推荐子页面和商品渠道子页面入口。公告栏和商品分析数据统计表展示功能同首页相同。选品推荐子页面中分为两部分，一部分为商品品类分布饼状图，用来展示在商品、积分、PV、UV 中可兑换商品种类的占比信息，另一部分为商品品类趋势折线图，用来展示在商品、积分、PV、UV 中可兑换商品种类增减趋势。商品渠道子页面，类似选品推荐页面，展示在订单、积分、产品、用户中商品占比信息及增减趋势。
图 4.8 商品分析页面(左)、选品推荐子页面(中)、商品渠道子页面(右) 如表 4.8 所示，在新老用户子页面中分别以 drawListPie ()和drawListPie ()方法来直接调用该页面中饼状图和日期折线图数据，在用户归属子页面中分别以 drawListPie()和 drawListLine()方法来直接调用该页面中饼状图和日期折线图数据，所以直接以图表方式，直接
沈阳城市学院毕业设计（论文）
26
列举实现数据接入方法。
表 4.8 商品分析页接口 方法
接口
实现内容
请求 drawListPie () /jf-statistics/goods/list 饼状图 post drawListLine () /jf-statistics/goods/list 日期折线图 post drawListPie() /jf-statistics/goodschannel/list 饼状图
post drawListLine() /jf-statistics/goodschannel/list 日期折线图
post
4.4 开发系统的创新点 （ 1）将 MVVM 框架应用于 Web 前端开发能够很好地达到交互界面的形成与扩展，并通过前后端分离，使前端和后端同时进行分层开发，大大节省了开发成本。
（2）使用框架简单易懂，只需引用即可拥有框架所有功能。高度的组件化可以使我们的工程易于维护、易于组合拓展，降低了开发难度。
4.5 本章小结 本章主要对开发环境的部署和项目的创建进行了简单的介绍，由此来实现了各页面在实际应用中的具体功能，在各个页面实现过程中列举了该页面主要的一些数据接口，并在章节最后简要的说明了该开发系统的创新点。
沈阳城市学院毕业设计（论文）
27
5 前端开发的系统测试 5.1 功能性测试
软件功能性测试就是对产品的各功能进行验证，根据功能性测试用例，逐...
推荐访问:可视化 联通 积分