基于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模式与MV

17、C模式并没有太大的区别。MVVM模式是将数据绑定工作的代码放入JS文件中来实现将用户可以看到的页面和开发人员开发的代码数据逻辑进行分离。而这个JS文件中的代码主要起到连接数据的功能。也就是说，使用MVVM开发项目通过将模型连接到Ul元素，代码可以减半。MVVM模式更方便的地方在于不方便手工更新和管理页面上所有场景的n个区域，即更改公共代码和更新多个页面。1.3 Mongodb数据库使用c+语言和其他的一些语言进行编写，解决了应用程序在开发的过程中出现的社区中的大量问题的面向文档的数据库管理系统，它的目的是为Web应用程序提供高性能数据存储的解决方案。Mongodb数据库创建表名以及存储数据的过

18、程中并不像其他数据库创建存储数据一样，首先应该在安装目录的bin目录下运行命令mongod-dbpath加路径开启数据库。之后创建数据库，并且向数据库中添加所需要的的数据。在Vue连接Mongodb数据库的过程中，首先要使用NodeJs进行连接Mongodb数据库，运行nodeSerVe.js,如果出现自己设置的显示连接成功的提示，则连接成功。1.4 Axios请求由于VUe、React等前端开发框架的出现，Jquery也就不在想以前那样被人们乐于使用了11。而Vue等前端开发框架的特点就是不需要直接操作DOM元素，也不需要引入JqUery,所以促使AXioS轻量级库的出现。对请求拦截，处理所

19、有api接口的公共参数，AXioS轻量级库是对AjaX的二次封装。Axios轻量级库可以在浏览器和node.js中使用，这是一种基于PromiSe的HttP客户端，非常适合前后端的数据交互的AXiOs,对于VUe框架而言，请求数据的方式还有一种vue-resource,但是vue-resource这种请求数据的方式只支持浏览器端使用，且已经不再更新了，这算是VUe开发者目前所能使用的最好的第三方工具AXiOS可在浏览器和Node端都可以使用12。通过后端获取的APi接口，通过AXioS进行访问以获取需要的数据访问到的数据类型可以直接转化为json数据类型，更加方便使用。之后将请求到的数据存储到

20、一个新的空数组中，在对数据进行使用的过程中，只需要使用空数组中的数据即可，通过v-for对数据进行遍历处理，结合Vam-Ui,Element-Ui等Ul库组件使之完美的呈现在用户界面。L5H5、CSS3和JaVaSCriPt这三种是在现如今的前端Web开发工作中必不可缺的三大开发技术，三者搭配完成前端页面的渲染与交互。H5不是一种新的开发语言，而是一次HTML的第五次重大修改，用于在Internet上显示Web页面的主要标记语言的HTML(超文本标记语言)13。通过Web浏览器显示文本，图像或其他资源，网页由HTML组成。开发人员只需使用HTML5语言标准进行移动应用程序编写开发进行一次程序编

21、写，就可以将其推广至各个操作系统平台，并且在多个操作系统平台进行该移动应用的编译，使用能够多平台运行的HTML5语言标准进行应用程序编写开发和编译的移动应用，与基于操作系统平台进行应用程序编写开发和编译的原生应用(NativeApp)而言，其在操作系统平台的移植上就存在着很大的优势14。CSS3是CSS技术的升级版本，CSS(层叠样式表)是描述标记语言页面格式的标准，前端开发人员通过HTML和CSS可以搭建起固定页面，通过绑定id或者class类名，开发人员能够分离内容和可视元素，之后通过CSS改变页面的样式，从而达到美化页面的效果15。JavaScript(JS)虽然它被称为网络脚本语言的发

