基于Vue移动端电影票务服务APP设计与实现计算机专业.docx

基于Vue移动端电影票务服务APP设计与实现计算机专业.docx

《基于Vue移动端电影票务服务APP设计与实现计算机专业.docx》由会员分享，可在线阅读，更多相关《基于Vue移动端电影票务服务APP设计与实现计算机专业.docx（48页珍藏版）》请在冰点文库上搜索。

基于Vue移动端电影票务服务APP设计与实现计算机专业

摘要

随着当今时代互联网的迅猛发展，手机APP已经成为人们娱乐生活中的重要手段，为人们的生活提供便利。

电影，作为人们日常生活娱乐中的

必需品，始终处于人们娱乐的消费浪潮之中，无论是寻找影院还是获取信息，都关系到人们的娱乐需求，本文针对当前存在的这种需求开发了基于Vue的电影票务服务APP。

通过对电影行业的相关知识了解，充分考虑到用户以及影院等不同角度需求的相关因素，整体运用了Vue框架进行项目搭建，通过Axios技术进行网络数据的获取，选择H5和CSS3配合JavaScript进行页面的效果实现，并且引用了Vant-ui和element-ui等组件库，使得用户可视页面效果既舒适又美观。

本设计的突出之处在于用户可以通过Map的城市选择功能，有选择的查看某一地区的影院信息及演出信息，方便用户的观影需求，并且在一定程度上降低了影院的运营成本。

本设计采用了Vue框架以及Axios调用网络接口等关键性技术使得项目具有可观赏性好，跨地区性强等特点。

此款手机APP产品设计主题突出、明确，整体色彩虽运用单色系列却不显现单调，界面风格整体统一，是一款人们值得拥有的娱乐型观影购票APP。

经过具体的编程实现及人员测试，基于Vue的电影票务服务APP的各模块均已实现，并且投入使用，经使用证明，本文所设计的基于Vue的电影票务服务APP具有可观赏性好和运行稳定的特点，能够满足用户以及影院的各方面需求。

关键词：

地点定位；创意设计；获取信息；Vue

Abstract

WiththerapiddevelopmentoftheInternet,mobileapphasbecomeanimportantmeansofentertainmentlife,providingconvenienceforpeople'slife.Film,astheentertainmentofpeople'sdailylife.Necessities,alwaysinthewaveofpeople'sentertainmentconsumption,whetherlookingforcinemasorobtaininginformation,arerelatedtopeople'sentertainmentneeds.ThispaperdevelopsamovieticketserviceappbasedonVue.

Throughtheunderstandingoftherelevantknowledgeofthefilmindustry,takingfullaccountoftherelevantfactorsoftheneedsofusersandcinemasfromdifferentperspectives,theVueframeworkisusedtobuildtheprojectasawhole,theAxiostechnologyisusedtoacquirethenetworkdata,H5andCSS3areselectedtocooperatewithJavaScripttoachievetheeffectofthepage,andthecomponentlibrariessuchasvantUIandelementUIarereferencedtomakethepageeffectvisibletousersThefruitiscomfortableandbeautiful.Thehighlightofthisdesignisthatuserscanselectivelyviewtheaterinformationandperformanceinformationinacertainareathroughthecityselectionfunctionofmap,whichisconvenientforusers'viewingneedsandreducestheoperatingcostofthetheatertoacertainextent.

Inthisdesign,thekeytechnologiessuchasVueframeworkandAxioscallnetworkinterfaceareusedtomaketheprojecthavethecharacteristicsofgoodappreciationandstrongcrossregional.Thedesignthemeofthismobileappisprominentandclear.Althoughtheoverallcolorissinglecolorseries,itdoesnotappearmonotonous,andtheinterfacestyleisunifiedasawhole.Itisanentertainmenttypemovieviewingandticketpurchasingappthatpeopledeservetoown.Afterspecificprogrammingandpersonneltesting,eachmoduleofVuebasedmovieticketingserviceapphasbeenimplementedandputintouse.Ithasbeenprovedthatthemovieticketingserviceappdesignedinthispaperhasthecharacteristicsofgoodappreciationandstableoperation,andcanmeettheneedsofusersandcinemasinallaspects.

Keywords:

Location;creativedesign;AccesstoInformation;Vue

引言

互联网的发展，不断的改变着人们的生活方式，也时刻影响着人们的娱乐需求。

