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

目录TOC\o"1-3"\h\u7350摘要 的电影票务服务APP的第1章概括性的介绍了所需要的相关技术REF_Ref41134817\r\h[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的变化可以自动更新到ViewModelREF_Ref41134871\r\h[5]。以Vue作为开发工具并完成项目的开发工作，使用Axios技术获取网络电影信息和演出信息接口，使用Mongo数据库存储用户登录信息和验证码模拟发送，整体页面均采用H5+CSS3进行搭建并使用JavaScript进行页面的交互REF_Ref41134913\r\h[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浏览器显示文本，图像或其他资源REF_Ref41134946\r\h[7]。CSS3是CSS技术的升级版本，CSS（层叠样式表）是描述标记语言页面格式的标准，前端开发人员通过HTML和CSS可以搭建起固定页面，通过绑定id或者class类名，开发人员能够分离内容和可视元素，之后通过CSS改变页面的样式，从而达到美化页面的效果REF_Ref41134975\r\h[8]。JavaScript（JS）是一种具有函数优先的轻量级，解释型的，即时编译型的高级编程语言，其作为开发Web页面的脚本语言而出名REF_Ref41135015\r\h[9]。JavaScript常作为在HTML嵌入动态文本，读写HTML元素并做出页面交互，且可用于在数据被提交到服务器之前验证数据REF_Ref41135050\r\h[10]。1.5本章小结以上介绍的就是基于Vue电影服务票务APP的相关技术，开发框架是前端目前最为火热的框架Vue，本项目的登陆功能以Mongo数据库进行模拟演示，使用H5、CSS3和JavaScript进行页面总体交互，使得页面更具美观性。通过Axios进行调取网络接口和返回数据，除此之外还在Vue中加入了地图可视化Map，该功能可以让用户进行按城市和按地区查询，查询到的数据再以页面的样式呈现在用户眼前REF_Ref41135164\r\h[11]。

2系统分析2.1功能需求本设计是针对当今人群观影需求设计的APP，我国近年来电影行业发展迅速，人们将看电影看做日常生活娱乐的一部分，通过对人们观影需求的调研与观察，深入剖析了人们观影的特点，最终将本项目划分为众多功能模块，每个模块都为观影人群提供不一样的服务与功能，在确保用户财产安全的情况下，最大程度的满足用户REF_Ref41135192\r\h[12]。用户打开APP，首先要进行登录，登录默认注册，通过调取Mongo数据库返回一个6位验证码，同时在登录模块进行众多正则化判断，如果用户所输入的手机号码和验证码不符合要求则不许登录。用户登录成功后，进入首页，首页展示的是电影列表模块，同级展示影院列表模块，定位模块，演出列表模块，发现列表模块以及个人中心模块。基于Vue电影票务服务APP需要向用户展示当前热映的电影，即将上映的电影和经典电影，这些功能设计都在电影列表模块。影院模块向用户提供各个地区的影院信息，方便用户进行购票，购买商品等操作，这一部分的功能需要定位模块的支持，定位模块能让用户按照需求去查找对应城市的相关地区的影院REF_Ref41135212\r\h[13]。演出列表模块需要展示各个城市的明星演出及会馆演出的信息，该功能同样需要定位模块支持。发现列表模块向用户提供时下的最新新闻，电影预告片以及电影榜单，方便用户获得需要的电影资讯。个人中心模块方便用户对自己的信息进行管理，包括订单信息，优惠券信息，折扣卡信息等。用户进入模块可操作每个模块特有的功能，每种功能都能展现设计部分的不一样类别与技术性的关联。2.2用例分析基于Vue电影票务服务APP展现给用户的功能有查看电影列表，查看电影详情，查看影院列表，查看影院详情，查看发现页，查看发现详情，查看演出页，查看演出详情，查看榜单，管理个人中心等操作功能REF_Ref41135228\r\h[14]。在这个功能体系中，用户所需要操作的功能模块均包含在登录模块中，用户只有登录后才能对其他的功能模块进行操作。用户功能用例图如下图2.1所示。图2.1基于Vue电影票务服务APP用户功能用例图2.3用户功能用户在登录进入APP后，APP向用户展示电影模块、影院模块、定位模块、发现模块、演出模块、个人中心模块，点击对应模块链接进入对应模块界面，电影模块展示当前热映、即将上映和经典电影，点击对应的电影进入对应的电影详情页，电影详情页展示电影的剧照、导演、演员和影评。影院模块展示定位城市所有影院，在影院列表页可进行按需查找，点击可进入影院详情。演出模块展示明星板块和定位城市所有演出信息REF_Ref41135246\r\h[15]。发现模块展示新闻板块，预告片板块，排行榜版块和影评版块。个人中心模块展示电影订单，商品订单，折扣卡，优惠券，钱包等功能，且可在个人中心实现退出登录功能。2.4本章小结本章主要介绍的是基于Vue电影票务服务APP的需求分析，主要包括功能需求和用例分析。用户成功登录打开APP进入主页面后，可以对APP进行操作，通过点击相应功能入口进入相应功能模块，每个模块内都有其相应的功能，且相互连接，这样对功能点的模块化设计在不影响APP正常使用的同时提高了程序的运行效率。3基于Vue电影票务服务APP设计3.1页面设计由于本项目是手机移动端的APP，为了给用户一个良好的体验，就需要进行美观的页面设计，页面设计包括开场界面设计，登录界面设计和主界面的设计REF_Ref41135263\r\h[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实现模块功能的数据是由网络接口获取而来的，但是登录模块的功能需要数据库支持，于是进行了登录模块数据库的搭建，登陆功能的数据库中有登陆信息表，表中包含手机号类型，验证码类型，登陆时间，最后登录的时间四个字段REF_Ref41135338\r\h[17]。此表无外键。具体信息如表3.1所示。表3.1登录信息表列名数据类型（精度范围）空/非空约束条件其它说明ObjectIdINT(11)NOTNULLPRIMARY手机号PhoneCodeINT(11)NOTNULLUNIQUE验证码RegTimeVARCHAR(45)NOTNULL登录时间LastTimeVARCHAR(45)NOTNULL最后登录时间3.2.2功能设计用户点击想要获取某城市影院信息，首先在city页面内查询城市，点击进入城市后会显示对应的城市的热映电影，并且默认显示当前城市的所有影院，用户通过按需查询后返回相应的影院列表，点击影院列表页可进入影院详情页，影院详情页展示当前商品（电影或其他商品）点击购买后添加到个人中心订单页REF_Ref41135363\r\h[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及以上REF_Ref41135445\r\h[19]；开发工具为VisualStudioCodeREF_Ref41135449\r\h[20]。4.2开发规范开发规范的目的是为了提高工作效率，能够输出高质量的文档。首先是命名规范，Vue文件的命名最好是小写且语义化，这样是方便出现报错时候能够直接找到报错的文件，命名最好为驼峰命名法，定义常量最好用大写，通过Axios请求数据的methods方法最好是以data结尾，因为通过网络获取的数据均输出res.data，全局引用的文件应从index.js导出在入口文件main.js导入，多个特性的元素应该分多行撰写，每个特性一行REF_Ref41135481\r\h[21]。元素特性的顺序方面，原生属性放在前面，指令放在后面。最重要的是代码注释，在一个项目的后期维护中，代码注释尤其重要，因此要为每个复用组件创建组件的描述，并为组件的每个方法创建方法描述，注释是一行，而不是与代码相同的行，如果模块只有一个输出值，请使用导出默认值。如果模块中有多个输出值，则不使用导出默认值，导出默认值不应与常规导出一起使用。如果模块默认输出一个函数，则函数名的初始名称应以小写字母书写。v-for必须添加一个键属性（钥匙），钥匙只在整个循环中使用。v-for和v-if用于避免同时在一个元素中使用，以提高性能REF_Ref41135507\r\h[22]。在调试代码之后，调试输出的console.log()一定要及时删除，不然在打包上线的时候会报错，从而影响代码运行，在页面交互之上，如果是能够用CSS能够解决的问题不要用JS解决，代码要适当优化简写，避免冗余，这样能够提高系统性能。4.3核心功能4.3.1地图定位模块用户登录APP之后，可以通过地图定位查询全国所有城市所有地区的数据，将最近访问的城市信息以及热门城市信息进行系统的展示，同时该页面以字母图标划分展示全国所有城市，点击相应的字母就可以跳转相应字母开头的城市REF_Ref41135535\r\h[23]。如图4.1的所示。图4.1地图定位界面城市定位模块的主要功能就是进行城市定位，方便用户进行各城市演出及影院信息的筛选，其核心代码如下。const

location

=

{

initMap(id){

let

mapObj

=

new

AMap.Map(id)

let

promise1

=

new

Promise(function(reslove,reject){

mapObj.plugin(["AMap.CitySearch"],

function()

{

//实例化城市查询类

var

citysearch

=

new

AMap.CitySearch();

//自动获取用户IP，返回当前城市

citysearch.getLocalCity();

AMap.event.addListener(citysearch,

"complete",

function(result){

if(result

&&

result.city

&&

result.bounds)

{

var

cityinfo

=

result.city

reslove({name:cityinfo})

}

});

AMap.event.addListener(citysearch,

"error",

function(result){reject();});

});

})

return

promise1

}}4.3.2电影列表模块在用户登录到APP之后可以选择电影列表模块，该模块内展示正在热映电影板块、即将上映电影板块和经典电影板块，功能如图4.2所示。图4.2电影列表版块功能图电影列表模块内的所有功能版块均可跳转对应电影详情页，功能如图4.3所示。图4.3电影详情版块功能图4.3.3影院列表模块在用户登录到APP之后，点击影院链接可使用影院功能模块，在影院功能列表页可根据城市id查询到某城市内所有的影院，并将查询到的影院以列表方式展示，功能如图4.4所示。图4.4影院列表界面影院功能列表页有按需查找功能，用户可以按城区和品牌进行查找，功能如图4.5所示。图4.5按需查找界面影院列表模块的核心功能是用户可以进行按需查找，用户可根据区域和品牌进行影院的查询，查询到的影院重新渲染到页面中，其核心代码如下所示。getregion()

{

this.cityId

=

localStorage.cityId;

Axios({

url:

`/myapi/ajax/filterCinemas?ci=`

+

this.cityId

+

`&optimus_uuid=44454B40020711EA918795B2EA2BD1267BBABE025C5A42F5A426AC05A883E9AE&optimus_risk_level=71&optimus_code=10`,

methods:

"get"

}).then(res

=>

{

//

console.log(res.data.district.subItems);

this.region

=

res.data.district.subItems;

this.brand

=

res.data.brand.subItems;

//

console.log(this.region)

//

获取地区

let

getcity

=

{

text:

"",

value:

"",

countryId:

""

};

for

(var

i

=

0;

i

<

this.region.length;

i++)

{

getcity.text

=

this.region[i].name;

getcity.value

=

i

+

1;

getcity.countryId

=

this.region[i].id;

this.option1.push(getcity);

getcity

=

{};

}

let

b

=

this.option1;

this.option1.splice(0,

2,

{

text:

b[0].text,

value:

b[0].value,

countryId:

b[1].countryId

});4.3.4演出功能模块在用户登录到APP之后可以选择演出功能模块，演出功能模块与城市定位相关联，点击相应城市即可展示相应城市的演出模块界面，该模块分为搜索栏，明星大咖和为你推荐三个功能板块，明星大咖功能板块以swiper轮播图进行展示，左右滑动可展示更多明星头像，点击明星头像即可进入相应明星的详情页，详情页展示明星的演出信息和热火的MV，为你推荐则是以瀑布流进行展示，为你推荐展示各大演出场馆的演出信息，此部分功能如图4.6所示。图4.6演出界面用户点击搜索进入搜索界面，在输入框内输入想要查询的明星，点击搜索即可在下面返回明星信息，点击搜索到的明星信息即可跳转到相应明星的详情页，此部分功能如图4.7所示。图4.7搜索明星界面演出界面的搜索功能实现了对明星信息的一个按需查询，通过Axios请求数据后，返回的数据可以渲染此界面，其核心功能代码如下。

getunder()

{

Axios({

url:

`/show/maoyansh/myshow/ajax/celebrityVideo/query?ipId=`

+

this.ipid

+

`&sellChannel=13&cityId=`

+

this.cityId

+

`&lng=0&lat=0`,

method:

"get"

}).then(result

=>

{

//

console.log(result.data.data,

99999);

this.actorunder

=

result.data.data;

if(!this.actorunder.length){

this.noshow

=

true

}

});

}

}4.3.5发现功能模块用户登录APP后可以选择点击发现功能链接进入发现功能模块，该模块具有四个板块，分别为新闻板块，预告片板块，排行版块和影评版块，新闻板块展示当前电影行业一手新闻，点击进入对应新闻详情，功能如图4.8所示。图4.8发现界面新闻板块这部分的功能是展示当前电影行业一手新闻，点击之后进入新闻版块的详情。该部分核心功能代码如下。getnewslist()

{

this.pageIdex

+=

1;

Axios({

url:

`/shiguang/Service/callback.mi/News/NewsList.api?t=202043015372178630&pageIndex=`

+

this.pageIdex,

methods:

"get"

}).then(res

=>

{

this.newslist

=

this.newslist.concat(res.data.newsList);

});

},

addnewslist()

{

this.getnewslist();

},

finddetail(id)

{

this.$router.push({

path:

`/find/movie/${id}`

});

}发现功能模块内有预告片板块，该版块的功能是展示电影的预告片，点击预告片可进行播放，该部分功能如图4.9所示。图4.9发现界面预告片板块这部分的功能是用户可以点击播放相应的预告片，该部分核心代码如下。gettrailerlist()

{

this.pageIdex

+=

1;

Axios({

url:

`/findtrailer/discovery/trailerList.api?t=20205214262824023¶m=`

+

this.pageIdex,

methods:

"get"

}).then(res

=>

{

//

console.log(res.data.data.trailers);

this.trailerlist

=

res.data.data.trailers;

});

},

showtrailer(url,name){

this.show

=

true;

this.URL

=

url;

this.Name

=

name;

},

shut(){

this.show

=

false;

}发现功能模块内有排行榜板块，该版块的功能是展示众多电影排行榜，用户可以点击排行榜查看各大电影类别排行，点击进入对应类别排行榜，该部分如图4.10所示。图4.10发现界面排行榜板块这部分的功能是用户可以点击相应类别排行，该功能展示相应的排行电影列表，在排行列表中点击电影后，会跳转相应电影的详情页，详情页展示电影的具体信息。其功能核心代码如下。methods:

{

gettoplist()

{

this.pageI

+=

1;

Axios({

url:

`/shiguang/Service/callback.mi/TopList/TopListOfAll.api?t=2020521839558306&pageIndex=`

+

this.pageI,

methods:

"get"

}).then(res

=>

{

//

console.log(res.data);

this.toplist

=

this.toplist.concat(res.data.topLists);

});

},

addlist(){

this.gettoplist()

},

finddetail(id,type){

this.$router.push({

path:

`/find/toplist/${id}/${type}`

});

}其中详情页可发生电影资讯跳转，其功能核心代码如下。godetail(id){this.$router.push({path:`/movie/${id}`});},goback(){this.$router.go(-1);}发现功能模块内有影评板块，该版块的功能是展示影迷们对电影的评论以及评分，用户点击影评版块后，将当前最新的影评信息置顶，依次向下按时间倒序排列，通过评分，用户可以直观的看出某部电影的众多影迷的好感度，从而能够对一部电影进行简单的好坏判断，点击相应影评后，可进入相应影评的详情页，详情页展示影迷的完整影评，用户可根据完整的影评，对一部电影有更深的了解，影评详情页面可点击跳转至电影详情，此部分功能如图4.11所示。图4.11发现界面影评板块4.3.6个人中心模块 用户登录APP后可选择进入个人中心模块，个人中心展示用户订单、优惠券、折扣卡、钱包等功能，点击右上角按钮可选择跳转其他功能模块及对应界面，本界面还可跳转当前全国疫情Echarts图表，该图表展示当前全国疫情累计确诊人数，此部分功能该如图4.12所示。图4.12个人中心界面和Echarts全国疫情图用户进入个人中心界面后，点击疫情现状可进入全国疫情Echarts图表，该图表展示全国疫情图，此部分核心代码如下。export

default

{

name:

'HelloWorld',

components:{

Head

},

mounted

()

{

this.getData()

this.mycharts

=

echarts.init(this.$refs.mapbox)

//

初始化echarts

this.mycharts.setOption(option)

},

methods:

{

getData

()

{

jsonp('/news/wap/fymap2020_data.d.jsonp?_=1580892522427',

{},

(err,

data)

=>

{

if

(!err)

{

//

console.log(data)

let

list

=

data.data.list.map(item

=>

({name:

,

value:

item.value}))

option.series[0].data

=

list

this.mycharts.setOption(option)

//

echarts初始化的前提是dom渲染完成

}

})

},

goback()

{

this.$router.go(-1);

}

}}4.4本章小结本章详细介绍了基于Vue电影服务票务APP的几个核心功能的界面实现和代码实现，包括拓展功能Echarts图在内的所有功能均从现实出发。根据界面截图介绍了功能的使用方法，通过代码的截图详细的介绍了功能如何实现以及部分方法的使用，截止于此，对于整个项目的实现已经基本完备，接下来需要进行测试的操作。5基于Vue电影票务服务APP测试5.1测试计划本次的测试主要是通过对Vue框架，H5、CSS3的前端界面，以及Axios获取接口的数据稳定性进行相关的测试，对基于Vue电影票务服务APP进行检查REF_Ref41135562\r\h[24]。5.2测试目的为了增加用户的体验感，在使用之前都要对软件进行测试，以便达到更好的体验性，也是防止了软件在使用过程中出现不必要的问题，由此对项目进行漏洞检测，能够提高实用性。5.3测试用例为了保证测试的准确性，选取了最具代表性的几个模块进行用例测试，选取了登录模块进行登录测试，选取城市定位模块进行定位测试，选取影院列表模块进行按需查找测试。5.3.1登录测试对于登录测试的计划分为两个阶段，一是输入正确的手机号与验证码后，进行的行为操作，测试通过该手机号是否能进入首页；二是输入不正确的手机号或验证码进行的行为操作，测试通过该手机号是否能实现成功登录，进入首页。登录测试用例如表5.1所示。表5.1登录测试用例表用例编号操作输入数据预期结果实际结果5.1-1输入准确无误的手机号格式11位数字手机号成功发送验证码成功发送验证码5.1-2输入错误手机号格式输入任意格式Tip提示，请输入正确手机号Tip提示，请输入正确手机号5.1-3输入正确手机号和验证码11位手机号和数据库返回的6位正确验证码登录成功登录成功，进入首页5.1-4输入不正确的手机号或者验证码错误手机号或者错误验证码登录失败，Tip提示手机号或验证码有误登录失败，Tip提示手机号或验证码有误测试结果是登录功能成立，如果用户输入的信息准确无误，便可以从数据库返回一个6位验证码，用户输入验证码后就可以成功登录。相反的，如果有一条输入内容不符合规范，则会提示信息输入有误，不许登录。5.3.2城市定位测试城市定位测试进行了当前定位城市的测试和返回目的城市数据的测试，测试计划是点击定位模块，观察是否定位当前所在城市以及点击对应城市是否能够将对应城市数据展示。城市定位测试用例如表5.2所示。表5.2城市定位测试用例表用例编号操作预期结果实际结果5.2-1点击城市定位是否置顶展示当前定位城市置顶展示当前定位城市置顶展示当前定位城市5.2-2点击对应城市是否获取对应城市将对应城市数据返还成功获取对应城市数据测试结果是城市定位模块能够实现所需定位功能，当用户点击定位模块，默认为当前定位城市，点击其他城市名，跳转至相应的城市，并将数据返回。5.3.3影院列表模块测试影院列表测试进行对当前定位城市影院的数据展示，测试计划是进入影院列表默认展示当前城市所有影院，按照地区查询返回对应地区影院，按照品牌查询返回对应品牌影院，按照区和品牌查找返回对应影院。影院列表模块测试用例如表5.3所示。表5.3影院列表模块测试用例表用例编号操作预期结果实际结果5.3-1点击进入影院列表页展示当前定位城市所有影院成功展示当前定位城市所有影院5.3-2点击按区名查找展示对应地区的所有影院成功展示对应地区的所有影院5.3-3点击按品牌查找展示对应品牌的所有影院成功展示对应品牌的所有影院5.3-4点击按区名查找后，点击按品牌查找展示对应地区该品牌的所有影院成功展示对应地区该品牌的所有影院测试的结果是，在刚进入影院列表页时，影院列表页默认展示当前定位城市所有的影院，按照需求查找后，则返回所需地区的影院和所需品牌的影院。5.4压力测试压力测试是为了测试基于Vue电影票务服务APP的瓶颈以及最大使用极限，模拟一定数量的用户的并发访问，测试基于Vue电影票务服务APP是否满足实际应用。首先进行测试软件的下载以及安装，选择Apache-JMeter5.1.1的版本进行安装，语言种类为中文。如图5.1所示。图5.1压力测试软件首页基于Vue电影票务服务APP使用了ApacheJMeter进行压力测试，添加一个线程组，并且把线程数设置为1200，含义为模拟出来1200个用户在同时使用本APP，最终显示出样本数目为1200，中值为563，平均值为641，最新样本为174ms，偏离值为263，吞吐量为253.629/分钟，测试结果比较稳定。最终压力测试结果如图5.2所示。图5.2基于Vue电影票务服务APP压力测试5.5本章小结进行相关功能的测试及其稳定性的系统功能，提高使用的可行性，增强测试效果，将各种功能模块进行划分，提高整个系统的稳定性，此章节概括性的进行了APP的功能测试REF_Ref41135585\r\h[25]。结论在本次的毕业设计经历中，本人将自己大学生涯所学以及实习所学的前端知识，全部应用到了毕业设计之中，并且通过自己不断的摸索，添加了少许新功能。随着毕业设计作品的完成，本人也明显感觉到自己在这方面的进步，每完成一个功能都会理解到底是哪里知识没有掌握好，在做毕业设计中，本人不止对代码熟悉了许多，多Mongo数据库的操作也更加熟练，在设计中遇到的难题，通过网络查找和自己的不断尝试都能够慢慢解决，这种逐步提升自己能力的感觉，真的是有一种说不出来的成就感。做的功能越多，就代表遇到的麻烦也就越多，在本次毕业设计当中自己所写的程序频繁报错，有很多报错都是在设计之前没有接触过的。所以在看到这些错误提示的时候，都觉得这是对自我的一种挑战，慢慢的讲这些错误解决掉，代码页面越来越清晰，待会觉得对得起这么长时间的付出。只有自己认真的做过，才能够懂的这其中的辛苦和快乐，这种披荆斩棘的精神，也将会是本人今后工作的宝贵财富。毕业设计不仅是对大学生涯所学知识的一种检验，也是自己足以踏足社会的第一步，这一步考验的是你在大学中究竟学到了什么，能熟悉运用的又能有多少，了解又不太掌握的又有多少，这是对自己能力的检验。所以在毕业设计之中，本人深刻了解到自己掌握的知识有多么微弱，计算机语言有多么庞大，这也督促自己在未来工作中，必须要不断地更新自己，增强自己，只有不断学习，才能不断进步。致谢此次毕业设计课题基于Vue电影票务服务APP的开发工作是在各位毕业设计指导老师的细心指导下完成的，各位老师科学的教学方法以及严谨的工作态度给予本人极大的鼓励。在作品完成的过程中遇到了一些设计上的瓶颈和难以解决的问题时，指导教师对本人进行了不懈的指导与帮助，指导本人完成技术上的不足和相关材料的整合，让本人能及时的按照规定进度完成了毕业设计作品。衷心感谢智能工程学院每位任课老师在学习中对本人的不懈帮助，不仅仅提高了自我的理论知识和动手能力，也提高了自身的素质修养，为以后踏足社会打下了坚实基础。衷心感谢本人的指导教师李朋老师和王凤伟老师，感谢他们在繁忙工作中对本人的论文提供的宝贵意见，并在需要帮助时给予本人宝贵的处理问题的经验和方法。最后再次真挚的感谢智能工程学院全体教师的帮助和鼓励。参考文献ReadingsinInformationVisualization:UsingVisiontoThink,StuartCard,JockMackinlay,&BenShneiderman,MorganKaufmann,1999张春柏.影视翻译初探[J].中国翻译.1998，02江帆，关于中国电影诞生问题的补正[J].北京电影学院学报.2008，05麦冬，陈涛，梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版)，2017.07:53刘立.MVVM模式分析与应用[J].微型电脑应用，2012，28(12):57-60吕英华.渐进式JavaScript框架Vue.js的全家桶应用[J].电子技术与软件工程，2019.22:39-40解颐，方红亮，曲珍，余涵，王学昌.基于HTML5脚本的旅游软件开发[J].电脑编程技巧与维护.2017.07:35-37陆凌牛.HTML5与CSS3权威指南[M].北京:机械工业出版社,2013:49-205.刘智勇. JavaScript 开发技术大全[M].北京清华大学出版社，2009TheisenKevinJ.Programminglanguagesinchemistry:areviewofHTML5/JavaScript.[J].Journalofcheminformatics,2019,11(1)曹文渊.JAVA语言在计算机软件开发中的应用[J].电子技术与软件工程，2019(02):53-54匡成宝.HTML语言的网页制作方法与技巧探讨[J].电脑迷，2017(03):190-191徐延章.移动阅读APP交互体验设计的艺术范式[J].出版发行研究，2016(07):90-93张欣欣.HTML及百度地图API在WebGIS中的应用实例研究[J].江苏科技信息，2017(07):63-65王志宏.数据库技术在网站中的应用研究[J].皖西学院学报，2003(02):104-106(美)Stephen.A.Thomas.JavaScript数据可视化编程[M].北京人民邮电出版社，2017康诺利.数据库设计教程[M].北京:北京机械工业出版社，2005唐琳，常瑜.以用户为中心的手持移动设备APP界面设计研究[J].山东社会科学，2015(S2):97-99DeterminingthemostrepresentativeimageonaWebpage[J].KrishnaVyas,FlaviusFrasincar.InformationSciences,2017.03:925-983马皎.论APP界面设计中的信息可视化交互[J].中小企业管理与科技(上旬刊)，2015.10:206Claimingafamilybrandidentity:Theroleofwebsitestorytelling[J].BonnieFCanziani,DianneHBWelsh,Léo‐PaulDana,VelandRamadani.CanadianJournalofAdministrativeSciences,2020.01:356-426User-centredwebdesign,usabilityandusersatisfaction:ThecaseofonlinebankingwebsitesinIran.[J].DianatIman,AdeliPari,AsgariJafarabadiMohammad,KarimiMohammadAli.Appliedergonomics,2017.01:51-56马皎.论APP界面设计中的信息可视化交互[J].中小企业管理与科技(上旬刊)，2015.10:206王洋，吕曦.以用户体验为中心的不同终端下同一APP界面差异化设计[J].现代装饰(理论)，2015(04):114-115朱婧茜，何人可.Android手机应用界面布局的可用性测试研究[J].包装工程，2014(10):61-64

电脑故障检测卡代码表

1、特殊代码"00"和"ff"及其它起始码有三种情况出现：

①已由一系列其它代码之后再出现："00"或"ff"，则主板ok。

②如果将cmos中设置无错误，则不严重的故障不会影响bios自检的继续，而最终出现"00"或"ff"。

③一开机就出现"00"或"ff"或其它起始代码并且不变化则为主板没有运行起来。

2、本表是按代码值从小到大排序，卡中出码顺序不定。

3、未定义的代码表中未列出。

4、对于不同bios（常用ami、award、phoenix）用同一代码代表的意义不同，因此应弄清您所检测的电脑是属于哪一种类型的bios，您可查阅您的电脑使用手册，或从主板上的bios芯片上直接查看，也可以在启动屏幕时直接看到。

5、有少数主板的pci槽只有一部分代码出现，但isa槽有完整自检代码输出。且目前已发现有极个别原装机主板的isa槽无代码输出，而pci槽则有完整代码输出，故建议您在查看代码不成功时，将本双槽卡换到另一种插槽试一下。另外，同一块主板的不同pci槽，有的槽有完整代码送出，如dell810主板只有靠近cpu的一个pci槽有完整代码显示，一直变化到"00"或"ff"，而其它pci槽走到"38"后则不继续变化。

6、复位信号所需时间isa与pci不一定同步，故有可能isa开始出代码，但pci的复位灯还不熄，故pci代码停要起始代码上。

代码对照表

00.已显示系统的配置；即将控制INI19引导装入。

01处理器测试1，处理器状态核实,如果测试失败，循环是无限的。处理器寄存器的测试即将开始，不可屏蔽中断即将停用。CPU寄存器测试正在进行或者失败。

02确定诊断的类型（正常或者制造）。如果键盘缓冲器含有数据就会失效。停用不可屏蔽中断；通过延迟开始。CMOS写入／读出正在进行或者失灵。

03清除8042键盘控制器，发出TESTKBRD命令（AAH）通电延迟已完成。ROMBIOS检查部件正在进行或失灵。

04使8042键盘控制器复位，核实TESTKBRD。键盘控制器软复位／通电测试。可编程间隔计时器的测试正在进行或失灵。

05如果不断重复制造测试1至5，可获得8042控制状态。已确定软复位／通电；即将启动ROM。DMA初如准备正在进行或者失灵。

06使电路片作初始准备，停用视频、奇偶性、DMA电路片，以及清除DMA电路片，所有页面寄存器和CMOS停机字节。已启动ROM计算ROMBIOS检查总和，以及检查键盘缓冲器是否清除。DMA初始页面寄存器读／写测试正在进行或失灵。

07处理器测试2，核实CPU寄存器的工作。ROMBIOS检查总和正常，键盘缓冲器已清除，向键盘发出BAT（基本保证测试）命令。.

08使CMOS计时器作初始准备，正常的更新计时器的循环。已向键盘发出BAT命令，即将写入BAT命令。RAM更新检验正在进行或失灵。

09EPROM检查总和且必须等于零才通过。核实键盘的基本保证测试，接着核实键盘命令字节。第一个64KRAM测试正在进行。

0A使视频接口作初始准备。发出键盘命令字节代码，即将写入命令字节数据。第一个64KRAM芯片或数据线失灵，移位。

0B测试8254通道0。写入键盘控制器命令字节，即将发出引脚23和24的封锁／解锁命令。第一个64KRAM奇／偶逻辑失灵。

0C测试8254通道1。键盘控制器引脚23、24已封锁／解锁；已发出NOP命令。第一个64KRAN的地址线故障。

0D1、检查CPU速度是否与系统时钟相匹配。2、检查控制芯片已编程值是否符合初设置。3、视频通道测试，如果失败，则鸣喇叭。已处理NOP命令；接着测试CMOS停开寄存器。第一个64KRAM的奇偶性失灵

0E测试CMOS停机字节。CMOS停开寄存器读／写测试；将计算CMOS检查总和。初始化输入／输出端口地址。

0F测试扩展的CMOS。已计算CMOS检查总和写入诊断字节；CMOS开始初始准备。.

10测试DMA通道0。CMOS已作初始准备，CMOS状态寄存器即将为日期和时间作初始准备。第一个64KRAM第0位故障。

11测试DMA通道1。CMOS状态寄存器已作初始准备，即将停用DMA和中断控制器。第一个64DKRAM第1位故障。

12测试DMA页面寄存器。停用DMA控制器1以及中断控制器1和2；即将视频显示器并使端口B作初始准备。第一个64DKRAM第2位故障。

13测试8741键盘控制器接口。视频显示器已停用，端口B已作初始准备；即将开始电路片初始化／存储器自动检测。第一个64DKRAM第3位故障。

14测试存储器更新触发电路。电路片初始化／存储器处自动检测结束；8254计时器测试即将开始。第一个64DKRAM第4位故障。

15测试开头64K的系统存储器。第2通道计时器测试了一半；8254第2通道计时器即将完成测试。第一个64DKRAM第5位故障。

16建立8259所用的中断矢量表。第2通道计时器测试结束；8254第1通道计时器即将完成测试。第一个64DKRAM第6位故障。

17调准视频输入／输出工作，若装有视频BIOS则启用。第1通道计时器测试结束；8254第0通道计时器即将完成测试。第一个64DKRAM第7位故障。

18测试视频存储器，如果安装选用的视频BIOS通过，由可绕过。第0通道计时器测试结束；即将开始更新存储器。第一个64DKRAM第8位故障。

19测试第1通道的中断控制器（8259）屏蔽位。已开始更新存储器，接着将完成存储器的更新。第一个64DKRAM第9位故障。

1A测试第2通道的中断控制器（8259）屏蔽位。正在触发存储器更新线路，即将检查15微秒通／断时间。第一个64DKRAM第10位故障。

1B测试CMOS电池电平。完成存储器更新时间30微秒测试；即将开始基本的64K存储器测试。第一个64DKRAM第11位故障。

1C测试CMOS检查总和。.第一个64DKRAM第12位故障。

1D调定CMOS配置。.第一个64DKRAM第13位故障。

1E测定系统存储器的大小，并且把它和CMOS值比较。.第一个64DKRAM第14位故障。

1F测试64K存储器至最高640K。.第一个64DKRAM第15位故障。

20测量固定的8259中断位。开始基本的64K存储器测试；即将测试地址线。从属DMA寄存器测试正在进行或失灵。

21维持不可屏蔽中断（NMI）位（奇偶性或输入／输出通道的检查）。通过地址线测试；即将触发奇偶性。主DMA寄存器测试正在进行或失灵。

22测试8259的中断功能。结束触发奇偶性；将开始串行数据读／写测试。主中断屏蔽寄存器测试正在进行或失灵。

23测试保护方式8086虚拟方式和8086页面方式。基本的64K串行数据读／写测试正常；即将开始中断矢量初始化之前的任何调节。从属中断屏蔽存器测试正在进行或失灵。

24测定1MB以上的扩展存储器。矢量初始化之前的任何调节完成，即将开始中断矢量的初始准备。设置ES段地址寄存器注册表到内存高端。

25测试除头一个64K之后的所有存储器。完成中断矢量初始准备；将为旋转式断续开始读出8042的输入／输出端口。装入中断矢量正在进行或失灵。

26测试保护方式的例外情况。读出8042的输入／输出端口；即将为旋转式断续开始使全局数据作初始准备。开启A20地址线；使之参入寻址。

27确定超高速缓冲存储器的控制或屏蔽RAM。全1数据初始准备结束；接着将进行中断矢量之后的任何初始准备。键盘控制器测试正在进行或失灵。

28确定超高速缓冲存储器的控制或者特别的8042键盘控制器。完成中断矢量之后的初始准备；即将调定单色方式。CMOS电源故障／检查总和计算正在进行。

29.已调定单色方式，即将调定彩色方式。CMOS配置有效性的检查正在进行。

2A使键盘控制器作初始准备。已调定彩色方式，即将进行ROM测试前的触发奇偶性。置空64K基本内存。

2B使磁碟驱动器和控制器作初始准备。触发奇偶性结束；即将控制任选的视频ROM检查前所需的任何调节。屏幕存储器测试正在进行或失灵。

2C检查串行端口，并使之作初始准备。完成视频ROM控制之前的处理；即将查看任选的视频ROM并加以控制。屏幕初始准备正在进行或失灵。

2D检测并行端口，并使之作初始准备。已完成任选的视频ROM控制，即将进行视频ROM回复控制之后任何其他处理的控制。屏幕回扫测试正在进行或失灵。

2E使硬磁盘驱动器和控制器作初始准备。从视频ROM控制之后的处理复原；如果没有发现EGA／VGA就要进行显示器存储器读／写测试。检测视频ROM正在进行。

2F检测数学协处理器，并使之作初始准备。没发现EGA／VGA；即将开始显示器存储器读／写测试。.

30建立基本内存和扩展内存。通过显示器存储器读／写测试；即将进行扫描检查。认为屏幕是可以工作的。

31检测从C800：0至EFFF：0的选用ROM，并使之作初始准备。显示器存储器读／写测试或扫描检查失败，即将进行另一种显示器存储器读／写测试。单色监视器是可以工作的。

32对主板上COM／LTP／FDD／声音设备等I／O芯片编程使之适合设置值。通过另一种显示器存储器读／写测试；却将进行另一种显示器扫描检查。彩色监视器（40列）是可以工作的。

33.视频显示器检查结束；将开始利用调节开关和实际插卡检验显示器的关型。彩色监视器（80列）是可以工作的。

34.已检验显示器适配器；接着将调定显示方式。计时器滴答声中断测试正在进行或失灵。35.完成调定显示方式；即将检查BIOSROM的数据区。停机测试正在进行或失灵。

36.已检查BIOSROM数据区；即将调定通电信息的游标。门电路中A－20失灵。

37.识别通电信息的游标调定已完成；即将显示通电信息。保护方式中的意外中断。

38.完成显示通电信息；即将读出新的游标位置。RAM测试正在进行或者地址故障＞FFFFH。

39.已读出保存游标位置，即将显示引用信息串。.

3A.引用信息串显示结束；即将显示发现信息。间隔计时器通道2测试或失灵。

3B用OPTI电路片（只是486）使辅助超高速缓冲存储器作初始准备。已显示发现＜ESC＞信息；虚拟方式，存储器测试即将开始。按日计算的日历时钟测试正在进行或失灵。

3C建立允许进入CMOS设置的标志。.串行端口测试正在进行或失灵。

3D初始化键盘／PS2鼠标／PNP设备及总内存节点。.并行端口测试正在进行或失灵。

3E尝试打开L2高速缓存。.数学协处理器测试正在进行或失灵。

40.已开始准备虚拟方式的测试；即将从视频存储器来检验。调整CPU速度，使之与外围时钟精确匹配。

41中断已打开，将初始化数据以便于0：0检测内存变换（中断控制器或内存不良）从视频存储器检验之后复原；即将准备描述符表。系统插件板选择失灵。

42显示窗口进入SETUP。描述符表已准备好；即将进行虚拟方式作存储器测试。扩展CMOSRAM故障。

43若是即插即用BIOS，则串口、并口初始化。进入虚拟方式；即将为诊断方式实现中断。.44.已实现中断（如已接通诊断开关；即将使数据作初始准备以检查存储器在0：0返转。）BIOS中断进行初始化。

45初始化数学协处理器。数据已作初始准备；即将检查存储器在0：0返转以及找出系统存储器的规模。.

46.测试存储器已返回；存储器大小计算完毕，即将写入页面来测试存储器。检查只读存储器ROM版本。

47.即将在扩展的存储器试写页面；即将基本640K存储器写入页面。

48.已将基本存储器写入页面；即将确定1MB以上的存储器。视频检查，CMOS重新配置。

49.找出1BM以下的存储器并检验；即将确定1MB以上的存储器。.

4A.找出1MB以上的存储器并检验；即将检查BIOSROM数据区。进行视频的初始化。

4B.BIOSROM数据区的检验结束，即将检查＜ESC＞和为软复位清除1MB以上的存储器。.4C.清除1MB以上的存储器(软复位)即将清除1MB以上的存储器.屏蔽视频BIOSROM。.4D。已清除1MB以上的存储器（软复位）；将保存存储器的大小。.

4E若检测到有错误；在显示器上显示错误信息，并等待客户按＜F1＞键继续。开始存储器的测试：（无软复位）；即将显示第一个64K存储器的测试。显示版权信息。

4F读写软、硬盘数据，进行DOS引导。开始显示存储器的大小，正在测试存储器将使之更新；将进行串行和随机的存储器测试。.

50将当前BIOS监时区内的CMOS值存到CMOS中。完成1MB以下的存储器测试；即将高速存储器的大小以便再定位和掩蔽。将CPU类型和速度送到屏幕。

51.测试1MB以上的存储器。.

52所有ISA只读存储器ROM进行初始化，最终给PCI分配IRQ号等初始化工作。已完成1MB以上的存储器测试；即将准备回到实址方式。进入键盘检测。

53如果不是即插即用BIOS，则初始化串口、并口和设置时种值。保存CPU寄存器和存储器的大小，将进入实址方式。.

54.成功地开启实址方式；即将复原准备停机时保存的寄存器。扫描“打击键”

55.寄存器已复原，将停用门电路A－20的地址线。.

56.成功地停用A－20的地址线；即将检查BIOSROM数据区。键盘测试结束。

57.BIOSROM数据区检查了一半；继续进行。.

58.BIOSROM的数据区检查结束；将清除发现＜ESC＞信息。非设置中断测试。

59.已清除＜ESC＞信息；信息已显示；即将开始DMA和中断控制器的测试。.

5A..显示按“F2”键进行设置。

5B..测试基本内存地址。

5C..测试640K基本内存。

60设置硬盘引导扇区病毒保护功能。通过DMA页面寄存器的测试；即将检验视频存储器。测试扩展内存。

61显示系统配置表。视频存储器检验结束；即将进行DMA＃1基本寄存器的测试。.

62开始用中断19H进行系统引导。通过DMA＃1基本寄存器的测试；即将进行DMA＃2寄存器的测试。测试扩展内存地址线。

63.通过DMA＃2基本寄存器的测试；即将检查BIOSROM数