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

目 录

摘 要 I
Abstract II
引 言 1
1 相关技术 3
1.1 Vue框架 3
1.2 数据库MongoDB 3
1.3 Axios请求 3
1.4 H5、CSS3和JavaScript 4
1.5 本章小结 4
2 系统分析 5
2.1 功能需求 5
2.2 用例分析 5
2.3 用户功能 6
2.4本章小结 6
3 基于Vue电影票务服务APP设计 7
3.1 页面设计 7
3.1.1 开场界面 7
3.1.2 登录界面 7
3.1.3 主界面 8
3.2 功能结构 9
3.2.1 数据库设计 10
3.2.2 功能设计 10
3.3 本章小结 12
4 基于Vue电影票务服务APP的实现 13
4.1开发环境 13
4.2 开发规范 13
4.3 核心功能 13
4.3.1 地图定位模块 13
4.3.2 电影列表模块 15
4.3.3 影院列表模块 16
4.3.4 演出功能模块 19
4.3.5 发现功能模块 21
4.3.6 个人中心模块 26
4.4 本章小结 28
5 基于Vue电影票务服务APP测试 29
5.1 测试计划 29
5.2 测试目的 29
5.3 测试用例 29
5.3.1 登录测试 29
5.3.2 城市定位测试 30
5.3.3 影院列表模块测试 30
5.4 压力测试 31
5.5 本章小结 32
结 论 33
致 谢 34
参考文献 35

摘 要

随着当今时代互联网的迅猛发展，手机APP已经成为人们娱乐生活中的重要手段，为人们的生活提供便利。电影，作为人们日常生活娱乐中的
必需品，始终处于人们娱乐的消费浪潮之中，无论是寻找影院还是获取信息，都关系到人们的娱乐需求，本文针对当前存在的这种需求开发了基于Vue的电影票务服务APP。
通过对电影行业的相关知识了解，充分考虑到用户以及影院等不同角度需求的相关因素，整体运用了Vue框架进行项目搭建，通过Axios技术进行网络数据的获取，选择H5和CSS3配合JavaScript进行页面的效果实现，并且引用了Vant-ui和element-ui等组件库，使得用户可视页面效果既舒适又美观。本设计的突出之处在于用户可以通过Map的城市选择功能，有选择的查看某一地区的影院信息及演出信息，方便用户的观影需求，并且在一定程度上降低了影院的运营成本。
本设计采用了Vue框架以及Axios调用网络接口等关键性技术使得项目具有可观赏性好，跨地区性强等特点。此款手机APP产品设计主题突出、明确，整体色彩虽运用单色系列却不显现单调，界面风格整体统一，是一款人们值得拥有的娱乐型观影购票APP。经过具体的编程实现及人员测试，基于Vue的电影票务服务APP的各模块均已实现，并且投入使用，经使用证明，本文所设计的基于Vue的电影票务服务APP具有可观赏性好和运行稳定的特点，能够满足用户以及影院的各方面需求。

关键词：地点定位；创意设计； 获取信息； Vue

Abstract

With the rapid development of the Internet, mobile app has become an important means of entertainment life, providing convenience for people’s life. Film, as the entertainment of people’s daily life. Necessities, always in the wave of people’s entertainment consumption, whether looking for cinemas or obtaining information, are related to people’s entertainment needs. This paper develops a movie ticket service app based on Vue.
Through the understanding of the relevant knowledge of the film industry, taking full account of the relevant factors of the needs of users and cinemas from different perspectives, the Vue framework is used to build the project as a whole, the Axios technology is used to acquire the network data, H5 and CSS3 are selected to cooperate with JavaScript to achieve the effect of the page, and the component libraries such as vant UI and element UI are referenced to make the page effect visible to users The fruit is comfortable and beautiful. The highlight of this design is that users can selectively view theater information and performance information in a certain area through the city selection function of map, which is convenient for users’ viewing needs and reduces the operating cost of the theater to a certain extent.
In this design, the key technologies such as Vue framework and Axios call network interface are used to make the project have the characteristics of good appreciation and strong cross regional. The design theme of this mobile app is prominent and clear. Although the overall color is single color series, it does not appear monotonous, and the interface style is unified as a whole. It is an entertainment type movie viewing and ticket purchasing app that people deserve to own. After specific programming and personnel testing, each module of Vue based movie ticketing service app has been implemented and put into use. It has been proved that the movie ticketing service app designed in this paper has the characteristics of good appreciation and stable operation, and can meet the needs of users and cinemas in all aspects.

Keywords: Location; creative design; Access to Information; 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模式的全称为Model View View Model，其侧重于事件驱动的UI平台的开发，即View的变化可以自动更新到ViewModel[5]。以Vue作为开发工具并完成项目的开发工作，使用Axios技术获取网络电影信息和演出信息接口，使用Mongo数据库存储用户登录信息和验证码模拟发送，整体页面均采用H5+CSS3进行搭建并使用JavaScript进行页面的交互[6]。
1.1 Vue框架
这就不同于其他重量级的前端开发框架，Vue框架是用于构建接口的渐进式的JS框架。Vue框架的设计方面主要关注的点是从下到上逐渐发展，这就和其他的重量级前端开发框架不同࿰