电影是人们娱乐生活消费的必备品，于手机观影和线下观影对比，手机观影总是差些身临其境的感受，那在这种需求之下，开发一款能够获取电影信息和影院的APP变得必不可少。

本项目利用Axios获取网络接口，对各个城市各个地区的影院及演出信息进行信息化和可视化管理，从而极大的方便了用户的观影需求[1]。

电影服务行业在当今时代发展迅速，国内资本较为充裕，且外部资本投资电影行业的意愿强烈，这样就对高度依赖资本投入的电影行业形成了良好的发展环境，国内外的电影产业基金的积极参与，对现如今中国的电影事业产生了积极影响[2]。

在这种电影迅速发展的浪潮之下，每年每月几乎都会有非常受期待的电影上线，无论是当前热映还是即将上映的电影，甚至是经典电影，都是影迷们的消费对象。

观看电影几乎可以说是当今社会人们娱乐的必须项，中国的第一部电影放映于1896年，为西洋影戏，到如今，中国电影行业发展足有一百余年了[3]。

早些年人们看电影的方式是去电影院排队买票，费时耗力，而在互联网发展迅猛的今天，人们已经习惯于网络购票，网络购票大大降低了影院人工管理成本，也为人们提供了便利，本项目致力于方便用户更容易的获得电影和演出的信息，更加贴合如今人们的生活方式。

本项目根据实际需求将项目实现过程按照周期完成，分为系统需求分析，系统概要分析，系统详细设计，编码实现和项目测试几个阶段。

本文设计的基于Vue的电影票务服务APP的第1章概括性的介绍了所需要的相关技术[4]。

基于Vue的电影票务服务APP使用了当今前端极为火热的框架Vue的脚手架进行项目搭建，使用了Axios技术获取了众多网络接口，登录功能涉及Mongo数据库存储用户信息，以H5和CSS3进行项目页面的设计，辅以JavaScript使得页面更具交互性，同时还应用了众多组件库使得实现页面功能的同时还不缺少美观性。

此外，通过在谷歌浏览器安装Postman来测试数据是否能够获取；第2章，通过详细分析基于Vue电影票务服务APP所需要的功能，用例图的方式进行表述，使功能需求看起来更具条理和组织性，并根据需求分析做出模块划分；第3章，介绍了本APP的总体设计和各模块的功能设计；第4章，介绍了代码规范和Axios获取数据接口实现；第5章，进行了项目测试，项目测试是通过手机下载APK后，验证该APP是否满足用户需求以及在不同网速下，该APP是否能够正常运行；结论，总结了本文已经完成的功能，并且提出项目未来拓展和优化的可能性。

本APP根据现如今人们的观影需求，将各个城市各个地区的影院信息及演出信息呈现在用户眼前，方便了人们日常的娱乐活动，用户通过互联网了解电影信息和选择性购票能够很好地推动电影市场的加速发展，从而获得更好的票房成绩。

1相关技术

基于Vue的电影票务服务APP采用MVVM的设计模式，MVVM模式的全称为ModelViewViewModel，其侧重于事件驱动的UI平台的开发，即View的变化可以自动更新到ViewModel[5]。

以Vue作为开发工具并完成项目的开发工作，使用Axios技术获取网络电影信息和演出信息接口，使用Mongo数据库存储用户登录信息和验证码模拟发送，整体页面均采用H5+CSS3进行搭建并使用JavaScript进行页面的交互[6]。

1.1Vue框架

这就不同于其他重量级的前端开发框架，Vue框架是用于构建接口的渐进式的JS框架。

Vue框架的设计方面主要关注的点是从下到上逐渐发展，这就和其他的重量级前端开发框架不同，Vue核心库是只关注于视图层所以叫渐进式的JS框架。

它拥有这操作简便和更加易于新手学习等特点，现有的库或已经写好的其他项目可以使用Vue框架进行集成，所以它并不影响之前所开发的代码。

通过后端给的API接口去响应性的数据绑定和复合视图组件也可以使用Vue框架来实现，并使用Vue生态系统支持的单个文件组件和库，可以驱动开发和复杂的单页应用程序，即Vue可以自动响应数据中的更改，数据将会更改，视图的内容将会随着用户在代码中绑定的部分代码改变而随之发生变化。