22、展，但它也适用于各种浏览器环境。基于循环编程，支持目标定位、多模式动态脚本语言、命令和声明方式。原生开发的过程中，就是使用JaVaSCriPt(JS)进行项目的开发。JavaScript(JS)通常在HTML中插入动态文本，读取HTML元素，并在数据提交到用于验证数据的服务器之前进行页面对话16。1.6本章小结以上介绍的就是基于VUe的实时影片资讯APP的相关技术，前端开发框架是目前最为火热的框架Vue,本项目的登录功能以Mongodb数据库进行模拟演示，使用H5、CSS3和JavaScript进行页面总体交互，运用Vant-Ui和element-ui等组件库，使得页面更具美观性，通过AXio

23、S进行调取网络接口和返回数据，除此之外还在VUeI中加入了地图可视化Map,该功能可以让用户进行按城市和按地区查询，查询到的数据再以页面的样式呈现在用户眼前，并且可以点击侧边的首字母列表跳转到相应的城市列表，还可以对城市进行搜索，只需要输入首字母就可以进行相应的城市搜索。2系统分析1.1 功能需求基于VUe的实时影片资讯APP划分为众多功能模块，包含登录模块、影片列表模块、影院列表模块、定位模块、影片详情模块、影院详情模块。用户打开APP之后，首先要进行登录，登录默认注册，通过调取Mongodb数据库返回一个4位验证码，同时在登录模块进行众多正则化判断，如果用户所输入的手机号码和验证码不符合要

24、求则不许登录。用户成功登录后，首先进入首页，如果用户想要退出后再登录，则需进入个人中心模块的设置页中实现退出登录功能。用户登录成功后，展现首页的信息，首页包含正在热映的影片，即将上映的影片，并且点击相应的影片可以查看当前影片的详情等功能，同样的也展现众多其他功能模块可以让用户进行使用。登录模块、个人中心模块、影片模块、影院模块、定位模块、详情模块，每个模块之间都有其不一样的功能性类别和技术关联。1.2 用例分析用户打开APP先展示登录页面，此页面具有正则判断，用户输入手机号后触发正确的正则判断，之后点击获取验证码向后会弹出随机四位验证码，输入验证码后，用户点击登录，在判断Sessionstor

25、age和后台均存储用户信息后，实现登录。用户在登录后，首先展现给用户的是首页，同级展示影院页入口、演出页入口、资讯页入口和个人中心页入口8。首页展示影片列表，影片列表包括正在热映影片模块，即将上映影片模块，对应模块点击后跳转对应详情页。影院页入口点击后进入影院列表页，影院列表页实现按地区分类查询，返回对应影院列表，点击对应影院进入其详情页。资讯页入口点击后进入资讯列表，资讯页面展示最近的热门影片资讯，点击对应资讯可进入对应详情。个人中心入口点击后跳转到个人中心页面，该页面展示商品和影片订单、优惠券、钱包以及退出登录等功能。该部分用例图如下图2.1所示。彭州评情 迷在热领 持评情即得上族 电形f

26、_数院耀情能成判衰,形院用户墙试列索1资用I登录电网；！象年免订年E.*-I听会一修I我的i M二账D登7代密码安主密切设-软件活本颜见及油清丝缕存退出登录图2.1基于VUe的实时影片资讯APP的用例图1.3 用户功能用户在登录进入APP后,APP展示影片模块、影院模块、定位模块、资讯模块、个人中心模块，点击对应模块链接进入对应模块界面，影片模块展示当前热映、即将上映的影片列表19,点击对应的影片进入对应的影片详情页，影片详情页展示影片的剧照、导演、演员和影评。用户点击影院模块链接进入影院列表页，影院模块后，影院列表页可根据地区，进行有选择的查询对应地区的影院，并且点击相应影院后，可进入影院模

