基于vue的联通积分商城数据可视化APP设计与实现 计算机专业

目录TOC\o"1-3"\h\u摘要 引言现今，科技发展势头迅猛，信息技术也随之得到了进一步发展，所以数据可视化已成为当今社会极其重要的领域之一。在这个大数据时代，需要解决的关键性问题，就是如何在错综庞杂的数据中，高速处理、分析数据内部的信息规律。数据可视化经过几代人共同的发展，由最初的计算机图形学，发展到如今的多种表现形式，例如实时动态变化、用户交互使用等，对人们而言提供了多样选择，而且更有助于人们认识和理解数据。现在处于大数据时代，数据可视化也并不是一个新的技术，因为人们对数据分析的需求越来越强烈，所以数据可视化越发的让人灼以重视。对于开发者来说，数据分析是一个比较困难的问题，数据可视化相对是较为容易的，但是对当今社会而言，数据可视化却是一个重要的技术。目前来看，国内外发展是有一定差距的。在国外，数据可视化的发展历程已经相当之久，其应用范围和影响也随之逐渐扩大。早期，在数据可视化这个新兴领域，国外对其重视的程度远超国内，他们不仅在这方面投入大量财力、物力，而且还有政府、高校为此专门成立各种研究机构，用来探索数据奥妙。相对于国外，国内数据可视化发展几乎晚了近十年之久，但也取得了一定的成果。由于近几年国内互联网技术的高速发展，也带动了高校、研究院、互联网公司等研究机构对数据可视化方面的研究，在数据可视化学术和应用方面取得了很大的进步。阿里巴巴旗下DataV数据可视化，已经颇有追赶世界一流技术的趋势，而且学习开发愈发简单易懂，场景模板愈加完善，数据接入方式愈加强大，例如天猫双十一狂欢购物节，阿里巴巴总部大屏展示的各类产品交易额数据，实现对大量数据进行稳定的实时更新，为数据可视化研究树立了一个新的里程碑；相对于阿里巴巴这个新起之秀，我们更为熟知的百度ECharts数据可视化图表开发，同样是国内数据可视化顶尖的存在，它以更强的兼容性深得数据可视化开发者的喜爱。本系统主要针对联通公司积分商城APP应用的数据可视化的设计与实现。数据分析交互显示是系统的核心，其次能够高速处理、分析大量数据，并通过前后端数据交互展示，实现数据实时更新监控，并且创建有吸引力的数据图表，通过大数据获取意见，为用户提供具有决策性地数据依据，创造商业价值。本文通过对数据可视化技术的研究，采用Web前端技术以及可视化框架实现了数据可视化系统，实现了数据特征以及规律易发现的效果REF_Ref6797\r\h[1]。本文第1章主要是对开发系统前端技术介绍。本章通过对前端页面开发语言、MVVM开发模式、Vue框架、Axios技术、ECharts插件以及数据库MySQL技术等介绍，简单说明这些技术框架的主要功能和优缺点。第2章则是对系统前端开发的具体分析，本章中简要的介绍了对前端开发的功能与非功能性需求分析，通过前端模块分析图，说明了该系统都具备哪些功能模块，以及提前了解好系统性能等方面对所产生的影响。第3章为前端的设计工作，主要介绍了开发架构设计、开发系统各个页面模块功能设计以及数据库中部分数据表设计，为接下来具体实现做好基础说明。第4章介绍了开发系统的具体实现过程，主要对开发环境的部署和项目的创建进行了简单的介绍，由此来实现了各页面在实际应用中的具体功能，在各个页面实现过程中列举了该页面主要的一些数据接口，并在章节最后简要的说明了该开发系统的创新点。第5章对开发系统的测试，本章节按照该开发系统各个页面中不同的功能点进行检查测试，在兼容性方面，主要用到Chrome浏览器，来完成了该项目前端性能测试。1前端技术介绍1.1前端开发语言随着软件开发技术的发展，Web前端开发不可避开的技术就是HTML5、CSS3、JavaScript这三个核心技术，都是基于此开发的各种技术框架和解决方案REF_Ref7215\r\h[2]。1.1.1HTML5HTML5是超文本标记语言HTML的第5代版本REF_Ref30527\r\h[3]。通过一代一代的版本变更，HTML5增加了很多非常实用的新特性和功能REF_Ref30922\r\h[4]，值得一提的是HTML5通过Canvas实现了动画操作。在2010年，苹果宣布其移动设备不支持Flash插件后，HTML5标准更是迅速成为移动网站打造丰富的网页应用的首选REF_Ref7389\r\h[5]REF_Ref7389\n\h。其由众多的新特性组成，其功能也是呈现多样化，因此，将其用于移动互联网开发中的页面设计，更易满足开发人员、用户在页面整体视觉效果方面的需求REF_Ref7856\r\h[6]。1.1.2CSS3CSS3作为一种对网页内容的修饰技术，以便捷式的操作，得到了众多前端开发者的追捧。不仅可以对网页布局进行科学合理的控制，提高代码重用率和网页传输速率，而且还能简化HTML中的繁琐标记，避免重复劳动的现象发生REF_Ref8022\r\h[7]。其继承了CSS的功能特性，而且新增了很多属于自己的特性，其中主要新增特性有边框圆角设置、多层背景图片设置、多方向颜色渐变、动画设置以及多种艺术字体设置等等。所以有效地运用CSS3技术可令网页的布局更加灵活，页面效果更新颖美观REF_Ref32477\r\h[8]。1.1.3JavaScriptJavaScript作为一种轻量级的编程语言，是完全可以被嵌入到HTML页面代码中，并且几乎可以支持所有浏览器来代为执行。JavaScript虽然被嵌入到了HTML文档中，但其程序的语法规则还是与java非常接近的REF_Ref8567\r\h[9]。随着科技的发展变化，JavaScript技术在前端编程中的地位越发的重要。其能够成为Web当中最流行的脚本编写语言，与其自身所具备的特点是分不开的，相比于其他语言都是先进性编译后再进行执行操作，JavaScript则是在浏览器中直接进行执行操作，同时不仅可以创建新的对象，还可以对已经存在的对象进行引用操作，完全符合封装、继承、多态等面向对象编程特征。1.2MVVM开发模式MVVM模式最早由JohnGossman在2005年正式提出REF_Ref313\r\h[10]，其将数据层，业务逻辑层以及表现层区分开来，以最大程度的使得业务逻辑与界面分离开REF_Ref9018\r\h[11]。如同其他语言的更新过程一样，MVVM开发模式也是由MVC模式逐渐衍生而来，不仅继承了MVC的特性，还由此更新了属于自己的独特特性。基于MVVM开发模式的软件架构可以分离成为View、Model和ViewModel三层，如图1.1所示，使数据和界面得到很好的分离，达到软件设计中的“高内聚，低耦合”的目标REF_Ref9132\r\h[12]。图1.1MVVM模型在MVVM开发模式中，三个模块各司其职，但是互相联系密切，其中占主导地位的是ViewModel层，作为View层和Model层之间的沟通介质，其作用不言而喻，扮演着数据的传递者，实现对数据的同步整理。以MVVM框架为开发基础，在前端开发中，数据变化的监听主要通过对象的访问器属性来实现REF_Ref9449\r\h[13]。鉴于MVVM开发模式，使人们可以做到对Web的简化开发，大大的减少了开发者对其的开发成本。1.3Vue框架Vue作为目前三大主流的前端框架之一，它是一个非常灵活开放的解决方案。它允许你以任何的方式来组织应用程序，着重关注MVVM开发模式下，前端的View和Model模块。作为轻量级的前端开发框架，与另外两个主流重量级框架（ReactREF_Ref1221\r\h[14]和AngularREF_Ref1266\r\h[15]）相比，Vue的显得更为专注于某一阶段或某一方面。所以Vue框架更适合于前端开发的初学者，易于上手实践操作。Vue通过双向响应数据绑定系统巧妙地处理了前端关于数据绑定的最大问题。Vue除了解决在对数据绑定上的问题，还有诸多可圈可点的主要功能，其中组件化是Vue的核心技术所在，比如在一个页面中，我们可以分为若干个小模块，并把它们作为各个通用组件，只需要在使用时将其引入即可，这样的组件化操作，不仅利于后期维护，还可以在相同的功能模块中进行重复利用。Vue中不仅在使用中功能强大，而且在学习过程中，也同样的通俗易懂，其包含了大部分的HTML的语法，能够被大部分浏览器解析。1.4Axios技术在Vue1.0版本时,开发者常使用的是官方推荐的ajax库vue-resource。当Vue2.0发布之后，官方推荐开发者使用Axios，并且不再对vue-resource进行更新维护REF_Ref14939\r\h[16]，在这之后Axios被越来越多的开发者所了解。而Axios在大部分项目中都会使用到其http请求功能，Axios在使用中通常会以两个参数字段存在（data和params），其中主要请求方式为两种GET方法请求和POST方法请求，由此方法请求调用相对应的接口，来实现前后端的交互操作。1.5EChartsECharts（Enterprise

