基于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的设计与实现涉及到了多方面的理论、方法和技术。在当下这个随着移动端业务越来越复杂的时代，数据分析的复杂程度也是成倍增长。虽然本系统已经能够满足公司对大部分的数据分析需求，但是本系统中还是存在很多的功能和问题需要来解决，需要不断地在实际应用中进一步去完善。致谢在校的这四年时间里很感谢老师们对我的淳淳教诲，是你们教会了我们勤奋学习，诚实做人，踏实做事，以宽容之心面对生活。指引着我们沿着正确方向前进。在点滴汇聚中使我逐渐形成正确、成熟的人生观、价值观。特别要感谢我的指导老师，朱元华老师和刘建生老师给予我很大的帮助。感谢我的家人，我永远的支持者，正是在你们殷切目光的注视下，我才一步步的完成了求学生涯。没有你们，就不会有今天的我！我一直很感谢你们，让我拥有一个如此温馨的家庭，让我所有的一切都可以在你们这里得到理解与支持，得到谅解和分担。你们的支持和鼓励是我前进的动力。衷心感谢我的指导教师。本文的研究工作是在老师的悉心指导下完成的，从论文的选题、研究计划的制定、技术路线的选择到系统的开发研制，各个方面都离不开老师热情耐心的帮助和教导。最后，由衷的感谢在百忙之中抽出时间审阅本论文的专家老师。由于本人的学识和写作的水平有限，在本文的写作中难免有僻陋，恳请老师和同学指教。参考文献王水波.基于Web前端数据可视化研究与应用[D].西安电子科技大学,2017王志任.基于Vue的开发平台的设计与实现[D].广东工业大学,2018佘东.ASP.NET精品资源共享课程的设计与实现[J].黑河学院学报,2017,8(12):106-107XianfengLi,ZhiqiangBao.PerformanceCharacterizationofWebApplicationswithHTML5Enhancements[P].Dependable,AutonomicandSecureComputing(DASC),2014IEEE12thInternationalConferenceon,2014黄深悦.基于HTML5的移动WebApp开发[J].图书馆杂志,2014,33(07):72-77张宁.HTML5在移动互联网开发中的应用探究[J].信息与电脑(理论版),2019(02):185-186陆郁.探析CSS技术在网页制作中的应用与代码优化[J].科技风,2019(01):110江玉珍,朱映辉,黄伟,陆锡聪.HTML5网页设计课程的CSS3教学拓展[J].现代计算机(专业版),2018(03):71-74李晓薇.JavaScript在动态网页设计中的应用研究[J].信息系统工程,2019(01):87SoreunsenE,MikailescM.Model-view-ViewModel(MVVM)designpatternusingWindowsPresentationFoundation(WPF)technology[J].MegaByteJomal,2010,9(4):1-19刘立.MVVM模式分析与应用[J].微型电脑应用,2012,28(12):57-60王鹤琴,朱珍元.基于MVVM模式的Web开发研究[J].菏泽学院学报,2019,41(02):7-13易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电脑(理论版),2016(19):76-77+84AlexMatchneer.REACTVSEMBER.JS[J].Net,2014,260:96-98Balasubramanee,V.，Wimalasena,etc.TwitterbootstrapandAngularJS:Frontendframeworkstoexpeditesciencegatewaydevelopment[J].IEEEMeeting,2013,06(2):23-28张倩.信用卡代偿子系统的设计与实现[D].北京交通大学,2019王子毅,张春海.基于ECharts的数据可视化分析组件设计实现[J].微型机与应用,2016,35(14):46-48+51赵宏伟.中小学学生成长档案管理系统的设计与实现[D].东北大学.2015范开勇,陈宇收.MySQL数据库性能优化研究[J].中国新通信,2019,21(01):57杨烁.基于图的车险欺诈可视化分析系统的设计与实现[D].北京邮电大学.2019周乾莉,黄倩倩.基于JAVA的商城积分子系统的设计与实现[J].电脑知识与技术,2019,15(10):53-55+77董秋.面向软件可靠性的性能测试模型研究与应用[D].长春理工大学,2014宋丽行.“嘉驰婚猎”APP界面视觉设计[D].昆明理工大学.2015王强.基于Web技术的校园信访系统开发及实现[D].兰州交通大学.2016何鹏飞,何平,张松阳,赵鸿博.组件技术在嵌入式系统中的应用[J].计算机系统应用,2014,23(06):220-223张晶莹.软件测试之功能性测试的研究[J].中国新技术新产品,2008(14):18