27、块的详情，影院详情页展示影院的具体信息。用户点击资讯链接进入资讯页面，资讯页面通过列表展示众多资讯，点击对应资讯进入该资讯的详情页，资讯详情页介绍了该影片资讯的详细信息和拍摄剧情。用户点击个人中心模块链接，可进入个人中心模块，个人中心模块页展示影片订单、商品订单、优惠券、组合红包、红包、设置、疫情，在页面点击对应的按钮可进行对应模块的跳转。最后设置页面有退出登录功能，用户点击退出登录后，会清除用户信息且跳转回登录页面20。2 .4本章小结本章主要介绍的是基于VUe的实时影片资讯APP的需求分析，主要包括功能需求和用例分析。用户成功登录打开APP进入主页面后，可以对APP进行操作，通过点击相应功

28、能入口进入相应功能模块，每个模块内都有其相应的功能，且相互连接，这样对功能点模块化设计在不影响APP正常使用的同时提高了程序的运行效率。3 Vue影片票务服务APP设计3.1 页面设计3.1.1 登录界面原型图顶部为logo,下面为登录的账号和验证码，底部为登录按钮。原型图如图3.3所示。效果图如图3.4所示。LOGOU”手机号码输入验证码获取验证码Q手机号验证码图3. 3实时影片资讯APP登录原型图图3. 4实时影片资讯APP登录效果图登录3.1.2主界面原型图为顶部为title,下面为Iogo和news,之后为City,titlel,title2,以及title3,之后是内容部分底部为菜单

29、栏。我设计的效果图为顶部是轮播图，轮播图下有两个按钮，之后是内容部分，底部是菜单栏。原型图如图3.5所示。效果图如图3.6所示。TitleLOGONEWSLcontent可 R22王直公N西研世册事之上期这上：耳115两额Qtytitleltile2titie3Bottomnavigation图3.5实时影片资讯APP主页面原型图图3.6实时影片资讯APP主页面效果图3.2 详细设计在基于VUe的实时影片资讯APP中，依据AXiOS获取的网络接口数据类别进行功能模块的划分，其中登录功能为数据库模拟登录21o3.2.1 数据库设计在基于VUe的实时影片资讯APP中有登录信息表，表中包含手机号类型

30、，验证码类型，登录时间，最后登录的时间四个字段。具体信息可以如表3.1所示。表3.1登录信息表列名数据类型（精度范围）空/非空约束条件其它说明ObjectIdINT（三）NOTNULLPRIMARY手机号phoneCodeINT（三）NOTNULLUNIQUE验证码regTimeVARCHAR(45)NOTNULL登录时间IastTimeVARCI1AR(45)NOTNULL最后登录时间3.2.2用户登录成功后，系统会通过后端获取的APi接口，通过AXioS进行访问以获取需要的数据，并且会将访问到的数据类型可以直接转化为json数据类型。将获取到的数据存放到一个空数组中，需要应用哪些数据，就将

31、相应的数据提取出来，运用到相应的位置。3.2.3 功能设计用户点击想要获取某城市影院信息，首先在city页面内查询城市，点击进入城市后会显示对应的城市的热映影片，并且默认显示当前城市的所有影院，用户通过按需查询后返回相应的影院列表，点击影院列表页可进入影院详情页，影院详情页展示当前商品（影片或其他商品）点击购买后添加到个人中心订单页22。此部分功能如图3.7所示。用户APP登录页fitiM.城市定位页全部影院列表独区影院刻表甫舄影院详情图3.7影院模块详解图用户点击资讯模块链接，路由跳转到资讯页，资讯页面获取最近上映的影片资讯的信息，在点击相应的资讯后，可以查看资讯信息23。资讯模块功能如图3

32、.8所示。图3.8资讯模块详解图用户点击个人中心模块链接后，路由跳转到个人中心页面，个人中心页面展示影片订单、商品订单、优惠券、组合红包、红包、设置，点击设置后可实现退出登录24。此部分功能如图3.10所示。用产特的 一T-,I,J *I普荣剧期儿广部U卖除卷楂古红名红格一的 ,量要更*wnOTCT盘自以容灭.场，弟殊核本曲前健存进出登录登裴密荷安全F图3.9个人中心模块详解图3.3本章小结本章主要介绍的是基于VUe的实时影片资讯APP的功能设计，主要内容包括登录数据库设计和功能点设计，通过运用功能详解图使得项目功能能够简单明了进行展示，方便用户看懂设计。4基于VUe的实时影片奥讯APP的实现

