基于vue的联通积分商城数据可视化APP设计与实现 .docx

目 录摘 要IAbstractII引 言11 前端技术介绍31.1 前端开发语言31.1.1 HTML531.1.2 CSS331.1.3 JavaScript31.2 MVVM开发模式41.3 Vue框架41.4 Axios技术51.5 ECharts51.6 数据库技术51.7 本章小结62 前端开发的分析72.1 功能性需求分析72.2 非功能性需求分析82.2.1 兼容性需求82.2.2 性能需求82.3 本章小结83 前端开发的设计93.1 前端架构设计93.2 系统功能设计93.2.1 登录页面设计93.2.2 首页页面设计93.2.3 流量分析页面设计103.2.4 转化分析页面设计113.2.5 用户分析页面设计113.2.6 商品分析页面设计123.2.7 底部导航栏设计133.3 数据库设计143.4 本章小结164 前端开发的具体实现174.1 系统开发环境174.1.1 开发环境174.1.2 项目框架搭建174.1.3 开发系统前端项目结构174.2 通用组件的开发184.3 开发系统页面功能实现194.3.1 登录页194.3.2 首页204.3.3 流量分析页224.3.4 转化分析页234.3.5 用户分析页244.3.6 商品分析页254.4 开发系统的创新点264.5 本章小结265 前端开发的系统测试275.1 功能性测试275.2 兼容性测试275.3 本章小结28总 结29致 谢30参考文献32沈阳城市学院毕业设计（论文）摘 要当今互联网技术突飞猛进，全球经济模式也随之变化，由传统的一手交钱，一手交货，变成现在的线上交易，加大了各种商品的成交率。而企业想要得到长久稳定的发展，则必须要对交易中产生的商业数据进行分析处理，充分利用分析结果，实现企业进一步壮大，由此可见，对企业来说企业信息化显得极为重要。在以节省成本的制约下，对企业来说，信息化的实现就显得尤为重要，而且将会是一项繁杂的工作。因此，开发一款具有数据分析能力的系统，将有效的推进企业信息化，这也将成为本课题研究的主要内容。本课题意在研究并开发一款数据信息可视化的移动端软件，主要研究项目实现的前端框架技术。在开发项目的过程中，使用到了MVVM开发模式实现前后端分离开发，并且在Vue框架、Axios技术、ECharts组件等工具的支持下，完成该项目前端开发。实现一款多种形式的数据展示页面，来对联通积分消费用户的地理位置及消费方向进行分析。关键词：Vue框架；数据可视化；Web前端；EChartsAbstractWith 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, its 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 II引 言现今，科技发展势头迅猛，信息技术也随之得到了进一步发展，所以数据可视化已成为当今社会极其重要的领域之一。在这个大数据时代，需要解决的关键性问题，就是如何在错综庞杂的数据中，高速处理、分析数据内部的信息规律。数据可视化经过几代人共同的发展，由最初的计算机图形学，发展到如今的多种表现形式，例如实时动态变化、用户交互使用等，对人们而言提供了多样选择，而且更有助于人们认识和理解数据。现在处于大数据时代，数据可视化也并不是一个新的技术，因为人们对数据分析的需求越来越强烈，所以数据可视化越发的让人灼以重视。对于开发者来说，数据分析是一个比较困难的问题，数据可视化相对是较为容易的，但是对当今社会而言，数据可视化却是一个重要的技术。目前来看，国内外发展是有一定差距的。在国外，数据可视化的发展历程已经相当之久，其应用范围和影响也随之逐渐扩大。早期，在数据可视化这个新兴领域，国外对其重视的程度远超国内，他们不仅在这方面投入大量财力、物力，而且还有政府、高校为此专门成立各种研究机构，用来探索数据奥妙。相对于国外，国内数据可视化发展几乎晚了近十年之久，但也取得了一定的成果。由于近几年国内互联网技术的高速发展，也带动了高校、研究院、互联网公司等研究机构对数据可视化方面的研究，在数据可视化学术和应用方面取得了很大的进步。阿里巴巴旗下DataV数据可视化，已经颇有追赶世界一流技术的趋势，而且学习开发愈发简单易懂，场景模板愈加完善，数据接入方式愈加强大，例如天猫双十一狂欢购物节，阿里巴巴总部大屏展示的各类产品交易额数据，实现对大量数据进行稳定的实时更新，为数据可视化研究树立了一个新的里程碑；相对于阿里巴巴这个新起之秀，我们更为熟知的百度ECharts数据可视化图表开发，同样是国内数据可视化顶尖的存在，它以更强的兼容性深得数据可视化开发者的喜爱。本系统主要针对联通公司积分商城APP应用的数据可视化的设计与实现。数据分析交互显示是系统的核心，其次能够高速处理、分析大量数据，并通过前后端数据交互展示，实现数据实时更新监控，并且创建有吸引力的数据图表，通过大数据获取意见，为用户提供具有决策性地数据依据，创造商业价值。本文通过对数据可视化技术的研究，采用Web前端技术以及可视化框架实现了数据可视化系统，实现了数据特征以及规律易发现的效果1。本文第1章主要是对开发系统前端技术介绍。本章通过对前端页面开发语言、MVVM开发模式、Vue框架、Axios技术、ECharts插件以及数据库MySQL技术等介绍，简单说明这些技术框架的主要功能和优缺点。第2章则是对系统前端开发的具体分析，本章中简要的介绍了对前端开发的功能与非功能性需求分析，通过前端模块分析图，说明了该系统都具备哪些功能模块，以及提前了解好系统性能等方面对所产生的影响。第3章为前端的设计工作，主要介绍了开发架构设计、开发系统各个页面模块功能设计以及数据库中部分数据表设计，为接下来具体实现做好基础说明。第4章介绍了开发系统的具体实现过程，主要对开发环境的部署和项目的创建进行了简单的介绍，由此来实现了各页面在实际应用中的具体功能，在各个页面实现过程中列举了该页面主要的一些数据接口，并在章节最后简要的说明了该开发系统的创新点。第5章对开发系统的测试，本章节按照该开发系统各个页面中不同的功能点进行检查测试，在兼容性方面，主要用到Chrome浏览器，来完成了该项目前端性能测试。1 前端技术介绍1.1 前端开发语言随着软件开发技术的发展，Web前端开发不可避开的技术就是HTML5、CSS3、 JavaScript这三个核心技术，都是基于此开发的各种技术框架和解决方案2。1.1.1 HTML5HTML5是超文本标记语言HTML的第5代版本3。通过一代一代的版本变更，HTML5增加了很多非常实用的新特性和功能4，值得一提的是HTML5通过Canvas实现了动画操作。在2010年，苹果宣布其移动设备不支持Flash插件后，HTML5标准更是迅速成为移动网站打造丰富的网页应用的首选55。其由众多的新特性组成，其功能也是呈现多样化，因此，将其用于移动互联网开发中的页面设计，更易满足开发人员、用户在页面整体视觉效果方面的需求6。1.1.2 CSS3CSS3作为一种对网页内容的修饰技术，以便捷式的操作，得到了众多前端开发者的追捧。不仅可以对网页布局进行科学合理的控制，提高代码重用率和网页传输速率，而且还能简化HTML中的繁琐标记，避免重复劳动的现象发生7。其继承了CSS的功能特性，而且新增了很多属于自己的特性，其中主要新增特性有边框圆角设置、多层背景图片设置、多方向颜色渐变、动画设置以及多种艺术字体设置等等。所以有效地运用CSS3技术可令网页的布局更加灵活，页面效果更新颖美观8。1.1.3 JavaScriptJavaScript作为一种轻量级的编程语言，是完全可以被嵌入到HTML页面代码中，并且几乎可以支持所有浏览器来代为执行。JavaScript虽然被嵌入到了HTML文档中，但其程序的语法规则还是与java非常接近的9。随着科技的发展变化，JavaScript技术在前端编程中的地位越发的重要。其能够成为Web当中最流行的脚本编写语言，与其自身所具备的特点是分不开的，相比于其他语言都是先进性编译后再进行执行操作，JavaScript则是在浏览器中直接进行执行操作，同时不仅可以创建新的对象，还可以对已经存在的对象进行引用操作，完全符合封装、继承、多态等面向对象编程特征。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作为目前三大主流的前端框架之一，它是一个非常灵活开放的解决方案。它允许你以任何的方式来组织应用程序，着重关注MVVM开发模式下，前端的View和Model模块。作为轻量级的前端开发框架，与另外两个主流重量级框架（React14和 Angular15）相比，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 EChartsECharts（Enterprise Charts），是国内的一款非常优秀的的可视化图表控件17，其中它不仅支持的图标种类众多，而且支持的绘制图案也是种类繁多。比如ECharts官网所介绍的不同样式的折线图、颜色渐变的柱状图、多样化的饼状图等基本图形，还有比较高级的3D曲面图、3D路径图、GL矢量场图等复杂图形，为开发者在实际应用中提供更多的选择空间。1.6 数据库技术MySQL是一种关系型数据库管理系统，关系数据库将数据保存在不同的表中，而不是将所有数据放在一个大仓库内18，在使用MySQL数据库时，通过分布式对数据进行储存，可以实现安全快速的执行存储操作，并且可以通过简单地编程，实现复杂的判断运算。另外，由于MySQL具备开源、简单易用等特点，所以其使用成本较低，更促进了其应用推广19。1.7 本章小结本章节介绍了该项目前端开发过程中所需的基本技术，包括了HTML5、JavaScript、CSS3、MVVM开发模式、Vue框架、Axios技术、ECharts以及数据库MySQL技术等，在项目开发中都有所涉及，也是设计与实现本系统的重要前提。2 前端开发的分析2.1 功能性需求分析图2.1 前端模块分析图如图2.1所示，登录页面，包含登录前的个人信息验证；首页，主要用于统计显示用户访问量情况，其中包括应用积分及兑换率、应用用户及活跃率、收入及利润、商品浏览量及订单量等数据信息显示功能；流量分析页面，其中主要展示的内容有对用户访问次数(VV)、独立访客(UV)、浏览次数(PV)等渠道来源分布趋势的数据显示功能；转化分析页面，其中主要展示的内容有由访客向消费客户的转化环节分布趋势的数据显示工能；用户分析页面，其中主要展示内容有用户应用积分及兑换率、应用用户及活跃率、新老用户页面及客户归属页面入口等功能，新老客户页面，主要展示内容为新老用户分布趋势，用户归属页面，主要展示内容为用户归属地数据及用户归属地用户多少排名；商品分析页面，其中主要展示内容有商品浏览量及订单量、收入及利润、选品推荐页面及商品渠道页面入口等功能，选品推荐页面，主要展示内容为商品品类分布趋势，商品渠道页面，主要展示内容为商品销售渠道分布趋势。2.2 非功能性需求分析开发者在进行系统功能性需求分析时，将不直接关系到为用户提供服务的功能称之为非功能性需求。非功能性需求一般与系统的总体特性相关，可以看作是对系统质量的要求20。2.2.1 兼容性需求在我们进行项目开发工作时，会碰到各种兼容问题，而各种浏览器的兼容性问题，则是前端开发者在开发时势必会遇到麻烦。随着科技化不断进步，市场上的浏览器也呈百花争鸣般出现，由于不同的浏览器以及不同版本的内核都不一样，在兼容性上可能会导致一些效果产生偏差或者无法实现21。因此，如何解决高版本和不同浏览器之间的兼容性将是前端开发者重点解决的问题。2.2.2 性能需求软件性能被广泛应用与改进软件质量、提高软件可靠性方面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 底部导航栏设计底部导航栏设计，主要为首页、流量、转化、用户、商品等五个文字加图标的标签，跳转分别对应首页页面、流量分析页面、转化分析页面、用户分析页面、商品分析页面，实现页面的交互跳转操作。通过底部标签式导航栏的引导，用户可以迅速的实现页面之间的切换且不会迷失方向，简单而高效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积分应用量 2PV 3UV 4转换率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 开发环境开发环境指的是在基本的硬件和软件的支持下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.x4.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 开发系统前端项目结构通过开发环境搭建，系统会自动生成一些项目文件，其中主要目录文件如表4.3所示。表4.3 目录结构文件夹名/文件名功能build/build.js生成环境构建脚本build/webpack.base.conf.jswebpack基础配置build/webpack.dev.conf.jswebpack开发环境配置build/webpack.prod.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 通用组件的开发组件技术的应用现在已经非常广泛，组件作为软件开发复用的核心技术，是近几年来随着中间件产品的完善而飞速发展并受高度重视的一个分支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访问数量，轮播图用来介绍积分商城的活动展示，公告栏主要是每次系统更新改动及显示展示数据的时间点，用户分析统计表中的两个模块分别记录应用积分、