PowerPoint课件制作实用技巧PowerPoint是微软公司生产的制作幻灯片和简报的软件（以下简称PPT）。在我们许多人看来,它只不过是一个简单地对文字、图形、图片进行演示的软件，教学中的课件制作软件当属Authorware、Flash。Authorware和Flash制作的动画效果的确很好，而且它们的功能也很强大。不过这些软件在制作课件的过程中往往非常耗时，用这些专业软件来制作课件用于平时的教学往往效率很低。PPT就是一个非常简单、实用的制作课件的软件，只要你用好它,同样能做非常棒的课件来。一、掌握基本，知道“插入”。（一）知道从“插入”菜单进入，会给PPT课件添加文字、图片、影片和声音等，也就会做一般的课件了。（二）图片插入与处理1.插入图片具体方法：a)插入剪贴画或文件中的图片；b)添加图片做背景；c)给自选图形做填充。2.处理图片具体方法：我们用PPT制作课件时，经常从网上下载图片来用，而网络中的图片往往含有超链接和网站名称痕迹，我们需要删除其中超链接，并对图片进行裁剪处理。在Powerpoint中，我们一般可以利用“图片”工具栏上的“裁剪”工具进行裁剪处理，但是，这里的工具只能对图片进行矩形裁剪，若想裁剪成圆形、多边形等其他形状，通常方法就无能为力了。其实这个问题在PPT中是可以解决的。我们用给自选图形做填充图片的方法就可以实现我们需要的效果。具体步骤：a)首先利用“绘图”工具栏画一个想要裁剪的图形，如椭圆。b)选中椭圆后单击“绘图”工具栏上“填充颜色”按钮右侧黑三角，从列表菜单中单击“填充效果”命令。c)打开选择“图片”选项卡，单击〔选择图片〕按钮，从“选择图片”对话框中找到合适的图片，单击〔插入〕按钮后返回到“填充效果”对话框最后单击〔确定〕按钮后退出。此图片当作椭圆图形的背景出现，改变了原来的矩形形状，获得了满意的裁剪图片效果。图片在插入PPT之前，我们可以用ACDSEE软件进行加工，如改变大小，裁剪等操作。二、学会下载，查找方法。在制作课件过程中，我们时常需要从网络上下载各种资源用以丰富课件内容，提升课堂效果。但有许多网站的flash动画都不提供下载；还有网站为我们提供了许多视频素材，这些视频素材都是FLV流媒体格式。FLV流媒体格式是一种新的视频格式，全称为FlashVideo。由于它形成的文件极小、加载速度极快，使得网络观看视频文件成为可能，它的出现也有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。目前各在线视频网站均采用此视频格式。如新浪播客、56、优酷、土豆、酷6等，无一例外。FLV已经成为当前视频文件的主流格式。这些网站一般都不提供下载。我们想要这些素材，怎样办？1.寻找下载方法：a)在百度网站搜索栏中输入下载的内容，搜索下载方法。b)弄清格式，再搜索方法。2.具体方法推荐①flasah动画的下载方法一：IE缓存中寻找在网上看过一个flash后，一般情况下都会保存在IE缓存里。右击桌面上的IE图标，选“属性”命令，单击中间的“设置”按钮，弹出“Internet临时文件和历史记录设置”面板，单击“查看文件”，可以打开临时文件夹，按时间排序，找到刚才打开的flash动画文件。优点：不需要安装其它软件。缺点：操作相对烦琐。方法二：借助Flashsaver等软件下载，这些软件都可以快速、方便的下载你所需要的flash文件。优点：简单、方便、快速。缺点：需要安装使用。②FLV视频的获取方法一：IE缓存中寻找，方法同flasah。方法二：flv视频解析下载/三、学用控件，转化应用1.flash动画的插入方法一：安装flash插件，再插入flash。步骤：a)安装“ppt插flash软件”插件；b)单击“插入”→“flashmovie”→打开要播放的flash文件→确定。方法二：利用控件插入flash动画。步骤：a)插入“ShockwaveFlashObject”控件对象：右击“工具栏”→选“控件工具箱”（或点“视图→工具栏→控件工具箱”）；点“其他控件”（控件工具箱中最后一个形似锤子斧头的按钮），拖动滚动条或在英文输入法状态下按键盘上“s”键，快速定位到以s开头的控件，选择“ShockwaveFlashObject”控件。将鼠标移到幻灯片工作区，鼠标指针变成“十”字型，拖动鼠标绘制出一个形似信封的矩形。b)打开控件对象“属性”对话框：右击矩形控件对象，在弹出的快捷菜单中选“属性”命令。c)正确设置控件对象属性：主要是在“Movie”空白文本域中正确输入演示文稿要播放的.swf动画的完整名称。d)将控件对象适当缩放：为了获得比较好的播放效果，拖动控件对象的缩放点使它几乎覆盖整个幻灯片工作区，但要在幻灯片工作区底部保留少许空白区域。这样既可以享受.swf动画大屏幕播放的好处，又能够保证幻灯片能够顺利地切换。e)一般情况下，幻灯片应显示出动画的第一帧图形。如果控件对象仍是空白的，可保存演示文稿，关闭后再打开它，按F5放映幻灯片，应该能够正确播放动画。2.FLV视频的插入FLV视频与FLASH不一样的。全称是flashvideo，所用的播放器也不一样。①利用控件插入PPT的方法也是有区别的。不同点：先要下载pptflv.swf文件，此文件是类似于网页中FLV视频播放器的一个Flash文件(可用百度搜索下载下来后记着要改文件名，保留扩展名)；例如改成：pptflv1.swf“Movie”参数值填入方法不一样，参数值示例：pptflv.swf?file=视频.FLV“pptflv.swf”即为步骤一下载下来的Flash文件的完整文件，“视频.FLV”即为需要播放的FLV视频的文件名，大家只要将pptflv.swf换成自己下载后起的文件名，将“视频.FLV”换成自己的FLV视频文件名，则此FLV文件就可以在PowerPoint中播放了。如播放2.flv视频参数填法：示例：pptflv1.swf?file=2.FLV②方法二：将flv转换成swf再插入转换软件：UltraFlashVideoFLVConverter3.2.0软件说明：该软件又叫全格式FLV转换器，支持将几乎所有主流视频格式转换为FLV或者SWF且对用户较为关心的RealMedia(RM/RMVB...)和QuickTime(MOV/QT...)支持良好。三大特色功能：既可输出FLV格式，也可输出SWF格式，甚至同时输出FLV+SWF格式。此软件也支持创建调用播放的网页支持导入所有的主流字幕格式。srt,*.sub,*.idx,*.ssa,*.ass,*.psb,*.smi)有字幕合成功能，你现在无需再使用那些繁琐的专业软件来合成字幕到视频中去，字幕合成与格式转换一气呵成！支持视频分割，右键点击列表中的源文件，选择[编辑视频]，自己设置下起点终点即可对视频进行去粗取精处理！③方法三：将flv转换成其他格式视频文件再插入工具：FLV转AVI（FreeFLVtoAVIConverter1.5）作用：一个免费的将FLV转换成AVI的软件，简单好用，自带解码器。四、学做交互，理解运用。1.利用母版进行交互母版≠模版母版和模版可以使课件统一整体风格，展现自己的个性和特点；模版是对同一类课件所做的整体风格统一设置，母版则是对某一部课件内部所做的个性化统一设置。母版设置得好，就可以存为模版，供别人在制作同类题材时使用。修改幻灯片母板的方法和技巧。如果我们希望为每一张幻灯片添加上一项固定的内容，并做超链接，可以通过修改“母板”来实现。a)执行“视图→母板→幻灯片母板”命令，进入“幻灯片母板”编辑状态。b)插入固定内容。例如：将图片插入到幻灯片中，调整好大小、定位到合适的位置上。c)给这张图片插入超链接，就可以进行交互了。d)单击“关闭母板视图”按钮退出“幻灯片母板”编辑状态。以后添加幻灯片时，该幻灯片上自动添加上该图片。如果说一个PPT有它的灵魂的话，那就是PPT的母板，它的作用犹如摩天大厦的根基一般。2.在PPT演示文稿中插入PowerPoint演示文稿对象实现交互具体效果：①导航目录内容展示效果②单击小图片就可看到该图片的放大图自动缩效果《画家乡》一课五个画面交互的具体操作方法：a)单击“插入→对象”，在出现的选择页中选择“MicrosoftPowerPoint演示文稿”，单击确定。此时就会在当前幻灯片中插入一个“PowerPoint演示文稿”的编辑区域。b)在此编辑区域中我们就可以对插入的演示文稿对象进行编辑了，编辑方法与PowerPoint演示文稿的编辑方法一样。c)在插入的演示文稿对象中创建所需的幻灯片。可将图片设置为幻灯片相同大小，退出编辑后，就可发现图片以缩小方式显示了（其实是整个插入的演示文稿对象被缩小显示了）。d)最后，我们只需对剩余的图片进行插入。为了提高效率，可将这个插入的演示文稿对象进行复制，并按照上面的方法对图片进行替换即可。e)完毕后，单击“观看放映”命令进行演示，单击小图片马上会放大，再单击放大的图片马上又返回到了浏览小图片的幻灯片中了。原理：这里的小图片实际上是插入的演示文稿对象，它们的“动作设置”属性中的“单击鼠标”中的“对象动作”被设为了“演示”（这是默认值）。因此我们在演示时，单击小图片，就是等于对插入的演示文稿对象进行“演示观看”。而演示文稿对象在播放时就会自动全屏幕显示。所以我们看到的图片就好像被放大了一样，而我们单击放大图片时，插入的演示文稿对象实际上已被播放完了（因为只有一张），它就会自动退出，所以就回到了主幻灯片中了。3.用触发器控制自定义动画进行交互以前我们在使用PowerPoint制作课件时，常常发现制作人机交互性的课件非常麻烦。其实在PowerPoint2003里，用触发器控制自定义动画可以轻松地制作出交互性很强的课件。触发器功能可以将画面中的任一对象设置为触发器，单击它，该触发器下的所有对象就能根据预先设定的动画效果开始运动，并且设定好的触发器可以多次重复使用。类似于Authorware、Flash等软件中的热对象、按钮、热文字等，单击后会引发一个或者的一系列动作。例1：单击“棱台”后，“小球”开始按一定路径运动。例2：分别单击“变色一”和“变色二”，让“笑脸”颜色。例3：单击下面一段话的关键词，让词语变红色读下面一段话，说说从哪些词语中可以看出侵略者采用了各种野蛮手段掠夺、毁灭圆明园的？他们把园内凡是能拿走的东西，统统掠走，拿不动的，就用大车或牲口搬运。实在运不走的，就任意破坏、毁掉。步骤：a)将原来段落中的重点词消去；（将词语颜色变成和背景色一样）b)将重点词作为单独文本覆盖到原来位置；c)设置重点词自定义动画为“添加效果→强调→更改字体颜色→红色”d)右击重点词自定义动画，选择“效果选项”，选择“计时”，选择“触发器”，选“单击下列对象时启动效果”，再选重点词，按确定。五、学会截取，合理选用。（一）视频的截取加工1.工具：万能转换器（英文名TotalVideoConverter）作用：可以帮助你快速的分割,修整大的AVI、MPEG、ASF或者WMV文件为一个个小的视频文件,内置视频播放器,你可以很方便的按照所选择的播放时间进行切割操作,不需要另外具备高深的技术知识,简单容易使用!2.绘声绘影会声会影是一套操作最简单，功能最强悍的DV、HDV影片剪辑软件。不仅完全符合家庭或个人所需的影片剪辑功能，甚至可以挑战专业级的影片剪辑软件。（二）flash的片段截取有时候，在网络上下载了一个课件，对自己的课堂教学有帮助，但是又不想全部应用这个课件，只想取出其中一部分，应该则么办呢？先用硕思闪客精灵将.swf文件和.exe文件转换成fla文件，再用flash8打开进行编辑，截取自己所需的片段，然后插入到ppt里面为我所用。1.硕思闪客精灵：它是一款用于浏览和解析Flash动画（.swf文件和.exe文件）的工具。最新版本有着强大的功能，可以将swf文件导出成FLA文件。它还能够将flash动画中的图片、矢量图、声音、视频（*.flv）、文字、按钮、影片片段、帧等基本元素完全分解，最重要的是可以对动作的脚本(Actionscript)进行解析，清楚的显示其动作的代码，让对Flash动画的构造一目了然。支持将SWF文件导出成FLA文件，帮助丢失FLA文件的影片作者重新获得FLA文件，从而可以再编辑。完全兼容Flash8文件和动作脚本(ActionScript)2.0。硕思闪客精灵支持将包含组件的SWF文件转换成FLA格式，用户可以在Flash中编辑这些组件。支持解析Flash影片中的视屏(video)文件，并将Flash影片中的视频文件导出为*.flv格式。2.硕思闪客精灵具体使用方法：①解析Flash课件，提取课件素材在Flash课件作品中有大量的图片、声音和视频等资源。由于制作者拥有的资源不同，在制作课件时，很难及时、方便地寻找到适合的素材。如果可以从同类作品中将所需要的资源提取出来为己所用的话，不仅大大节约了搜集素材资源的时间，而且会极大地提高课件利用率。但是，Flash课件发布时一般都进行加密处理，使教师无法用普通的方式导入到Flash中进行编辑。而硕思闪客精灵可以解析出Flash作品中的元件及脚本，并且可以保存成swf格式，这样在创作时就可以直接导入Flash中使用。启动闪客精灵，单击工具上的“快速打开”按钮打开一个Flash动画(可以是swf格式或exe格式)，闪客精灵会自动分解当前动画(图2)，包括用到的脚本语言(Actions语句)，并在资源栏中分类罗列着动画中的各种元件(图片、按钮、影片和声音等);单击某个元件，可以在中间的窗口中预览;勾选需要的元件，然后单击“导出”按钮，就可以把选中的元件分类保存到原文件所在的文件夹中。②反编译Flash课件，获取课件源代码硕思闪客精灵的最大亮点就是能够将Flash动画(swf格式)还原成其源文件(Fla格式)，相信这个功能是很多朋友期待已久的。还原的方法十分的简单，只需要打开Flash动画，再单击工具栏上的“导出Fla”按钮，选择保存位置，稍等后就完成了还原工作，此时还会提示“是否愿意用Flash打开它”，单击“Yes”即可启动系统中安装的Flash打开还原后的源文件，此时你就可以随心所欲地对它进行修改啦。3.用flash8进行编辑基本方法：选取需要帧，复制，粘贴到新的flash中，调试修改。上面介绍了关于破解Flash课件的一些方法和手段，有一个特定的使用范围，即为了课堂教学服务，只有资源共享才能提高教学效率，促进教学效果的提高。不能做为商业目的，也不能将别人的课件的署名修改一下，便成为自己的作品，用于参加比赛，这是不道德的行为。在PPT演示中禁用右键快捷菜单和滑鼠滚动一大群与会人员正襟危坐，你豪情满怀地进行着某个新产品的演示或介绍，却不小心由于鼠标左键的误操作导致幻灯片跳到了本不应该出现的位置，或者本应按下鼠标左键切换到下一张，却由于按下了右键而出现一个快捷菜单。不用担心，只要进行小小的设置，就可以将这些烦人的问题统统搞定。从任务窗格中打开“幻灯片切换”，将换片方式小节中的“单击鼠标时”和“每隔”两个复选项全部去除，然后将这个设置应用于所有幻灯片，以后切换到下一张或上一张，只有通过键盘上的方向键才能进行操作。至于另外一个问题，解决的办法也很简单，从“工具”菜单下打开“选项→视图”窗口，取消“幻灯片放映”小节上的“右键单击快捷菜单”复选框即可。■在PPT演示文稿内复制幻灯片要复制演示文稿中的幻灯片，请先在普通视图的“大纲”或“幻灯片”选项中，选择要复制的幻灯片。如果希望按顺序选取多张幻灯片，请在单击时按Shift键；若不按顺序选取幻灯片，请在单击时按Ctrl键。然后在“插入”菜单上，单击“幻灯片副本”，或者直接按下“Ctrl+shift+D”组合键，则选中的幻灯片将直接以插入方式复制到选定的幻灯片之后。■Powerpoint自动黑屏在用Powerpoint展示课件的时候，有时需要学生自己看书讨论，这时为了避免屏幕上的图片影响学生的学习注意力可以按一下“B”键，此时屏幕黑屏。学生自学完成后再接一下“B”键即可恢复正常。按“W”键也会产生类似的效果。■将幻灯片发送到word文档1、在Powerpoint中打开演示文稿，然后在“文件”菜单上，指向“发送”，再单击“MicrosoftWord”。2、在“将幻灯片添加到Microsoftword文档”之下，如果要将幻灯片嵌入word文档，请单击“粘贴”；如果要将幻灯片链接到word文档，请单击“粘贴链接”。如果链接文件，那么在Powerpoint中编辑这些文件时，它们也会在word文档中更新。3、单击“确定”按钮。此时，系统将新建一个word文档，并将演示文稿复制到该文档中。如果word未启动，则系统会自动启动word。■让幻灯片自动播放要让powerpoint的幻灯片自动播放，只需要在播放时右键点击这个文稿，然后在弹出的菜单中执行“显示”命令即可，或者在打开文稿前将该文件的扩展名从PPT改为PPS后再双击它即可。这样一来就避免了每次都要先打开这个文件才能进行播放所带来的不便和繁琐。■增加PPT的“后悔药”在使用powerpoint编辑演示文稿时，如果操作错误，那么只要单击工具栏中的“撤消”按钮，即可恢复到操作前的状态。然而，默认情况下Powerpoint最多只能够恢复最近的20次操作。其实，powerpoint允许用户最多可以“反悔”150次，但需要用户事先进行如下设置：在“工具－选项”，击“编辑”选项卡，将“最多可取消操作数”改为“150”，确定。■PPT中的自动缩略图效果你相信用一张幻灯片就可以实现多张图片的演示吗？而且单击后能实现自动放大的效果，再次单击后还原。其方法是：新建一个演示文稿，单击“插入”菜单中的“对象”命令，选择“Microsoftpowerpoint演示文稿”，在插入的演示文稿对象中插入一幅图片，将图片的大小改为演示文稿的大小，退出该对象的编辑状态，将它缩小到合适的大小，按F5键演示一下看看，是不是符合您的要求了？接下来，只须复制这个插入的演示文稿对象，更改其中的图片，并排列它们之间的位置就可以了。■快速灵活改变图片颜色利用powerpoint制作演示文稿课件，插入漂亮的剪贴画会为课件增色不少。可并不是所有的剪贴画都符合我们的要求，剪贴画的颜色搭配时常不合理。这时我们右键点击该剪贴画选择“显示‘图片’工具栏”选项（如果图片工具栏已经自动显示出来则无需此操作），然后点击“图片”工具栏上的“图片重新着色”按钮，在随后出现的对话框中便可任意改变图片中的颜色。■为PPT添加公司LOGO用powerpoint为公司做演示文稿时，最好第一页都加上公司的Logo，这样可以间接地为公司做免费广告。执行“视图－母版－幻灯片母版”命令，在“幻灯片母版视图”中，将Logo放在合适的位置上，关闭母版视图返回到普通视图后，就可以看到在每一页加上了Logo，而且在普通视图上也无法改动它了。■“保存”特殊字体为了获得好的效果，人们通常会在幻灯片中使用一些非常漂亮的字体，可是将幻灯片拷贝到演示现场进行播放时，这些字体变成了普通字体，甚至还因字体而导致格式变得不整齐，严重影响演示效果。在powerpoint中，执行“文件－另存为”，在对话框中点击“工具”按钮，在下拉菜单中选择“保存选项”，在弹出其对话框中选中“嵌入