33、4.1 开发环境服务器端软件要求：数据库服务器Mongodb,Web服务器，Node.js8或以上版本；客户端软件的要求：操作系统为WindoWS7以上；浏览器为InternetExplorer6.0及以上；开发工具为ViSUaIStudioCodel25o4.2 开发规范开发规范的目的是为了提高工作效率，能够输出高质量的文档。首先是命名规范，VUe文件的命名最好是小写且语义化，这样是方便出现报错时候能够直接找到报错的文件，命名最好为驼峰命名法，定义常量最好用大写，通过AXiOS请求数据的methods方法最好是以data结尾，由于通过网络获取的数据均输出res.data,全局引用文件应该从i

34、ndex.js导出导入到条目文件main中。和多个功能部件的元素应该写在多行，每一个功能部件一个。元素属性的顺序方面，本机属性在前面，指令在后面。每个方法的评论应该是一个单独的行，而不是代码。vfor循环必须具有key属性，该属性在整个for循环中必须是惟一的，并且避免在同一个元素上使用vif和vfor,以提高性能26。调试完代码后，必须及时删除调试输出的ConSOle.log。，否则在打包上线时会报错，影响代码运行。在页面交互上，如果问题可以用CSS解决，不要用JS来解决。对代码进行优化，避免冗余，提高系统性能。4.3 核心功能4.4 3.1地图定位模块用户登录APP之后，可以通过地图定位查