Charts），是国内的一款非常优秀的的可视化图表控件REF_Ref11395\r\h[17]，其中它不仅支持的图标种类众多，而且支持的绘制图案也是种类繁多。比如ECharts官网所介绍的不同样式的折线图、颜色渐变的柱状图、多样化的饼状图等基本图形，还有比较高级的3D曲面图、3D路径图、GL矢量场图等复杂图形，为开发者在实际应用中提供更多的选择空间。1.6数据库技术MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内REF_Ref2187\r\h[18]，在使用MySQL数据库时，通过分布式对数据进行储存，可以实现安全快速的执行存储操作，并且可以通过简单地编程，实现复杂的判断运算。另外，由于MySQL具备开源、简单易用等特点，所以其使用成本较低，更促进了其应用推广REF_Ref8912\r\h[19]。1.7本章小结本章节介绍了该项目前端开发过程中所需的基本技术，包括了HTML5、JavaScript、CSS3、MVVM开发模式、Vue框架、Axios技术、ECharts以及数据库MySQL技术等，在项目开发中都有所涉及，也是设计与实现本系统的重要前提。2前端开发的分析2.1功能性需求分析图2.1前端模块分析图如图2.1所示，登录页面，包含登录前的个人信息验证；首页，主要用于统计显示用户访问量情况，其中包括应用积分及兑换率、应用用户及活跃率、收入及利润、商品浏览量及订单量等数据信息显示功能；流量分析页面，其中主要展示的内容有对用户访问次数(VV)、独立访客(UV)、浏览次数(PV)等渠道来源分布趋势的数据显示功能；转化分析页面，其中主要展示的内容有由访客向消费客户的转化环节分布趋势的数据显示工能；用户分析页面，其中主要展示内容有用户应用积分及兑换率、应用用户及活跃率、新老用户页面及客户归属页面入口等功能，新老客户页面，主要展示内容为新老用户分布趋势，用户归属页面，主要展示内容为用户归属地数据及用户归属地用户多少排名；商品分析页面，其中主要展示内容有商品浏览量及订单量、收入及利润、选品推荐页面及商品渠道页面入口等功能，选品推荐页面，主要展示内容为商品品类分布趋势，商品渠道页面，主要展示内容为商品销售渠道分布趋势。2.2非功能性需求分析开发者在进行系统功能性需求分析时，将不直接关系到为用户提供服务的功能称之为非功能性需求。非功能性需求一般与系统的总体特性相关，可以看作是对系统质量的要求REF_Ref2400\r\h[20]。2.2.1兼容性需求在我们进行项目开发工作时，会碰到各种兼容问题，而各种浏览器的兼容性问题，则是前端开发者在开发时势必会遇到麻烦。随着科技化不断进步，市场上的浏览器也呈百花争鸣般出现，由于不同的浏览器以及不同版本的内核都不一样，在兼容性上可能会导致一些效果产生偏差或者无法实现REF_Ref2573\r\h[21]。因此，如何解决高版本和不同浏览器之间的兼容性将是前端开发者重点解决的问题。2.2.2性能需求软件性能被广泛应用与改进软件质量、提高软件可靠性方面REF_Ref2635\r\h[22]。在开发时，让系统达到一个稳定的性能，给用户一个完美的体验，是开发工程师的最终目标。综上所述，我们要格外的重视对开发代码的优化处理过程。其中，主要优化的方面有适当的减少HTTP请求操作、减少DOM操作、数据的交换使用、合理使用CSS样式和HTML标签、优化图片等。2.3本章小结本章中简要的介绍了对前端开发的功能与非功能性需求分析，通过前端模块分析图，说明了该系统都具备哪些功能模块，以及提前了解好系统性能等方面对所产生的影响。3前端开发的设计3.1前端架构设计根据该项目开发情况，本系统使用了MVVM开发模式，进行了前后端分离开发，其中前端开发中对CSS、HTML、JavaScript、HTTP等都有涉及。如图3.1所示，为我们展示了本开发项目的一个整体的架构，其中本文主要研究的是架构中的前端工程，其余部分分别由后端开发人员和数据库开发人员完成。图3.1整体架构图3.2系统功能设计3.2.1登录页面设计登录页面设计，由用户名、用户密码、验证码、忘记密码和登录按钮等构成的一个表单。当用信户息填写正确时，点击登录按钮，跳转首页，实现登录成功。交互设计如图3.2所示。图3.2登录页设计3.2.2首页页面设计首页页面为系统登录成功所跳转的主页。主页面包括首页显示部分和弹框隐藏页面部分。首页显示主要由隐藏弹框按钮、访问量情况（PV、VV、UV）、轮播图展示、公告条、应用积分模块（应用积分：当日、累计、环比；兑换率：当日、累计、环比）、应用用户模块（应用用户：当日、累计、环比；活跃率：当日、累计、环比、进度）、收入模块（收入：当日、累计、环比；利润：当日、累计、环比）、商品浏览量模块（商品浏览量：当日、累计、环比；订单量：当日、累计、环比、进度）等部分组成，实现系统数据情况的大概展示。隐藏弹框页面，当点击隐藏弹框按钮，隐藏页面弹出并覆盖首页。主要由姓名显示、职位显示、上次登录时间显示、修改密码按钮、退出登录按钮等部分组成。交互设计如图3.3所示。图3.3首页设计3.2.3流量分析页面设计流量分析页面由三个模块组成，主要通过ECharts图表来展示数据走向趋势，分别为渠道来源分布（PV、VV、UV）饼状图、渠道来源趋势（PV、VV、UV）日期折线图、渠道来源趋势（PV、VV、UV）小时折线图等实现当月某日某时用户流量来源渠道分布趋势对比。交互设计如图3.4所示。图3.4流量分析设计3.2.4转化分析页面设计转化分析页面由两个模块组成，分别为转化环节分布象形柱图、趋势来源趋势折线图。象形柱图主要展示内容是各种渠道访问用户转化为消费用户的转化率数据统计。折线图展示的为每日所转化成消费用户的趋势。交互设计如图3.5所示。图3.5转化分析设计3.2.5用户分析页面设计用户分析页面由公告条、新老用户子页面入口、用户归属子页面入口、应用积分模块、应用用户模块等部分组成，主要用于记录当日和当月累计的应用积分、兑换率、应用用户、活跃率，同时进行对比，得到环比值。新老用户子页面由新老用户分布饼状图、新老用户趋势折线图两个模块组成。其中饼状图为对新用户和老用户的占比对比，以饼状图加以展示，使人更能显而易见的看出区别，折线图为分时间段展示新用户量和老客户量增加趋势。通过两个模块的分别展示，让人更加立体清晰了解用户趋势。用户归属子页面由用户归属地图和用户归属柱状图两个模块组成。其中可以通过地图中各地区颜色深浅来直观地查看某地区用户量情况，而通过用户归属柱状图能对各地区用户量进行更加直白的显示。交互设计如图3.6所示。图3.6用户分析设计3.2.6商品分析页面设计商品分析页面由公告条、选品推荐子页面入口、商品渠道子页面入口、商品浏览量模块、收入模块等部分组成，主要用于记录当日和当月累计的商品浏览量、订单量、收入、利润，同时进行对比，得到环比值。商品推荐子页面由商品品类分布饼状图和商品品类趋势折线图两个模块组成，通过饼状图和折线图两个ECharts图表分析对选品推荐的商品、积分、PV、UV等四类数据分布趋势。商品渠道子页面由商品渠道分布饼状图和商品渠道趋势折线图两个模块组成，通过饼状图和折线图两个ECharts图表分析对商品渠道的订单、积分、产品、用户等四类数据分布趋势。交互设计如图3.7所示。图3.7商品分析设计3.2.7底部导航栏设计底部导航栏设计，主要为首页、流量、转化、用户、商品等五个文字加图标的标签，跳转分别对应首页页面、流量分析页面、转化分析页面、用户分析页面、商品分析页面，实现页面的交互跳转操作。通过底部标签式导航栏的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效REF_Ref9751\r\h[23]。交互设计如图3.8所示。图3.8底部导航栏设计3.3数据库设计图3.9数据库ER图如图3.9所示，根据展示的数据库ER图，可以清晰地看出数据表之间的关系，通过对登录页、首页、流量分析页、转化分析页、用户分析页以及商品分析页的功能实现，共创建21张数据表。如表3.1至表3.7所示的为数据库设计的部分数据表，在这些列举的数据表中，分别对其参数名、数据类型，数据说明等信息都进行了简单的介绍。如表3.1所示，表中共有2个参数，分别为resultcode字符串参数和resultcode字符串参数，该表与修改密码功能相互依赖，当点击修改密码时，会访问到表数据。表3.1修改密码数据表参数名类型说明resultcodeString”0000”成功，”9999”失败，“5555”输入参数格式错误resultdescString"success"成功,"error"失败，“5555”输入参数格式错误如表3.2所示，表中共有6个参数，其中4个为整数型参数，2个为字符串参数，该表与流量分析饼状图相互依存，当访问流量分析页面时，会调用该数据表。表3.2流量分析饼状图数据表参数名类型说明beginDateInteger开始时间endDateInteger结束时间compareTypeInteger对比周期0-不比1-同比2-环比userProvinceCodeString登陆用户省份码，0全国，原路回传placeIdString地区下拉列表searchTypeInteger分析范围1-手厅2-网厅3-全量如表3.3所示，表中共有7个参数，其中5个为整数型参数，2个为字符串参数，该表与流量分析日期折线图相互依存，而与本表拥有相同的参数的流量分析小时折线图，只是其在请求数据显示的时候，横坐标显示的是以小时为单位的折线图，当对流量分析页面进行访问时，同样会调用相应的数据表。表3.3流量分析日期折线图数据表参数名类型说明beginDateInteger开始时间endDateInteger结束时间searchTypeInteger分析范围1-手厅2-网厅3-全量compareTypeInteger对比周期0-不比1-同比2-环比userProvinceCodeString登陆用户省份码，0全国，原路回传placeIdString地区下拉列表trafficTypeIdIntrger渠道类型Id（0-总量1-电商2-直接访问）如表3.4所示，表中共有7个参数，其中4个为整数型参数，3个为字符串参数，该表与转化分析象形柱图相互依存，每当访问转化分析也面时，象形柱图就会调用该数据表，实现前后端的数据交互操作。表3.4转化分析象形柱图数据表参数名类型说明statisticsIntegersearchTypeIntegerrateTypeInteger对比周期1-无2-对比周期3-环比beginDateString开始时间endDateString结束时间goodsAttrString商品属性0-全量1-实物2-虚拟goodsTypeInteger产品类型0-全量1-通信类产品2-非通信类产品如表3.5所示，表中共有6个参数，其中2个为整数型参数，4个为字符串参数，而该页面中的另一个部分柱状图所用的数据表，与该页地图数据表为同一个，只是用更加丰富的表现形式，给人以不同的体验，该表与用户归属地图和柱状图相互依存，当访问用户归属页面时，实现数据交互。表3.5用户归属地图数据表参数名类型说明beginDateString开始时间endDateString结束时间searchTypeInteger分析范围1-手厅2-网厅3-全量compareTypeInteger对比周期0-不比1-同比2-环比userprovinceCodeString登陆用户省份码，0全国，原路回传placeIdString如表3.6所示，表中共有7个参数，其中4个为整数型参数，3个为字符串参数，该表与选品推荐饼状图相互依赖，当访问该页面时，实现数据交互。表3.6选品推荐饼状图数据表参数名类型说明beginDateString开始时间yyyy-MM-ddendDateString结束时间yyyy-MM-ddgoodsAttrInteger商品属性0:全量；1：实物；2:虚拟goodsTypeString商品类型编号（其中0为根节点）dataTypeInteger0订单量1积分应用量2PV3UV4转换率compareTypeInteger0无1同比2环比scoreIntervalInteger如表3.7所示，表中共有6个参数，其中3个为整数型参数，3个为字符串参数，该表与商品渠道折线图相互依赖，当访问用户归属页面时，实现数据交互。表3.7商品渠道折线图数据表参数名类型说明beginDateString开始时间yyyy-MM-ddendDateString结束时间yyyy-MM-ddchannelTypeInteger0全量1积分商城2电商3客服微厅4线下扫码5产品输出goodsTypeString0全量1通信类产品2非通信类产品3活动dataTypeInteger0订单量1积分应用量2产品兑换量3应用用户数compareTypeInteger0无1同比2环比3.4本章小结本章为前端的设计工作，介绍了开发架构设计、开发系统各个页面模块功能设计以及数据库中部分数据表设计，为接下来具体实现做好基础说明。4前端开发的具体实现4.1系统开发环境4.1.1开发环境开发环境指的是在基本的硬件和软件的支持下REF_Ref7554\r\h[24]，为开发者提供的相应的应用程序开发的环境。如表4.1和4.2所示，分别为系统开发环境的硬件和软件所需的环境。表4.1硬件环境硬件环境操作系统Win10处理器IntelCorei7-4720HQ3.60GHz内存8GB表4.2软件环境软件环境开发语言JavaScript前端开发框架Vue代码编辑器VisualStudioCode调试工具GoogleChrome依赖管理Npm、Cnpm构建打包Webpack脚手架vue-cli4.x4.1.2项目框架搭建该项目的框架搭建过程是在Windows10系统下进行的，在项目的开始阶段，需要对Vue框架中进行脚手架vue-cli的全局安装，执行安装命令如下：#全局安装npminstall-gvue-cli#基于webpack模板创建名为lianxi的新项目vueinitwebpacklianxi#安装依赖npminstall-gcnpm--registry=#运行项目npmrunserve接下来访问http://localhost:8080，然后就可以看到创建的初始化项目了。4.1.3开发系统前端项目结构通过开发环境搭建，系统会自动生成一些项目文件，其中主要目录文件如表4.3所示。表4.3目录结构文件夹名/文件名功能build/build.js生成环境构建脚本build/webpack.base.conf.jswebpack基础配置build/webpack.dev.conf.jswebpack开发环境配置build/d.conf.jswebpack生产环境配置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通用组件的开发组件技术的应用现在已经非常广泛，组件作为软件开发复用的核心技术，是近几年来随着中间件产品的完善而飞速发展并受高度重视的一个分支REF_Ref16082\r\h[25]。本文将根据开发系统所需的功能进行相应的组件开发，如表4.4所示，该表格记录了本项目开发系统的组件简介，同时对几个复用率较高的组件进行单独介绍。表4.4通用组件组件名组件功能Header开发系统头部固定栏Footer开发系统底部固定导航栏Login开发系统登录页面Home开发系统登录首页FlowAnalysis开发系统流量分析页面TransformationAnalysis开发系统转化分析页面UserAnalysis开发系统用户分析页面NewAndOldAnalysis用户分析子页面-新老用户页面UserBelongs用户分析子页面-用户归属页面CommodityAnalysis开发系统商品分析页面CommodityRecommendation商品分析子页面-选品推荐页面CommodityChannel商品分析子页面-商品渠道页面（1）HeaderHeader是一个页面分模块组件，主要固定于系统头部，与底部导航栏实现收尾呼应的同时，双向绑定各个页面所展示的文字提示。layerOut()和loginOut()方法封装的是用于系统头部固定栏左边图标样式，而本系统中分为两种情况。一种是当浏览页为首页时，显示的是隐藏弹框图标，点击时跳出隐藏框。另一种是浏览页为非首页时，显示的是返回图标，点击时会返回上一级浏览页面。方法代码如下：layerOut()

