基于Vue的实时影片资讯APP设计与实现.docx

《基于Vue的实时影片资讯APP设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Vue的实时影片资讯APP设计与实现.docx（40页珍藏版）》请在优知文库上搜索。

1、摘要IAbstractII引言11 相关技术31.1 Vue框架31.2 MVVM31.3 Mongodb数据库41.4 Axios请求41.5 H5、CSS3和JavaScript51.6 本章小结52系统分析72.1 功能需求72.2 用例分析72.3 用户功能82.4 本章小结83Vue影片票务服务APP设计93.1 页面设计93.1.1 登录界面93.1.2 主界面93.2 详细设计103.2.1 数据库设计103.2.2 数据处理113.2.3 功能设计113.3 本章小结124基于VUe的实时影片资讯APP的实现134.1 开发环境134.2 开发规范134.3 核心功能134.3

2、.1 地图定位模块134.3.2 影片列表界面154.3.3 影院列表界面164.3.4 资讯功能界面174.3.5 个人中心界面184.4 本章小结205基于VUe的实时影片资讯APP测试215.1 测试计划215.2 测试目的215.3 测试用例215.4 本章小结22结论23参考文献24致谢26摘要移动端APP在人们的生活可以提供更加便利的娱乐方式。和几个朋友去电影院一起看电影已经成为了人们日常生活娱乐中的不可缺少的娱乐方式，始终处于人们娱乐的消费浪潮之中，无论是寻找适合的影院还是获取实时的影片信息，都关系到人们的娱乐需求，本文针对当前存在的这种需求开发了基于VUe的实时影片资讯APP。

3、通过对影片行业的相关知识了解，充分考虑到用户以及影院等不同角度需求的相关因素，整体运用了VUe框架进行项目搭建，通过MVVM模式，运用axios技术进行网络数据的获取，选择H5和CSS3配合JaVaSCriPt进行页面的效果实现，并且引用了Vant-Ui和element-ui等组件库，使得用户可视页面效果既舒适又美观。本设计的突出之处在于引用了百度地图功能，使得可以获取用户所在城市，并且用户可以通过的城市选择功能，有选择的查看某一地区的影院信息，方便用户的观影需求，并且在一定程度上降低了影院的运营成本。本设计采用了VUe框架，MVVM模式以及axios调用网络接口等关键性技术使得项目具有操作方

4、便。经过具体的编程实现及人员测试，基于VUe的实时影片资讯APP的各模块均已实现，并且投入使用，经使用证明，本文所设计的基于VUe的实时影片资讯APP具有可观赏性好和运行稳定的特点，能够满足用户以及影院的各方面需求。关键词：定位；创意设计；获取信息；VueAbstractMobileappcanprovidemoreconveniententertainmentinpeopleslife.Goingtothecinemawithafewfriendshasbecomeanindispensablewayofentertainmentinpeoplesdailylife.ltisalwaysin

5、theconsumptionwaveofpeoplesentertainment.Whetheritistofindasuitablecinemaortoobtainreal-timefilminformation,itisrelatedtopeoplesentertainmentneeds.Inthispaper,areal-timefilminformationappbasedonVueisdevelopedforthecurrentneedsThroughtheunderstandingoftherelevantknowledgeofthefilmindustry,fullyconsid

6、ertheuserrequirementsofrelatedfactorssuchasdifferentanglesandcinemas,theoveralluseofVueframeworkforbuildingproject,throughtheMVVMpattern,useaxiostechnologyfornetworkdataacquisition,selectionofH5andCSS3cooperatewithJavaScriptintheeffectofthepage,andcitedtheVant-UIandelement-theUIcomponentlibrary,such

7、asmakingtheuserpagevisualeffectisbothcomfortableandbeautiful.Theoutstandingpointofthisdesignisthatitreferstothebaidumapfunction,sothatuserscanaccessthecity,anduserscanselectthecitythroughthecityfunction,selectiveviewofacertainareaofthetheaterinformation,convenientforuserstowatchthemoviedemand,andtos

8、omeextentreducetheoperatingcostofthetheater.ThisdesignadoptstheVueframework,MVVMmode,axioscallnetworkinterfaceandotherkeytechnologiestomaketheprojecteasytooperate.Afterspecificprogrammingandpersonneltesting,allmodulesofthevue-basedreal-timemovieinformationAPPhavebeenrealizedandputintouse.lthasbeenpr

9、ovedthatthevue-basedreal-timemovieinformationAPPdesignedinthispaperhasthecharacteristicsofgoodornamentalperformanceandstableoperation,andcanmeettheneedsofusersandtheatersinallaspects.Keywords:Positioning;creativedesign;AccesstoInformation;Vue引言随着近年来互联网的飞速发展，移动端的应用APP也开始被广泛发展起来。对于电影院来说，传统的获客渠道已经不能满足当