35、询全国所有城市所有地区的数据，该页面展示全国所有城市，且可按字母跳转。如图4.1的所示。导酌城内-大兴安岭城号常倒IKM后公必火两。用地JtJbFh空件安史=ssIS*安建安事B北费薛连图4.1地图定位界面用户在登录APP后，点击对应城市名跳转到对应城市，并返回该城市的所有数据，核心代码如下。constlocation=initM叩(id,cb)letmapbj=newAMap.Map(id)mapObj.plugin(AMap.CitySearch,function)(实例化城市查询类varcitysearch=newAMap.CitySearch();自动获取用户IP,返回当前城市city

36、search.getLocalCity(0;AMap.event.addListener(citysearch,complete,funclion(result)if(result&result.city&result.bounds)varcityinfo=result.city;/console.log(当前城市是：，Cityinfo)利用回调函数将城市名称传递给调用的地方cb(cityinfo)；AMap.event.addListener(citysearch,error,function(result)console.log(result.infb);1);)；4.3.2影片列表界面在

37、用户登录到APP之后可以选择影片列表模块，该模块内展示正在热映影片板块、即将上映影片板块和经典影片板块，每个版块均可跳转到相应的详情页27。功能如图4.2和图4.3所示。属配人豆於Cil口P-U*技学警常图4.2影片列表版块功能图图4.3影片详情版块功能图在影片列表功能界面中，能看到当前热映、即将上映列表，列表实现按需加载，通过vfor实现对拿到的数据进行页面渲染。核心代码如下。获取正在热映的电影列表数据exportconstgetFilmLists=(params=)=if(!params.pageNum)params.pageNum=1if(!params.pageSize)params.

38、pageSize=10returnrequest(uH:/gateway?CityId=210100&pageNum=$params.pageNum&pageSize=$params.pageSize&type=lftk=6448834,data:xhostmall.film-ticket.film.list)获取即将上映的电影列表数据exportconstgetFiImList2s=(params=)=if(!params.pageNum)params.pageNum=1if(!params.pageSize)params.pageSize=10returnrequest(url:/gate

39、way?cityld=210100&pageNum=$parans.pageNum&pageSize=$params.pageSize&type=2Ak=6885787,data:Xhostfmall.film-ticket.film.list,)4.3.3影院列表界面在用户登录到APP之后，点击影院链接可使用影院功能，影院功能列表页可根据城市id查询到某城市内所有的影院，且在这个模块内能实现按需查找影院，并返回影院列表。象政生馅_APPir5547课耳型床集越北票关委门退功能如图4. 4和4. 5所示重既略AFrr 眼活员过4血 Tj（HlT1 港=JbT*-监*1发界地频机要步驶*纪出册地

40、都会参将中出古:*NE*-*-世者雪气得题遒研测/技北开ShHlm*if(!params.pageNum)params.pageNum=1if(!params.pageSize)params.pageSize=10returnrequest(url:7gateway?cityld=2101OO&ticketFlag=1&k=5926319,data:xhoscmall.film-ticket.cinema.listIi)获取影院详情exportconstgetCinemaDetail=(params)=console.log(params,12312312)returnrequesl(url:

41、/gateway?cinemald=Sparams.id;&k=6921227,data:xhostmall.film-ticket.film.cinema-show-film,fl)）4.3.4资讯功能界面用户登录APP之后，可以进入资讯界面，该界面展示最近的影片资讯功能，点击相应的资讯会进入相应的资讯详情页。如图4.6和事安的人一元尉遵2020和图4.7所示。充爱）和最爱的人一起晦进2020求理典新程子内降尊协Itt制的需隔器侵地共Gt）71343*8182*:=*在让却口山下日招了作下面寸作困维的大步R加收力.主侑刻行一化更的我同他血土康的离我三当十一位工事中修有性任JK乂理社需施不昔级

42、葭市般北份敏情十一空五曲打,能自理矩够姐作俗从红.崂化按击机北黛路甲月生的（事求州百）州科军术杳释有述 由 JiWiiN!承八理出H以基干骨肿的零码路班心 用笠分于拉降论事卫油顺衲竹河显篇利丽子图4. 6资讯界面图4.7资讯详情界面在这个界面，用户可以查看该影片的其他幕后信息，通过Axios请求数据后，返回的数据可以循环渲染此界面。核心功能代码如下。getunder()axios(url:7showmaoyanshmyshowajaxcelebrityVideoZqueryVipld=+this.ipid+(fesellChanncl=13&cityld=,+IhisxityId+fclng=

43、O/console.log(result.dala.data,99999);this.actorunder=resuk.data.data;if(!lhis.actorunder.length)this.noshow=true)；)4.3.5个人中心界面用户登录APP后可选择进入个人中心，个人中心展示电影订单、商品订单、卖座券、组合红包、红包、设置以及疫情界面。如图4.8、4.9所示。在康静电由红线C应设置坐情 m IOOO图4. 9疫情界面图4.8个人中心界面用户进入个人中心界面后，点击相应功能可以进入相应详情页该部分核心代码如下。script)importMzFooterfrom/comp

44、onents/Footer;exportdefaultdata()returnstate:“立即登录”，img:false,show1:true,),components：(MzFter,created()if(lalStorage.getltem(,token)this.img=true;if(localStorage.getltem(phone1)this.state=localStorage.getltem(phone1)this.showl=falsereturn)this.state=localStorage.getItem(phone,)this.showl=truconsole.

45、log(this.to.meta),updated(),methods:dada()/console.log(localStorage.getItem(,token),4.4本章小结本章详细介绍了基于VUe的实时影片资讯APP的几个核心功能的界面实现和代码实现，包括拓展功能echars图标在内的所有功能均从现实出发。根据界面截图介绍了功能的使用方法，通过代码的截图详细的介绍了功能如何实现以及部分方法的使用，截止于此，对于整个项目的实现已经基本完备，接下来需要进行测试的操作。5基于VUe的实时影片资讯APP测试5.1 测试计划本次的测试主要是通过对VUe框架，H5、CSS3的前端界面，以及AXioS获取接口的数据稳定性进行相关的测试，对基于VUe的实时影片