{

this.$emit("layerOutFn")},loginOut()

{

this.$router.go(-1)}（2）FooterFooter组件，和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所示，本系统的开发源于公司需要，所以本系统只支持在公司内部人员使用，通过对公司内部员工账号授权后，输入正确用户名和密码，同时在验证码输入框输入图片显示的验证码，点击立即登录按钮，即可完成登录操作，并跳转首页页面。通过checkInput

()和loginFn

()方法，来实现对登录信息格式的核对，并由POST请求方式调用“/jf-statistics/JsAdmin/login”接口，实现登录页的交互操作。图片验证码功能，则是由一个画布标签来承载，通过getNewCode()方法直接调用后台接口“/jf-statistics/JsAdmin/kaptcha?time=”随机生成的验证码图片，在传回前端显示的一个过程。图4.3登录页面4.3.2首页如图4.4所示，首页包含访问量情况栏、轮播图、公告栏、用户分析信息统计表、商品分析信息统计表、隐藏弹框等功能。访问量情况栏用来记录浏览积分商城的PV、VV、UV访问数量，轮播图用来介绍积分商城的活动展示，公告栏主要是每次系统更新改动及显示展示数据的时间点，用户分析统计表中的两个模块分别记录应用积分、兑换率、应用用户、活跃率等，商品分析信息统计表中的两个模块分别记录收入、利润、商品浏览量、订单量等，隐藏弹框则记录着用户的姓名、职位、上次登陆时间等信息，同时可在弹框实现修改密码和退出登录的操作。图4.4首页页面(左)、首页弹框(右)4.3.3流量分析页如图4.5所示，流量分析页主要为三部分，分别为渠道来源分布饼状图、趋势日期折线图、趋势小时折线图。渠道来源分布饼状图展示的是PV、VV、UV三类访问状况来源的分布，主要来源有短信、电商、直接访问、微信、引荐等。渠道来源趋势日期折线图展示的是在PV、VV、UV三类访问状况来源的分布下，当月的访客增减趋势变化。渠道来源趋势小时折线图展示的是在PV、VV、UV三类访问状况来源的分布下，前一天各个小时段的访客增减趋势变化。图4.5流量分析页面如表4.5所示，为该页面ECharts图各接口，所以直接以图表方式，直接列举实现数据接入方法。表4.5流量分析页接口方法接口实现内容请求drawPie()/jf-statistics/traffidSources/pieData饼状图postdrawLine()/jf-statistics/traffidSources/lineChart日期折线图postdrawHoursLine()/jf-statistics/traffidSources/lineHours小时折线图post4.3.4转化分析页如图4.6所示，转化分析页分为两部分，分别为转化环节分布象形柱图和渠道来源趋势折线图。转化环节分布象形柱图展示的是手机访客数、详情访客数、下单量、支付量四类数据，同时得到由手机访客数逐渐转变详情访客数，成为下单客户，最后由下单客户成功支付过程中，客户各级转化情况。而渠道来源趋势折线图展示的内容则是当月每日从手机访客转化为支付成功用户量的增减趋势变化。图4.6转化分析页面如表4.6所示，由于本页内容组成都为ECharts图，分别是以drawFunnel()和drawFunnelLine()方法直接调用相应接口，所以直接以图表方式，直接列举实现数据接入方法。表4.6转化分析页接口方法接口实现内容请求drawFunnel()jf-statistics/funnelPolt/searchData象形柱图fetchdrawFunnelLine()/jf-statistics/funnelPolt/lineChart日期折线图fetch4.3.5用户分析页如图4.7所示，用户分析页包括公告栏、用户分析数据统计表及新老用户子页面和用户归属子页面入口。公告栏和用户分析数据统计表展示功能同首页相同。新老用户子页面中分为两部分，一部分为新老用户分布饼状图，用来记录展示用户中新老成分所占比例，另一部分为新老用户趋势日期折线图，记录了当月每天新老用户的增减趋势变化。用户归属子页面中同样分为两部分，一部分为用户归属地图，如图所见，通过各地区颜色深浅来区分，能直观地看出各地区用户的多少，深颜色地区用户基数比较大，浅颜色地区用户基数比较小，另一部分为用户归属柱状图，主要展示各省市用户多少排名情况。图4.7用户分析页面(左)、新老用户子页面(中)、用户归属子页面(右)如表4.7所示，在新老用户子页面中分别以drawNewUserPie

