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

目 录

摘 要 I
Abstract II
引 言 1
1 相关技术 3
1.1 Vue框架 3
1.2 MVVM 3
1.3 Mongodb数据库 4
1.4 Axios请求 4
1.5 H5、CSS3和JavaScript 5
1.6 本章小结 5
2 系统分析 7
2.1 功能需求 7
2.2 用例分析 7
2.3 用户功能 8
2.4本章小结 8
3 Vue影片票务服务APP设计 9
3.1 页面设计 9
3.1.1 登录界面 9
3.1.2 主界面 9
3.2 详细设计 10
3.2.1 数据库设计 10
3.2.2 数据处理 11
3.2.3 功能设计 11
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 资讯功能界面 17
4.3.5 个人中心界面 18
4.4 本章小结 20
5 基于Vue的实时影片资讯APP测试 21
5.1 测试计划 21
5.2 测试目的 21
5.3 测试用例 21
5.4 本章小结 22
结 论 23
参考文献 24
致 谢 26

摘 要

移动端APP在人们的生活可以提供更加便利的娱乐方式。和几个朋友去电影院一起看电影已经成为了人们日常生活娱乐中的不可缺少的娱乐方式，始终处于人们娱乐的消费浪潮之中，无论是寻找适合的影院还是获取实时的影片信息，都关系到人们的娱乐需求，本文针对当前存在的这种需求开发了基于Vue的实时影片资讯APP。
通过对影片行业的相关知识了解，充分考虑到用户以及影院等不同角度需求的相关因素，整体运用了Vue框架进行项目搭建，通过MVVM模式，运用axios技术进行网络数据的获取，选择H5和CSS3配合JavaScript进行页面的效果实现，并且引用了Vant-ui和element-ui等组件库，使得用户可视页面效果既舒适又美观。本设计的突出之处在于引用了百度地图功能，使得可以获取用户所在城市，并且用户可以通过的城市选择功能，有选择的查看某一地区的影院信息，方便用户的观影需求，并且在一定程度上降低了影院的运营成本。
本设计采用了Vue框架，MVVM模式以及axios调用网络接口等关键性技术使得项目具有操作方便。经过具体的编程实现及人员测试，基于Vue的实时影片资讯APP的各模块均已实现，并且投入使用，经使用证明，本文所设计的基于Vue的实时影片资讯APP具有可观赏性好和运行稳定的特点，能够满足用户以及影院的各方面需求。

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

Abstract

Mobile app can provide more convenient entertainment in people’s life. Going to the cinema with a few friends has become an indispensable way of entertainment in people’s daily life. It is always in the consumption wave of people’s entertainment. Whether it is to find a suitable cinema or to obtain real-time film information, it is related to people’s entertainment needs. In this paper, a real-time film information app based on Vue is developed for the current needs .
Through the understanding of the relevant knowledge of the film industry, fully consider the user requirements of related factors such as different angles and cinemas, the overall use of Vue framework for building project, through the MVVM pattern, use axios technology for network data acquisition, selection of H5 and CSS 3 cooperate with JavaScript in the effect of the page, and cited the Vant - UI and element - the UI component library, such as making the user page visual effect is both comfortable and beautiful.The outstanding point of this design is that it refers to the baidu map function, so that users can access the city, and users can select the city through the city function, selective view of a certain area of the theater information, convenient for users to watch the movie demand, and to some extent reduce the operating cost of the theater.
This design adopts the Vue framework, MVVM mode, axios call network interface and other key technologies to make the project easy to operate.After specific programming and personnel testing, all modules of the vue-based real-time movie information APP have been realized and put into use. It has been proved that the vue-based real-time movie information APP designed in this paper has the characteristics of good ornamental performance and stable operation, and can meet the needs of users and theaters in all aspects.

Keywords: Positioning; creative design; Access to Information; Vue

引 言

随着近年来互联网的飞速发展，移动端的应用APP也开始被广泛发展起来。对于电影院来说，传统的获客渠道已经不能满足当下的需求，而同时又受到同行的影响，所以将影院服务与手机App结合起来，是电影院未来发展的一个重要方向。通过实时影片资讯APP，用户能够更加便捷了解各个影院信息，获取最近一段时间比较热门的影片信息，大大的节约了在选择喜欢的影片上所花费的时间，本项目中更有正在热映影片信息的推荐以及即将上映影片信息的介绍，进一步解决了用户在选择观看影片是遇到的选择困难问题；而这对于电影院来说，用户不去电影院挑选购买电影，电影院滞留人群大大减少。相应的电影院极大的减少人工管理成本，增加影院知名度，极大提高影院的工作效率。
国内外的影片产业循序发展，对现如今中国的影片事业产生了积极影响[2]。在这种影片迅速发展的浪潮之下，每年每月几乎都会有非常受期待的影片上线，无论是当前热映还是即将上映的影片，都是影迷们的消费对象。
观看影片几乎可以说是当今社会人们娱乐的不可或缺的一部分，到如今中国影视行业足有一百余年的发展历史了，早些年人们看影片的方式只能是去各个电影院排队购票，费时耗力，而在互联网发展迅猛的今天，人们更加热衷于网上购票，网上购票大大解决了影院人工购票的压力，也为人们提供了便利，本项目致力于方便用户更容易的获影片信息和影院信息，更加贴合如今人们的生活方式。
本项目根据实际的需求将项目逐步实现的过程按照项目周期的方式来完成，分别为系统需求分析，系统概要分析，系统详细设计，编码实现以及项目测试几个阶段。本文设计的基于Vue的实时影片资讯APP的第1章简单的概括介绍了本项目所需要的相关技术[1]；基于Vue的实时影片资讯APP使用了当今前端极为火热的框架Vue进行项目搭建，并且使用了axios技术获取了众多网络数据，登录功能涉及Mongodb数据库存储用户信息，以H5和CSS3进行项目页面的设计，辅以JavaScript使得页面更具交互性，同时还应用了Vant-ui和element-ui组件库使得实现页面功能的同时还不缺少美观性。此外࿰