10、下的需求，而同时又受到同行的影响，所以将影院服务与手机APP结合起来，是电影院未来发展的一个重要方向。通过实时影片资讯APP,用户能够更加便捷了解各个影院信息，获取最近一段时间比较热门的影片信息，大大的节约了在选择喜欢的影片上所花费的时间，本项目中更有正在热映影片信息的推荐以及即将上映影片信息的介绍，进一步解决了用户在选择观看影片是遇到的选择困难问题；而这对于电影院来说，用户不去电影院挑选购买电影，电影院滞留人群大大减少。相应的电影院极大的减少人工管理成本，增加影院知名度，极大提高影院的工作效率。国内外的影片产业循序发展，对现如今中国的影片事业产生了积极影响误！未找到引用源。O在这种影片迅速发

11、展的浪潮之下，每年每月几乎都会有非常受期待的影片上线，无论是当前热映还是即将上映的影片，都是影迷们的消费对象。观看影片几乎可以说是当今社会人们娱乐的不可或缺的一部分，到如今中国影视行业足有一百余年的发展历史了，早些年人们看影片的方式只能是去各个电影院排队购票，费时耗力，而在互联网发展迅猛的今天，人们更加热衷于网上购票，网上购票大大解决了影院人工购票的压力，也为人们提供了便利，本项目致力于方便用户更容易的获影片信息和影院信息，更加贴合如今人们的生活方式。本项目根据实际的需求将项目逐步实现的过程按照项目周期的方式来完成，分别为系统需求分析，系统概要分析，系统详细设计，编码实现以及项目测试几个阶段。

12、本文设计的基于VUe的实时影片资讯APP的第1章简单的概括介绍了本项目所需要的相关技术1;基于Vue的实时影片资讯APP使用了当今前端极为火热的框架VUe进行项目搭建，并且使用了axios技术获取了众多网络数据，登录功能涉及MOngOdb数据库存储用户信息，以H5和CSS3进行项目页面的设计，辅以JaVaSCriPt使得页面更具交互性，同时还应用了Vant-Ui和element-ui组件库使得实现页面功能的同时还不缺少美观性。此外，通过在谷歌浏览器安装Postman来测试数据是否能够获取；第2章，通过详细分析基于VUe的实时影片资讯APP所需要的各个功能，以用例图的方式进行表述，使功能需求看起

13、来更具条理和组织性，并依照需求分析做出模块划分21;第3章，介绍了本项目的总体设计和各模块的功能设计；第4章，介绍了代码规范和axios获取数据3;第5章，进行了项目测试，项目测试是通过手机下载APK后，验证该APP是否满足用户需求以及在不同网速下，该APP是否能够正常运行；结论，总结了本文已经完成的功能，并且提出项目未来拓展和优化的可能性。本APP根据现如今人们的观影需求，将各个城市各个地区的影院信息呈现在用户眼前，方便了人们日常的娱乐活动，用户通过互联网了解影片信息和选择性购票能够很好地推动影片市场的加速发展，从而获得更好的票房成绩。1相关技术基于VUe的实时影片资讯APP以VUe渐进式框

14、架作为开发工具并完成了本次项目的开发工作，通过MVVM模式，单页面开发模式，数据发生改变，视图也会随之改变，使用AXiOS技术通过访问后端的接口获取网络上影片详细信息和影院详细信息的数据，将获取后的数据自动转化为json数据模式，以方便对数据的处理。本次项目的整体页面均采用HTML5+CSS3进行搭建并使用JaVaSCriPt进行页面的交互4,并且运用Vant-ui,Element-ui等UI库组件对页面进行二次美化，使之更加美观，用户体验更好。使用Mongodb数据库来创建新的数据表，并且存储用户信息用来模拟实现用户登录的效果。1.1 Vue框架这就不同于其他重量级的前端开发框架，VUe框架

15、是用于构建接口的渐进式的JS框架5。VUe框架的设计方面主要关注的点是从下到上逐渐发展，这就和其他的重量级前端开发框架不同，Vue核心库是只关注于视图层所以叫渐进式的JS框架。它拥有这操作简便和更加易于新手学习等特点，现有的库或已经写好的其他项目可以使用VUe框架进行集成，所以它并不影响之前所开发的代码。通过后端给的API接口去响应性的数据绑定和复合视图组件也可以使用VUe框架来实现，并使用VUe生态系统支持的单个文件组件和库，可以驱动开发和复杂的单页应用程序，即VUe可以自动响应数据中的更改，数据将会更改，视图的内容将会随着用户在代码中绑定的部分代码改变而随之发生变化。而这种代码改变视图随之

16、改变的绑定关系，就是VUe框架的双向绑定关系，用VUe中的input标签的VFiodel属性来实现双向绑定的，这也就是被称之为声明式渲染的模版引擎的VUe框架0。1.2 MVVMMVC模式是把数据模型和视图层进行分离的实施例代码7,控制器的存在主要是为了保证数据模型和视图层保持同步，如果数据发生了改变，视图层将会同时进行更新8。MVC模式注重模型的不变性，所以owe模式下的模型不依赖于视图，而依赖于模型。由于视图可以改变隐喻的业务逻辑，所以很难改变视图，至少业务逻辑不能再使用了。MVVM模式是一个性能更加优于MVC模式的9。但是实际上，只是两种模式中的代码位置发生了一些改变，MVVM模式与MVC模式并没有太大的区别。