()和drawNewUserLine

()方法来直接调用该页面中饼状图和日期折线图数据，在用户归属子页面中分别以drawMap()和drawBar()方法来直接调用该页面中地图和柱状图数据，所以直接以图表方式，直接列举实现数据接入方法。表4.7用户分析页接口方法接口实现内容请求drawNewUserPie

()/jf-statistics/newUser/searchData饼状图fetchdrawNewUserLine

()/jf-statistics/newUser/lineChart日期折线图fetchdrawMap()/jf-statistics/provinceUser/searchData地图postdrawBar()/jf-statistics/provinceUser/searchData柱状图post4.3.6商品分析页如图4.8所示，商品分析页包括公告栏、商品分析数据统计表及选品推荐子页面和商品渠道子页面入口。公告栏和商品分析数据统计表展示功能同首页相同。选品推荐子页面中分为两部分，一部分为商品品类分布饼状图，用来展示在商品、积分、PV、UV中可兑换商品种类的占比信息，另一部分为商品品类趋势折线图，用来展示在商品、积分、PV、UV中可兑换商品种类增减趋势。商品渠道子页面，类似选品推荐页面，展示在订单、积分、产品、用户中商品占比信息及增减趋势。图4.8商品分析页面(左)、选品推荐子页面(中)、商品渠道子页面(右)如表4.8所示，在新老用户子页面中分别以drawListPie