而这种绑定关系，就是以input标签的v-model属性来声明的，因此Vue也被称为声明式渲染的模版引擎。

1.2数据库MongoDB

这是一种介于关系型数据库和非关系型数据库之间的产品，属于文档类型。

Mongo数据库支持非常松散的数据结构，类似于JSON格式，因此可以存储更复杂的数据类型。

Mongo数据库的主要特点是支持它的查询语言非常强大，该语言与面向对象的查询语言类似，在这种查询语言的支持下，Mongo几乎可以完成与关系数据库相似的大部分功能，具有模式自由、支持动态查询、支持完全索引、网络访问等优点。

1.3Axios请求

这是一种基于Promise的Http客户端，可以在浏览器和node.js中使用，

Axios非常适合前后端的数据交互，对于Vue框架而言，请求数据的方式还有一种vue-resource，但是vue-resource这种请求数据的方式已经不再更新了，且只支持浏览器端使用，而Axios可在浏览器和Node端都可以使用，这算是Vue开发者目前所能使用的最好的第三方工具。

与此之外，Axios还具有支持Promise、能拦截请求和响应请求、能转换请求和响应数据、自动转换JSON格式等优点。

1.4H5、CSS3和JavaScript

这三种是在现如今的前端Web开发工作中必不可缺的三大开发技术，三者搭配完成前端页面的渲染与交互。

H5不是一种新的语言，而是一次HTML的重大修改，HTML（超文本标记语言）是用于在Internet上显示Web页面的主要标记语言。

网页由HTML组成，用于通过Web浏览器显示文本，图像或其他资源[7]。

CSS3是CSS技术的升级版本，CSS（层叠样式表）是描述标记语言页面格式的标准，前端开发人员通过HTML和CSS可以搭建起固定页面，通过绑定id或者class类名，开发人员能够分离内容和可视元素，之后通过CSS改变页面的样式，从而达到美化页面的效果[8]。

JavaScript（JS）是一种具有函数优先的轻量级，解释型的，即时编译型的高级编程语言，其作为开发Web页面的脚本语言而出名[9]。

JavaScript常作为在HTML嵌入动态文本，读写HTML元素并做出页面交互，且可用于在数据被提交到服务器之前验证数据[10]。

1.5本章小结

以上介绍的就是基于Vue电影服务票务APP的相关技术，开发框架是前端目前最为火热的框架Vue，本项目的登陆功能以Mongo数据库进行模拟演示，使用H5、CSS3和JavaScript进行页面总体交互，使得页面更具美观性。

通过Axios进行调取网络接口和返回数据，除此之外还在Vue中加入了地图可视化Map，该功能可以让用户进行按城市和按地区查询，查询到的数据再以页面的样式呈现在用户眼前[11]。

2系统分析

2.1功能需求

本设计是针对当今人群观影需求设计的APP，我国近年来电影行业发展迅速，人们将看电影看做日常生活娱乐的一部分，通过对人们观影需求的调研与观察，深入剖析了人们观影的特点，最终将本项目划分为众多功能模块，每个模块都为观影人群提供不一样的服务与功能，在确保用户财产安全的情况下，最大程度的满足用户[12]。

用户打开APP，首先要进行登录，登录默认注册，通过调取Mongo数据库返回一个6位验证码，同时在登录模块进行众多正则化判断，如果用户所输入的手机号码和验证码不符合要求则不许登录。

用户登录成功后，进入首页，首页展示的是电影列表模块，同级展示影院列表模块，定位模块，演出列表模块，发现列表模块以及个人中心模块。

基于Vue电影票务服务APP需要向用户展示当前热映的电影，即将上映的电影和经典电影，这些功能设计都在电影列表模块。

影院模块向用户提供各个地区的影院信息，方便用户进行购票，购买商品等操作，这一部分的功能需要定位模块的支持，定位模块能让用户按照需求去查找对应城市的相关地区的影院[13]。

演出列表模块需要展示各个城市的明星演出及会馆演出的信息，该功能同样需要定位模块支持。

发现列表模块向用户提供时下的最新新闻，电影预告片以及电影榜单，方便用户获得需要的电影资讯。

个人中心模块方便用户对自己的信息进行管理，包括订单信息，优惠券信息，折扣卡信息等。

用户进入模块可操作每个模块特有的功能，每种功能都能展现设计部分的不一样类别与技术性的关联。

