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

目 录

摘 要....................................................................................................................I

Abstract.....................................................................................................................II

引 言 ...................................................................................................................1

1 相关技术 ...............................................................................................................3

1.1 Vue 框架 .........................................................................................................3

1.2 MVVM ............................................................................................................3

1.3 Mongodb 数据库 ............................................................................................4

1.4 Axios 请求 ......................................................................................................4

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.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

摘 要

移动端 APP 在人们的生活可以提供更加便利的娱乐方式。和几个朋友

去电影院一起看电影已经成为了人们日常生活娱乐中的不可缺少的娱乐方

式，始终处于人们娱乐的消费浪潮之中，无论是寻找适合的影院还是获取

实时的影片信息，都关系到人们的娱乐需求，本文针对当前存在的这种需

求开发了基于 Vue 的实时影片资讯 APP。

通过对影片行业的相关知识了解，充分考虑到用户以及影院等不同角

度需求的相关因素，整体运用了 Vue 框架进行项目搭建，通过 MVVM 模式，

运用 axios 技术进行网络数据的获取，选择 H5 和 CSS3 配合 JavaScript 进行

页面的效果实现，并且引用了 Vant-ui 和 element-ui 等组件库，使得用户可

视页面效果既舒适又美观。本设计的突出之处在于引用了百度地图功能，

使得可以获取用户所在城市，并且用户可以通过的城市选择功能，有选择

特点，能够满足用户以及影院的各方面需求。

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

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 .

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

随着近年来互联网的飞速发展，移动端的应用 APP 也开始被广泛发展

起来。对于电影院来说，传统的获客渠道已经不能满足当下的需求，而同

时又受到同行的影响，所以将影院服务与手机 App 结合起来，是电影院未

来发展的一个重要方向。通过实时影片资讯 APP，用户能够更加便捷了解

各个影院信息，获取最近一段时间比较热门的影片信息，大大的节约了在

以及即将上映影片信息的介绍，进一步解决了用户在选择观看影片是遇到

的选择困难问题；而这对于电影院来说，用户不去电影院挑选购买电影，

电影院滞留人群大大减少。相应的电影院极大的减少人工管理成本，增加

影院知名度，极大提高影院的工作效率。

国内外的影片产业循序发展，对现如今中国的影片事业产生了积极影

响

。在这种影片迅速发展的浪潮之下，每年每月几

乎都会有非常受期待的影片上线，无论是当前热映还是即将上映的影片，

都是影迷们的消费对象。

观看影片几乎可以说是当今社会人们娱乐的不可或缺的一部分，到如

完成，分别为系统需求分析，系统概要分析，系统详细设计，编码实现以

及项目测试几个阶段。本文设计的基于 Vue 的实时影片资讯 APP 的第 1 章

简单的概括介绍了本项目所需要的相关技术

[1]

；基于 Vue 的实时影片资讯

APP 使用了当今前端极为火热的框架 Vue 进行项目搭建，并且使用了 axios

技术获取了众多网络数据，登录功能涉及 Mongodb 数据库存储用户信息，

以 H5 和 CSS3 进行项目页面的设计，辅以 JavaScript 使得页面更具交互性，