()和drawListPie

()方法来直接调用该页面中饼状图和日期折线图数据，在用户归属子页面中分别以drawListPie()和drawListLine()方法来直接调用该页面中饼状图和日期折线图数据，所以直接以图表方式，直接列举实现数据接入方法。表4.8商品分析页接口方法接口实现内容请求drawListPie

()/jf-statistics/goods/list饼状图postdrawListLine

()/jf-statistics/goods/list日期折线图postdrawListPie()/jf-statistics/goodschannel/list饼状图postdrawListLine()/jf-statistics/goodschannel/list日期折线图post4.4开发系统的创新点（1）将MVVM框架应用于Web前端开发能够很好地达到交互界面的形成与扩展，并通过前后端分离，使前端和后端同时进行分层开发，大大节省了开发成本。（2）使用框架简单易懂，只需引用即可拥有框架所有功能。高度的组件化可以使我们的工程易于维护、易于组合拓展，降低了开发难度。4.5本章小结本章主要对开发环境的部署和项目的创建进行了简单的介绍，由此来实现了各页面在实际应用中的具体功能，在各个页面实现过程中列举了该页面主要的一些数据接口，并在章节最后简要的说明了该开发系统的创新点。5前端开发的系统测试5.1功能性测试 软件功能性测试就是对产品的各功能进行验证，根据功能性测试用例，逐项测试，检查产品是否达到用户要求的功能REF_Ref4519\r\h[26]。而该系则是针对各个页面相应的数据显示部分进行逐一测试排查是否能够正常展示，分为以下几个模块来测试，测试结果如表5.1所示。表5.1模块测试表测试模块测试功能测试操作测试结果登录页表单校验功能多次输入正确、错误表单输入值功能正常登录页忘记密码功能多次作出忘记密码操作功能正常登录页登录功能输入正确登录信息后，点击登录按钮功能正常首页轮播图功能点击图片前后滑动功能正常首页首页数据显示功能多次切换、点击首页页面功能正常首页隐藏弹框功能多次点击弹框并关闭功能正常隐藏弹框弹框数据显示功能多次点击弹框功能正常隐藏弹框修改密码功能多次作出修改密码操作功能正常隐藏弹框退出登录功能多次作出退出登录操作功能正常流量分析页ECharts图分别在PV、VV、UV情况下，数据图展示功能多次切换、点击流量分析页面功能正常转化分析页ECharts数据图展示功能多次切换、点击转化分析页面功能正常用户分析页用户分析数据显示功能多次切换、点击用户分析页面功能正常用户分析页新老用户子页面ECharts数据图展示功能多次切换、点击新老用户子页面功能正常用户分析页用户归属子页面ECharts数据图展示功能多次切换、点击用户归属子页面功能正常商品分析页商品分析数据显示功能多次切换、点击商品分析页面功能正常商品分析页选品推荐子页面ECharts数据图分别在商品、积分、PV、UV情况下，数据图展示功能多次切换、点击选品推荐子页面功能正常商品分析页商品渠道子页面ECharts数据图分别在订单、积分、产品、用户情况下，数据图展示功能多次切换、点击商品渠道子页面功能正常5.2兼容性测试本项目的前端测试工作，采用了目前主流的Chrome浏览器。通过测试GalaxyS5、Pixel2、Pixel2XL、iPhone5/SE、iPhone6/7/8、iPhone6/7/8Plus、iPhoneX、iPad、iPadPro等机型，来完成了兼容性测试。各机型测试显示均能正常显示，如图5.1所示，是在iPhone6/7/8(左)和ipad(右)中展示的首页效果图。图5.1iPhone6/7/8和ipad测试机型5.3本章小结本章节按照该开发系统各个页面中不同的功能点进行检查测试。在兼容性方面，主要用到Chrome浏览器，来完成了该项目前端性能测试。总结近年来，随着移动互联网的发展到达了高潮，移动APP开发行业竞争也更加激烈。企业发展空间逐渐变小，所以更多的企业被迫经济转型，开始了对数据的运营，以便寻求更大的利益。因此本文给出使用前端渐进式框架Vue实现了对联通积分商城数据可视化APP的设计与实现过程。本文首先通过对数据可视化的研究背景和国内外发展情况进行介绍，来说明该开发系统的存在必要性。然后介绍了实现该系统的关键技术和框架，其中利用前端最为主流框架之一的Vue构建了该项目的应用框架，以及使用ECharts图表实现项目大部分数据展示。接着本文对前端开发进行了分析设计，先对该系统的功能性和非功能性需求进行说明。之后，分别对该系统的前端构架、各个页面模块以及数据库进行了详细的介绍。为前端开发系统的实现，做了充足的准备工作。根据开发系统需求的分析设计，本文按照设计结构顺序，分别进行了实现，并且通过部分函数、部分数据接口，给出页面具体实现的过程。最后，对该开发系统各个页面中不同的功能点进行检查测试，保证了开发系统的实现质量。基于Vue的联通积分商城数据可视化APP的设计与实现涉及到了多方面的理论、方法和技术。在当下这个随着移动端业务越来越复杂的时代，数据分析的复杂程度也是成倍增长。虽然本系统已经能够满足公司对大部分的数据分析需求，但是本系统中还是存在很多的功能和问题需要来解决，需要不断地在实际应用中进一步去完善。致谢在校的这四年时间里很感谢老师们对我的淳淳教诲，是你们教会了我们勤奋学习，诚实做人，踏实做事，以宽容之心面对生活。指引着我们沿着正确方向前进。在点滴汇聚中使我逐渐形成正确、成熟的人生观、价值观。特别要感谢我的指导老师，朱元华老师和刘建生老师给予我很大的帮助。感谢我的家人，我永远的支持者，正是在你们殷切目光的注视下，我才一步步的完成了求学生涯。没有你们，就不会有今天的我！我一直很感谢你们，让我拥有一个如此温馨的家庭，让我所有的一切都可以在你们这里得到理