2.2用例分析

基于Vue电影票务服务APP展现给用户的功能有查看电影列表，查看电影详情，查看影院列表，查看影院详情，查看发现页，查看发现详情，查看演出页，查看演出详情，查看榜单，管理个人中心等操作功能[14]。

在这个功能体系中，用户所需要操作的功能模块均包含在登录模块中，用户只有登录后才能对其他的功能模块进行操作。

用户功能用例图如下图2.1所示。

图2.1基于Vue电影票务服务APP用户功能用例图

2.3用户功能

用户在登录进入APP后，APP向用户展示电影模块、影院模块、定位模块、发现模块、演出模块、个人中心模块，点击对应模块链接进入对应模块界面，电影模块展示当前热映、即将上映和经典电影，点击对应的电影进入对应的电影详情页，电影详情页展示电影的剧照、导演、演员和影评。

影院模块展示定位城市所有影院，在影院列表页可进行按需查找，点击可进入影院详情。

演出模块展示明星板块和定位城市所有演出信息[15]。

发现模块展示新闻板块，预告片板块，排行榜版块和影评版块。

个人中心模块展示电影订单，商品订单，折扣卡，优惠券，钱包等功能，且可在个人中心实现退出登录功能。

2.4本章小结

本章主要介绍的是基于Vue电影票务服务APP的需求分析，主要包括功能需求和用例分析。

用户成功登录打开APP进入主页面后，可以对APP进行操作，通过点击相应功能入口进入相应功能模块，每个模块内都有其相应的功能，且相互连接，这样对功能点的模块化设计在不影响APP正常使用的同时提高了程序的运行效率。

3基于Vue电影票务服务APP设计

3.1页面设计

由于本项目是手机移动端的APP，为了给用户一个良好的体验，就需要进行美观的页面设计，页面设计包括开场界面设计，登录界面设计和主界面的设计[16]。

3.1.1开场界面

用户启动APP时首先映入眼帘是一个开场页面，该页面需要展示APP名称，宣传标语和一些原画，所以设计了一个开场页面的图片，设计原型图和效果图如图3.1所示。

图3.1基于Vue电影票务服务APP开场原型图和效果图

3.1.2登录界面

本项目是移动端APP，用户想要使用功能需要登录，那就需要设计一个登录的页面，登录页面由Logo图和功能结构组成，设计原型图和效果图如图3.2所示。

图3.2基于Vue电影票务服务登录原型图和效果图

3.1.3主界面

用户登录APP后，需要给用户一个直观的展示页面（首页），在首页需要展示Logo图，宣传标语以及首页功能的结构，首页功能包括一个Tab标签栏，标签栏内展示首页的功能板块，且底部需要一个索引栏，索引栏展示跳转其他功能模块的链接，主界面尽可能的做到简洁美观，在不影响用户体验的同时又能方便用户直观的看出APP的功能设计。

设计的原型图和效果图如图3.3所示。

图3.3基于Vue电影票务服务主页面原型图

3.2功能结构

在基于Vue电影票务服务APP中，依据Axios获取的网络接口数据类别进行功能模块的划分。

用户登录APP后，可操作的模块功能大体分为查看电影信息，查看影院，查看演出信息，使用地图定位，查看发现信息以

及管理用户个人信息，设计总体功能组织结构如图3.4所示。

图3.4基于Vue电影票务服务APP总体功能组织结构图

3.2.1数据库设计

基于Vue电影票务服务APP实现模块功能的数据是由网络接口获取而来的，但是登录模块的功能需要数据库支持，于是进行了登录模块数据库的搭建，登陆功能的数据库中有登陆信息表，表中包含手机号类型，验证码类型，登陆时间，最后登录的时间四个字段[17]。

此表无外键。

具体信息如表3.1所示。

表3.1登录信息表

列名

数据类型（精度范围）

空/非空

约束条件

其它说明

ObjectId

INT（11）

NOTNULL

PRIMARY

手机号

PhoneCode

INT（11）

NOTNULL

UNIQUE

验证码

RegTime

VARCHAR（45）

NOTNULL

登录时间

LastTime

VARCHAR（45）

NOTNULL

最后登录时间

3.2.2功能设计

用户点击想要获取某城市影院信息，首先在city页面内查询城市，点击进入城市后会显示对应的城市的热映电影，并且默认显示当前城市的所有影院，用户通过按需查询后返回相应的影院列表，点击影院列表页可进入影院详情页，影院详情页展示当前商品（电影或其他商品）点击购买后添加到个人中心订单页[18]。

此部分功能如图3.5所示。

图3.5影院模块详解图

用户点击演出模块链接，路由跳转到演出页，演出页面获取某城市某明星演出或者博物馆等演出的信息，在定位该城市后，会返回演出信息，演出信息显示在该演出的详情页。

演出模块功能如图3.6所示。

图3.6演出模块详解图

用户点击发现模块链接，路由跳转到发现页面，发现页可以获取到国内外目前电影的新闻、预告片、排行榜、影评。

新闻板块展示国内外电影行业的信息，比如某影片的放映信息。

预告片版块展示当前即将上映的电影的预告，点击后会播放一段预告片。

排行榜版块展示各电影分类排行榜，点击进入对应排行榜后，会显示对应类别的影片排行，点击影片后可进入该影片详情。

影评版块展示网友对于某部电影的评论，用户可根据评论选择合适的影片观看，点击对应影评进入对应影评详情。

此部分功能如图3.7所示。

图3.7发现模块详解图

用户点击个人中心模块链接后，路由跳转到个人中心页面，个人中心页面展示的功能有电影订单，点击电影订单可进入电影订单详情页。

商品订单，点击商品订单进入商品订单详情。

折扣卡，点击折扣卡进入折扣卡的详情页。

优惠券，点击优惠券可进入优惠券的详情。

钱包，点击钱包可观测账户余额。

在右上角的功能版块里，包含有跳转首页，跳转演出页，疫情现状，退出登录等功能，点击疫情现状可跳转疫情Echarts图表，点击退出登录后，清除数据并返回登录页。

图3.8个人中心模块详解图

3.3本章小结

本章主要介绍的是基于Vue电影票务服务APP的功能设计，主要内容包括页面设计，登录数据库设计和功能设计，项目的功能都需要用户在登录后才能进行操作，通过运用功能详解图使得项目功能设计看起来更加直观，简单明了，方便用户对本项目有进一步的认知。

4基于Vue电影票务服务APP的实现

4.1开发环境

服务器端软件要求：

数据库服务器MongoDB，Web服务器，Node.js8或以上版本；客户端软件的要求：

操作系统为Windows7以上；浏览器为InternetExplorer6.0及以上[19]；开发工具为VisualStudioCode[20]。

4.2开发规范

开发规范的目的是为了提高工作效率，能够输出高质量的文档。

首先是命名规范，Vue文件的命名最好是小写且语义化，这样是方便出现报错时候能够直接找到报错的文件，命名最好为驼峰命名法，定义常量最好用大写，通过Axios请求数据的methods方法最好是以data结尾，因为通过网络获取的数据均输出res.data，全局引用的文件应从index.js导出在入口文件main.js导入，多个特性的元素应该分多行撰写，每个特性一行[21]。

元素特性的顺序方面，原生属性放在前面，指令放在后面。

最重要的是代码注释，在一个项目的后期维护中，代码注释尤其重要，因此要为每个复用组件创建组件的描述，并为组件的每个方法创建方法描述，注释是一行，而不是与代码相同的行，如果模块只有一个输出值，请使用导出默认值。

如果模块中有多个输出值，则不使用导出默认值，导出默认值不应与常规导出一起使用。

如果模块默认输出一个函数，则函数名的初始名称应以小写字母书写。

v-for必须添加一个键属性（钥匙），钥匙只在整个循环中使用。

v-for和v-if用于避免同时在一个元素中使用，以提高性能[22]。

在调试代码之后，调试输出的console.log（）一定要及时删除，不然在打包上线的时候会报错，从而影响代码运行，在页面交互之上，如果是能够用CSS能够解决的问题不要用JS解决，代码要适当优化简写，避免冗余，这样能够提高系统性能。

4.3核心功能

4.3.1地图定位模块

用户登录APP之后，可以通过地图定位查询全国所有城市所有地区的数据，将最近访问的城市信息以及热门城市信息进行系统的展示，同时该页面以字母图标划分展示全国所有城市，点击相应的字母就可以跳转相应字母开头的城市[23]。

如图4.1的所示。

图4.1地图定位界面

城市定位模块的主要功能就是进行城