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

目录TOC\o"1-3"\h\u6902摘要 [2]。在这种影片迅速发展的浪潮之下，每年每月几乎都会有非常受期待的影片上线，无论是当前热映还是即将上映的影片，都是影迷们的消费对象。观看影片几乎可以说是当今社会人们娱乐的不可或缺的一部分，到如今中国影视行业足有一百余年的发展历史了，早些年人们看影片的方式只能是去各个电影院排队购票，费时耗力，而在互联网发展迅猛的今天，人们更加热衷于网上购票，网上购票大大解决了影院人工购票的压力，也为人们提供了便利，本项目致力于方便用户更容易的获影片信息和影院信息，更加贴合如今人们的生活方式。本项目根据实际的需求将项目逐步实现的过程按照项目周期的方式来完成，分别为系统需求分析，系统概要分析，系统详细设计，编码实现以及项目测试几个阶段。本文设计的基于Vue的实时影片资讯APP的第1章简单的概括介绍了本项目所需要的相关技术REF_Ref11781\w\h[1]；基于Vue的实时影片资讯APP使用了当今前端极为火热的框架Vue进行项目搭建，并且使用了axios技术获取了众多网络数据，登录功能涉及Mongodb数据库存储用户信息，以H5和CSS3进行项目页面的设计，辅以JavaScript使得页面更具交互性，同时还应用了Vant-ui和element-ui组件库使得实现页面功能的同时还不缺少美观性。此外，通过在谷歌浏览器安装Postman来测试数据是否能够获取；第2章，通过详细分析基于Vue的实时影片资讯APP所需要的各个功能，以用例图的方式进行表述，使功能需求看起来更具条理和组织性，并依照需求分析做出模块划分REF_Ref13002\w\h[2]；第3章，介绍了本项目的总体设计和各模块的功能设计；第4章，介绍了代码规范和axios获取数据REF_Ref13910\w\h[3]；第5章，进行了项目测试，项目测试是通过手机下载APK后，验证该APP是否满足用户需求以及在不同网速下，该APP是否能够正常运行；结论，总结了本文已经完成的功能，并且提出项目未来拓展和优化的可能性。本APP根据现如今人们的观影需求，将各个城市各个地区的影院信息呈现在用户眼前，方便了人们日常的娱乐活动，用户通过互联网了解影片信息和选择性购票能够很好地推动影片市场的加速发展，从而获得更好的票房成绩。

1相关技术基于Vue的实时影片资讯APP以Vue渐进式框架作为开发工具并完成了本次项目的开发工作，通过MVVM模式，单页面开发模式，数据发生改变，视图也会随之改变，使用Axios技术通过访问后端的接口获取网络上影片详细信息和影院详细信息的数据，将获取后的数据自动转化为json数据模式，以方便对数据的处理。本次项目的整体页面均采用HTML5+CSS3进行搭建并使用JavaScript进行页面的交互REF_Ref13992\w\h[4]，并且运用Vant-ui，Element-ui等UI库组件对页面进行二次美化，使之更加美观，用户体验更好。使用Mongodb数据库来创建新的数据表，并且存储用户信息用来模拟实现用户登录的效果。1.1Vue框架这就不同于其他重量级的前端开发框架，Vue框架是用于构建接口的渐进式的JS框架REF_Ref14070\w\h[5]。Vue框架的设计方面主要关注的点是从下到上逐渐发展，这就和其他的重量级前端开发框架不同，Vue核心库是只关注于视图层所以叫渐进式的JS框架。它拥有这操作简便和更加易于新手学习等特点，现有的库或已经写好的其他项目可以使用Vue框架进行集成，所以它并不影响之前所开发的代码。通过后端给的API接口去响应性的数据绑定和复合视图组件也可以使用Vue框架来实现，并使用Vue生态系统支持的单个文件组件和库，可以驱动开发和复杂的单页应用程序，即Vue可以自动响应数据中的更改，数据将会更改，视图的内容将会随着用户在代码中绑定的部分代码改变而随之发生变化。而这种代码改变视图随之改变的绑定关系，就是Vue框架的双向绑定关系，用Vue中的input标签的v-model属性来实现双向绑定的，这也就是被称之为声明式渲染的模版引擎的Vue框架REF_Ref14168\w\h[6]。1.2MVVMMVC模式是把数据模型和视图层进行分离的实施例代码REF_Ref14217\w\h[7]，控制器的存在主要是为了保证数据模型和视图层保持同步，如果数据发生了改变，视图层将会同时进行更新REF_Ref14305\w\h[8]。MVC模式注重模型的不变性，所以mvc模式下的模型不依赖于视图，而依赖于模型。由于视图可以改变隐喻的业务逻辑，所以很难改变视图，至少业务逻辑不能再使用了。MVVM模式是一个性能更加优于MVC模式的REF_Ref14364\w\h[9]。但是实际上，只是两种模式中的代码位置发生了一些改变，MVVM模式与MVC模式并没有太大的区别。MVVM模式是将数据绑定工作的代码放入JS文件中来实现将用户可以看到的页面和开发人员开发的代码数据逻辑进行分离。而这个JS文件中的代码主要起到连接数据的功能。也就是说，使用MVVM开发项目通过将模型连接到UI元素，代码可以减半。MVVM模式更方便的地方在于不方便手工更新和管理页面上所有场景的n个区域，即更改公共代码和更新多个页面。1.3Mongodb数据库使用c++语言和其他的一些语言进行编写,解决了应用程序在开发的过程中出现的社区中的大量问题的面向文档的数据库管理系统，它的目的是为Web应用程序提供高性能数据存储的解决方案。Mongodb数据库创建表名以及存储数据的过程中并不像其他数据库创建存储数据一样，首先应该在安装目录的bin目录下运行命令mongod--dbpath加路径开启数据库。之后创建数据库，并且向数据库中添加所需要的的数据。在Vue连接Mongodb数据库的过程中，首先要使用Node.js进行连接Mongodb数据库，运行nodeserve.js，如果出现自己设置的显示连接成功的提示，则连接成功。1.4Axios请求由于Vue、React等前端开发框架的出现，Jquery也就不在想以前那样被人们乐于使用了REF_Ref14492\w\h[11]。而Vue等前端开发框架的特点就是不需要直接操作DOM元素，也不需要引入Jquery，所以促使Axios轻量级库的出现。对请求拦截，处理所有api接口的公共参数，Axios轻量级库是对Ajax的二次封装。Axios轻量级库可以在浏览器和node.js中使用，这是一种基于Promise的Http客户端，非常适合前后端的数据交互的Axios，对于Vue框架而言，请求数据的方式还有一种vue-resource，但是vue-resource这种请求数据的方式只支持浏览器端使用，且已经不再更新了，这算是Vue开发者目前所能使用的最好的第三方工具Axios可在浏览器和Node端都可以使用REF_Ref14537\w\h[12]。通过后端获取的Api接口，通过Axios进行访问以获取需要的数据访问到的数据类型可以直接转化为json数据类型，更加方便使用。之后将请求到的数据存储到一个新的空数组中，在对数据进行使用的过程中，只需要使用空数组中的数据即可，通过v-for对数据进行遍历处理，结合Vant-ui，Element-ui等UI库组件使之完美的呈现在用户界面。1.5H5、CSS3和JavaScript这三种是在现如今的前端Web开发工作中必不可缺的三大开发技术，三者搭配完成前端页面的渲染与交互。H5不是一种新的开发语言，而是一次HTML的第五次重大修改，用于在Internet上显示Web页面的主要标记语言的HTML（超文本标记语言）REF_Ref14593\w\h[13]。通过Web浏览器显示文本，图像或其他资源，网页由HTML组成。开发人员只需使用HTML5语言标准进行移动应用程序编写开发进行一次程序编写，就可以将其推广至各个操作系统平台，并且在多个操作系统平台进行该移动应用的编译，使用能够多平台运行的HTML5语言标准进行应用程序编写开发和编译的移动应用，与基于操作系统平台进行应用程序编写开发和编译的原生应用（NativeApp）而言，其在操作系统平台的移植上就存在着很大的优势REF_Ref14684\w\h[14]。CSS3是CSS技术的升级版本，CSS（层叠样式表）是描述标记语言页面格式的标准，前端开发人员通过HTML和CSS可以搭建起固定页面，通过绑定id或者class类名，开发人员能够分离内容和可视元素，之后通过CSS改变页面的样式，从而达到美化页面的效果REF_Ref14750\w\h[15]。JavaScript（JS）虽然它被称为网络脚本语言的发展，但它也适用于各种浏览器环境。基于循环编程，支持目标定位、多模式动态脚本语言、命令和声明方式。原生开发的过程中，就是使用JavaScript（JS）进行项目的开发。JavaScript（JS）通常在HTML中插入动态文本，读取HTML元素，并在数据提交到用于验证数据的服务器之前进行页面对话REF_Ref14795\w\h[16]。1.6本章小结以上介绍的就是基于Vue的实时影片资讯APP的相关技术，前端开发框架是目前最为火热的框架Vue，本项目的登录功能以Mongodb数据库进行模拟演示，使用H5、CSS3和JavaScript进行页面总体交互，运用Vant-ui和element-ui等组件库，使得页面更具美观性，通过Axios进行调取网络接口和返回数据，除此之外还在VueREF_Ref14874\w\h[17]中加入了地图可视化Map，该功能可以让用户进行按城市和按地区查询，查询到的数据再以页面的样式呈现在用户眼前，并且可以点击侧边的首字母列表跳转到相应的城市列表，还可以对城市进行搜索，只需要输入首字母就可以进行相应的城市搜索。

2系统分析2.1功能需求基于Vue的实时影片资讯APP划分为众多功能模块，包含登录模块、影片列表模块、影院列表模块、定位模块、影片详情模块、影院详情模块。用户打开APP之后，首先要进行登录，登录默认注册，通过调取Mongodb数据库返回一个4位验证码，同时在登录模块进行众多正则化判断，如果用户所输入的手机号码和验证码不符合要求则不许登录。用户成功登录后，首先进入首页，如果用户想要退出后再登录，则需进入个人中心模块的设置页中实现退出登录功能。用户登录成功后，展现首页的信息，首页包含正在热映的影片，即将上映的影片，并且点击相应的影片可以查看当前影片的详情等功能，同样的也展现众多其他功能模块可以让用户进行使用。登录模块、个人中心模块、影片模块、影院模块、定位模块、详情模块，每个模块之间都有其不一样的功能性类别和技术关联。2.2用例分析用户打开APP先展示登录页面，此页面具有正则判断，用户输入手机号后触发正确的正则判断，之后点击获取验证码向后会弹出随机四位验证码，输入验证码后，用户点击登录，在判断Sessionstorage和后台均存储用户信息后，实现登录。用户在登录后，首先展现给用户的是首页，同级展示影院页入口、演出页入口、资讯页入口和个人中心页入口REF_Ref14998\w\h[18]。首页展示影片列表，影片列表包括正在热映影片模块，即将上映影片模块，对应模块点击后跳转对应详情页。影院页入口点击后进入影院列表页，影院列表页实现按地区分类查询，返回对应影院列表，点击对应影院进入其详情页。资讯页入口点击后进入资讯列表，资讯页面展示最近的热门影片资讯，点击对应资讯可进入对应详情。个人中心入口点击后跳转到个人中心页面，该页面展示商品和影片订单、优惠券、钱包以及退出登录等功能。该部分用例图如下图2.1所示。图2.1基于Vue的实时影片资讯APP的用例图2.3用户功能用户在登录进入APP后，APP展示影片模块、影院模块、定位模块、资讯模块、个人中心模块，点击对应模块链接进入对应模块界面，影片模块展示当前热映、即将上映的影片列表REF_Ref15060\w\h[19]，点击对应的影片进入对应的影片详情页，影片详情页展示影片的剧照、导演、演员和影评。用户点击影院模块链接进入影院列表页，影院模块后，影院列表页可根据地区，进行有选择的查询对应地区的影院，并且点击相应影院后，可进入影院模块的详情，影院详情页展示影院的具体信息。用户点击资讯链接进入资讯页面，资讯页面通过列表展示众多资讯，点击对应资讯进入该资讯的详情页，资讯详情页介绍了该影片资讯的详细信息和拍摄剧情。用户点击个人中心模块链接，可进入个人中心模块，个人中心模块页展示影片订单、商品订单、优惠券、组合红包、红包、设置、疫情，在页面点击对应的按钮可进行对应模块的跳转。最后设置页面有退出登录功能，用户点击退出登录后，会清除用户信息且跳转回登录页面REF_Ref15125\w\h[20]。2.4本章小结本章主要介绍的是基于Vue的实时影片资讯APP的需求分析，主要包括功能需求和用例分析。用户成功登录打开APP进入主页面后，可以对APP进行操作，通过点击相应功能入口进入相应功能模块，每个模块内都有其相应的功能，且相互连接，这样对功能点模块化设计在不影响APP正常使用的同时提高了程序的运行效率。3Vue影片票务服务APP设计3.1页面设计3.1.1登录界面原型图顶部为logo，下面为登录的账号和验证码，底部为登录按钮。原型图如图3.3所示。效果图如图3.4所示。图3.3实时影片资讯APP登录原型图图3.4实时影片资讯APP登录效果图3.1.2主界面 原型图为顶部为title，下面为logo和news，之后为city，title1，title2,以及title3，之后是内容部分底部为菜单栏。我设计的效果图为顶部是轮播图，轮播图下有两个按钮，之后是内容部分，底部是菜单栏。原型图如图3.5所示。效果图如图3.6所示。图3.5实时影片资讯APP主页面原型图图3.6实时影片资讯APP主页面效果图3.2详细设计在基于Vue的实时影片资讯APP中，依据Axios获取的网络接口数据类别进行功能模块的划分，其中登录功能为数据库模拟登录REF_Ref15194\w\h[21]。3.2.1数据库设计在基于Vue的实时影片资讯APP中有登录信息表，表中包含手机号类型，验证码类型，登录时间，最后登录的时间四个字段。具体信息可以如表3.1所示。表3.1登录信息表列名数据类型（精度范围）空/非空约束条件其它说明ObjectIdINT(11)NOTNULLPRIMARY手机号phoneCodeINT(11)NOTNULLUNIQUE验证码regTimeVARCHAR(45)NOTNULL登录时间lastTimeVARCHAR(45)NOTNULL最后登录时间3.2.2数据处理用户登录成功后，系统会通过后端获取的Api接口，通过Axios进行访问以获取需要的数据，并且会将访问到的数据类型可以直接转化为json数据类型。将获取到的数据存放到一个空数组中，需要应用哪些数据，就将相应的数据提取出来，运用到相应的位置。3.2.3功能设计用户点击想要获取某城市影院信息，首先在city页面内查询城市，点击进入城市后会显示对应的城市的热映影片，并且默认显示当前城市的所有影院，用户通过按需查询后返回相应的影院列表，点击影院列表页可进入影院详情页，影院详情页展示当前商品（影片或其他商品）点击购买后添加到个人中心订单页REF_Ref15269\w\h[22]。此部分功能如图3.7所示。图3.7影院模块详解图用户点击资讯模块链接，路由跳转到资讯页，资讯页面获取最近上映的影片资讯的信息，在点击相应的资讯后，可以查看资讯信息REF_Ref15334\w\h[23]。资讯模块功能如图3.8所示。图3.8资讯模块详解图用户点击个人中心模块链接后，路由跳转到个人中心页面，个人中心页面展示影片订单、商品订单、优惠券、组合红包、红包、设置，点击设置后可实现退出登录REF_Ref15383\w\h[24]。此部分功能如图3.10所示。图3.9个人中心模块详解图3.3本章小结本章主要介绍的是基于Vue的实时影片资讯APP的功能设计，主要内容包括登录数据库设计和功能点设计，通过运用功能详解图使得项目功能能够简单明了进行展示，方便用户看懂设计。4基于Vue的实时影片资讯APP的实现4.1开发环境服务器端软件要求：数据库服务器Mongodb，Web服务器，Node.js8或以上版本；客户端软件的要求：操作系统为Windows7以上；浏览器为InternetExplorer6.0及以上；开发工具为VisualStudioCodeREF_Ref15435\w\h[25]。4.2开发规范开发规范的目的是为了提高工作效率，能够输出高质量的文档。首先是命名规范，Vue文件的命名最好是小写且语义化，这样是方便出现报错时候能够直接找到报错的文件，命名最好为驼峰命名法，定义常量最好用大写，通过Axios请求数据的methods方法最好是以data结尾，由于通过网络获取的数据均输出res.data，全局引用文件应该从index.js导出导入到条目文件main中。和多个功能部件的元素应该写在多行，每一个功能部件一个。元素属性的顺序方面，本机属性在前面，指令在后面。每个方法的评论应该是一个单独的行,而不是代码。v-for循环必须具有key属性，该属性在整个for循环中必须是惟一的，并且避免在同一个元素上使用v-if和v-for，以提高性能REF_Ref15484\w\h[26]。调试完代码后，必须及时删除调试输出的console.log()，否则在打包上线时会报错，影响代码运行。在页面交互上，如果问题可以用CSS解决，不要用JS来解决。对代码进行优化，避免冗余，提高系统性能。4.3核心功能4.3.1地图定位模块用户登录APP之后，可以通过地图定位查询全国所有城市所有地区的数据，该页面展示全国所有城市，且可按字母跳转。如图4.1的所示。 图4.1地图定位界面用户在登录APP后，点击对应城市名跳转到对应城市，并返回该城市的所有数据，核心代码如下。const

location

=

{

initMap(id,cb){

let

mapObj

=

new

AMap.Map(id)

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;

//

console.log('当前城市是：',cityinfo)

//

利用回调函数将城市名称传递给调用的地方

cb(cityinfo)

}

});

AMap.event.addListener(citysearch,

"error",

function(result){console.log();});

});

}}4.3.2影片列表界面在用户登录到APP之后可以选择影片列表模块，该模块内展示正在热映影片板块、即将上映影片板块和经典影片板块，每个版块均可跳转到相应的详情页REF_Ref15553\w\h[27]。功能如图4.2和图4.3所示。图4.2影片列表版块功能图图4.3影片详情版块功能图在影片列表功能界面中，能看到当前热映、即将上映列表，列表实现按需加载，通过v-for实现对拿到的数据进行页面渲染。核心代码如下。//

获取正在热映的电影列表数据export

const

getFilmLists

=

(params

=

{})=>{

if(!params.pageNum)

params.pageNum

=

1

if(!params.pageSize)

params.pageSize

=

10

return

request({

url:`/gateway?cityId=210100&pageNum=${params.pageNum}&pageSize=${params.pageSize}&type=1&k=6448834`,

data:{

xhost:

'mall.film-ticket.film.list'

}

})}//

获取即将上映的电影列表数据export

const

getFilmList2s

=

(params

=

{})=>{

if(!params.pageNum)

params.pageNum

=

1

if(!params.pageSize)

params.pageSize

=

10

return

request({

url:`/gateway?cityId=210100&pageNum=${params.pageNum}&pageSize=${params.pageSize}&type=2&k=6885787`,

data:{

xhost:

'mall.film-ticket.film.list'

}

})}4.3.3影院列表界面在用户登录到APP之后，点击影院链接可使用影院功能，影院功能列表页可根据城市id查询到某城市内所有的影院，且在这个模块内能实现按需查找影院，并返回影院列表。功能如图4.4和4.5所示 图4.4影院列表界面图4.5按需查找界面在这个页面用户可以进行按需查找，用户可根据区域和品牌进行影院的查询，查询到的影院重新渲染到页面中，核心功能如下代码所示。//获取影院列表export

const

getCinemasLists

=

(params

=

{})

=>

{

if

(!params.pageNum)

params.pageNum

=

1

if

(!params.pageSize)

params.pageSize

=

10

return

request({

url:

`/gateway?cityId=210100&ticketFlag=1&k=5926319`,

data:

{

xhost:

'mall.film-ticket.cinema.list'

}

})}//获取影院详情export

const

getCinemaDetail

=

(params)=>{

console.log(params,12312312)

return

request({

url:`/gateway?cinemaId=${params.id}&k=6921227`,

data:{

xhost:

'mall.film-ticket.film.cinema-show-film'

}

})}4.3.4资讯功能界面用户登录APP之后，可以进入资讯界面，该界面展示最近的影片资讯功能，点击相应的资讯会进入相应的资讯详情页。如图4.6和图4.7所示。图4.6资讯界面图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.9所示。图4.8个人中心界面图4.9疫情界面用户进入个人中心界面后，点击相应功能可以进入相应详情页该部分核心代码如下。<script>import

MzFooter

from

"@/components/Footer";export

default

{

data(){

return

{

state:

"立即登录",

img:

false,

show1:

true,

}

},

components:{

MzFooter

},

created(){

if(localStorage.getItem('token')){

this.img

=

true;

if(localStorage.getItem('phone1')){

this.state

=

localStorage.getItem('phone1')

this.show1

=

false

return

}

this.state

=

localStorage.getItem('phone')

this.show1

=

true

console.log(this.to.meta)

}

},

updated(){

},

methods:{

dada(){

//

console.log(localStorage.getItem('token'))

}

},}</script>4.4本章小结本章详细介绍了基于Vue的实时影片资讯APP的几个核心功能的界面实现和代码实现，包括拓展功能echars图标在内的所有功能均从现实出发。根据界面截图介绍了功能的使用方法，通过代码的截图详细的介绍了功能如何实现以及部分方法的使用，截止于此，对于整个项目的实现已经基本完备，接下来需要进行测试的操作。5基于Vue的实时影片资讯APP测试5.1测试计划本次的测试主要是通过对Vue框架，H5、CSS3的前端界面，以及Axios获取接口的数据稳定性进行相关的测试，对基于Vue的实时影片资讯APP进行检查。5.2测试目的为了增加用户的体验感，在使用之前都要对软件进行测试，以便达到更好的体验性，也是防止了软件在使用过程中出现不必要的问题，由此对项目进行漏洞检测，能够提高实用性。5.3测试用例表5.1测试用例表测试用例方法预期结果进入用户登录不能发送验证码，无法实现登录用户点击城市接口，无法跳转相应城市而进行相应城市查找可以完成城市查找功能在进入到登录的页面之后，可以进行验证码的发送，Mongodb数据库接收到后，返回一个4位验证码，如图5.1所示。图5.1基于Vue的实时影片资讯APP登录验证码功能实现在登录界面进入之后，点击进入城市接口，能够获取到当前定位城市和所有城市信息，点击即可跳转到对应城市，如图5.2所示。图5.2城市定位接口测试5.4本章小结进行相关功能的测试及其稳定性的系统功能，提高使用的可行性，增强测试效果，将各种功能模块进行划分，提高整个系统的稳定性，此章节概括性的进行了APP的功能测试。 结论在本次的毕业设计经历中，联系到之前所学到的Vue和数据库的相对应的知识，与自己的相关工作相联系，历经无数的错误，终于完成了本次毕业设计的程序部分，便是实时影片资讯APP。该文章首先分析了实时影片资讯APP开发背景并且说明了其意义，然后分析了实时影片资讯APP所需要解决的了其中的一些需要解决的问题，最后对该APP所用到的用例进行了细致的基本说明。本文所开发的实时影片资讯APP已经应用与实际工作当中，可以较好满足用户们对于网上商城的业务需求。本文所设计并实现的系统在实际的工作中充分的考虑了本系统的各项需求，其中包括了可扩展性，可维护性和未来的需求变更等，并且本系统之中的各项重要参数均可以在系统之中进行配置，这样就大大的提高代码的灵活性，在安全性方面，本系统也做出了相应的解决方法，系统中的代码很多地方都用到了公共方法，所以系统的代码重用性很高，系统的伸展性也随之提高。实时影片资讯APP的设计与实现有效的提高了控制成本管理控制成本，对于其余的相关开发具有广泛的借鉴意义和参考价值。由于系统上线时间不久，有些可能存在的问题还没有暴露出来，所以本文系统还存在一定的不足。在实时性也许会有一点点的偏差性，在以后的系统会有更大一个层面的突破性，更能保障学生的安全性。

参考文献麦冬,陈涛,梁宗湾.轻量级响应式框架Vue.js应用分析[J].信息与电脑(理论版),2017(07):53肖萌.基于移动端网页界面的设计与实现[D].中南民族大学.2016沈剑翘,陈泽椿.Vue.js在构建系统前端SPA的应用[J].科技创新与应用,2020(03):181-182吕英华.渐进式JavaScript框架Vue.js的全家桶应用[J].电子技术与软件工程,2019(22):39-40陈鲱.Web前端开发技术以及优化方向分析[J].新媒体研究,2015(7):39-40阮晓龙.Web前端开发课程内容改革的探索与尝试[J].中国现代教育装备,2015(4):94-97潘志宏,罗伟斌,柳青.基于HTML5跨平台移动应用的研究与实践[J].电脑知识与技术,2013(6):3992-3995朴灵.深入浅出Node.js[M].人民邮电出版社,2013:124-131马新强,孙兆,袁哲.Web标准与HTML5的核心技术研究[J].重庆文理学院学报:自然科学版,2010,29(6):61-65张耀春.Vue.js权威指南[M].电子工业出版社,2016:257-269刘柳.基于Web前端的性能优化方案研究[D].华中科技大学,2015秦美峰.Web前端编程实践性教学的探索[J].福建电脑,2015(1):117-119RebaiSoumaya,KessentiniMarouane,WangHanzhang,MaximBruce.Webservicedesigndefectsdetection:Abi-levelmulti-objectiveapproach[J].InformationandSoftwareTechnology,2020(C):34-39

KrishnaVyas,FlaviusFrasincar.DeterminingthemostrepresentativeimageonaWebpage[J].InformationSciences,2017,(3):925-983BonnieFCanziani,DianneHBWelsh,Léo‐PaulDana,VelandRamadani.Claimingafamilybrandidentity:Theroleofwebsitestorytelling[J].CanadianJournalofAdministrativeSciences,2020(1):356-426DianatIman,AdeliPari,AsgariJafarabadiMohammad.User-centredwebdesign,usabilityandusersatisfaction:ThecaseofonlinebankingwebsitesinIran[J].KarimiMohammadAli.Appliedergonomics,2017,(1):51-56刘立.MVVM模式分析与应用[J].微型电脑应用，2012，28(12):57-60吕英华.渐进式JavaScript框架Vue.js的全家桶应用[J].电子技术与软件工程，2019.22:39-40刘智勇. JavaScript 开发技术大全[M].北京清华大学出版社，2009曹文渊.JAVA语言在计算机软件开发中的应用[J].电子技术与软件工程，2019(02):53-54徐延章.移动阅读APP交互体验设计的艺术范式[J].出版发行研究，2016(07):90-93张欣欣.HTML及百度地图API在WebGIS中的应用实例研究[J].江苏科技信息，2017(07):63-65王志宏.数据库技术在网站中的应用研究[J].皖西学院学报，2003(02):104-106康诺利.数据库设计教程[M].北京:北京机械工业出版社，2005唐琳，常瑜.以用户为中心的手持移动设备APP界面设计研究[J].山东社会科学，2015(S2):97-99马皎.论APP界面设计中的信息可视化交互[J].中小企业管理与科技(上旬刊)，2015.10:206王洋，吕曦.以用户体验为中心的不同终端下同一APP界面差异化设计[J].现代装饰(理论)，2015(04):114-115朱婧茜，何人可.Android手机应用界面布局的可用性测试研究[J].包装工程，2014(10):61-64致谢此次毕业设计课题基于Vue的实时影片资讯APP设计与实现的研究工作是在毕业设计王飞老师和陈佳美老师的细心指导下完成的，两位老师科学的教学方法以及严谨的工作态度给予本人极大的鼓励。在作品完成的过程中遇到了一些设计上的瓶颈以及技术上疑难点的境遇下，两位指导教师对本人进行了不懈的指导与帮助，指导本人完成技术上的不足和相关材料的整合，帮助自己及时的按照规定进度完成了毕业设计作品。在最后的大学生涯中完成了此次的设计。同时，在设计思路之中，两位指导教师也无时无刻的不在关心着本人的基本构思。感谢两位老师每次都是在百忙之中对本人进行不懈的指导。使得本人毕业设计与相关材料具有了完整性的完成，感谢两位教师对本人不厌其烦地进行详细的指导与严格的要求，在遇到瓶颈的同时又获得了及时性的帮助，同时也是表现出了教师工作的的辛苦性，感谢两位老师对本人不懈帮助，让自己度过了一个充满温馨的大学四年生涯。最后再次对每位教师工作者致以诚挚的问候，感谢王飞指导老师和陈佳美指导教师的悉心教诲，感谢各位老师耐心指导与无私帮助，感谢机电学院全体教师的帮助与鼓励。

捷键与一些电脑小技巧HYPERLINKwinkey+d:

这是高手最常用的第一快捷组合键。这个快捷键组合可以将桌面上的所有窗口瞬间最小化，无论是聊天的窗口还是游戏的窗口……只要再次按下这个组合键，刚才的所有窗口都回来了，而且激活的也正是你最小化之前在使用的窗口！

--这个就是winkeywinkey+f:

不用再去移动鼠标点“开始→搜索→文件和文件夹”了，在任何状态下，只要一按winkey+f就会弹出搜索窗口。

winkey+r:

在我们的文章中，你经常会看到这样的操作提示:“点击‘开始→运行’，打开‘运行’对话框……”。其实，还有一个更简单的办法，就是按winkey+r！

alt+tab:

如果打开的窗口太多，这个组合键就非常有用了，它可以在一个窗口中显示当前打开的所有窗口的名称和图标●，选中自己希望要打开的窗口，松开这个组合键就可以了。而alt+tab+shift键则可以反向显示当前打开的窗口。

winkey+e:

当你需要打开资源管理器找文件的时候，这个快捷键会让你感觉非常“爽”！再也不用腾出一只手去摸鼠标了！

小提示:

winkey指的是键盘上刻有windows徽标的键●。winkey主要出现在104键和107键的键盘中。104键盘又称win95键盘，这种键盘在原来101键盘的左右两边、ctrl和alt键之间增加了两个windwos键和一个属性关联键。107键盘又称为win98键盘，比104键多了睡眠、唤醒、开机等电源管理键，这3个键大部分位于键盘的右上方。

再补充点

F1显示当前程序或者windows的帮助内容。

F2当你选中一个文件的话，这意味着“重命名”

F3当你在桌面上的时候是打开“查找：所有文件”对话框

F10或ALT激活当前程序的菜单栏

windows键或CTRL+ESC打开开始菜单

CTRL+ALT+DELETE在win9x中打开关闭程序对话框

DELETE删除被选择的选择项目，如果是文件，将被放入回收站

SHIFT+DELETE删除被选择的选择项目，如果是文件，将被直接删除而不是

放入回收站

CTRL+N新建一个新的文件

CTRL+O打开“打开文件”对话框

CTRL+P打开“打印”对话框

CTRL+S保存当前操作的文件

CTRL+X剪切被选择的项目到剪贴板

CTRL+INSERT或CTRL+C复制被选择的项目到剪贴板

SHIFT+INSERT或CTRL+V粘贴剪贴板中的内容到当前位置

ALT+BACKSPACE或CTRL+Z撤销上一步的操作

ALT+SHIFT+BACKSPACE重做上一步被撤销的操作

Windows键+D：最小化或恢复windows窗口

Windows键+U：打开“辅助工具管理器”

Windows键+CTRL+M重新将恢复上一项操作前窗口的大小和位置

Windows键+E打开资源管理器

Windows键+F打开“查找：所有文件”对话框

Windows键+R打开“运行”对话框

Windows键+BREAK打开“系统属性”对话框

Windows键+CTRL+F打开“查找：计算机”对话框

SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单

SHIFT在放入CD的时候按下不放，可以跳过自动播放CD。在打开wo

rd的时候按下不放，可以跳过自启动的宏

ALT+F4关闭当前应用程序

ALT+SPACEBAR打开程序最左上角的菜单

ALT+TAB切换当前程序

ALT+ESC切换当前程序

ALT+ENTER将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换

PRINTSCREEN将当前屏幕以图象方式拷贝到剪贴板

ALT+PRINTSCREEN将当前活动程序窗口以图象方式拷贝到剪贴板

CTRL+F4关闭当前应用程序中的当前文本（如word中）

CTRL+F6切换到当前应用程序中的下一个文本（加shift可以跳到前

一个窗口）

在IE中：

ALT+RIGHTARROW显示前一页（前进键）

ALT+LEFTARROW显示后一页（后退键）

CTRL+TAB在页面上的各框架中切换（加shift反向）

F5刷新

CTRL+F5强行刷新1.打开“我的电脑”-“工具”-“文件夹选项”-“查看”-在“显示所有文件和文件夹”选项前打勾-“确定”

2.删除以下文件夹中的内容：

x:\DocumentsandSettings\用户名\Cookies\下的所有文件(保留index文件)

x:\DocumentsandSettings\用户名\LocalSettings\Temp\下的所有文件(用户临时文件)

x:\DocumentsandSettings\用户名\LocalSettings\TemporaryInternetFiles\下的所有文件(页面文件)

x:\DocumentsandSettings\用户名\LocalSettings\History\下的所有文件(历史纪录)

x:\DocumentsandSettings\用户名\Recent\下的所有文件(最近浏览文件的快捷方式)

x:\WINDOWS\Temp\下的所有文件(临时文件)

x:\WINDOWS\ServicePackFiles(升级sp1或sp2后的备份文件)

x:\WINDOWS\DriverCache\i386下的压缩文件(驱动程序的备份文件)

x:\WINDOWS\SoftwareDistribution\download下的所有文件

3.如果对系统进行过windoesupdade升级，则删除以下文件：x:\windows\下以$u...开头的隐藏文件

4.然后对磁盘进行碎片整理，整理过程中请退出一切正在运行的程序

5.碎片整理后打开“开始”-“程序”-“附件”-“系统工具”-“系统还原”-“创建一个还原点”(最好以当时的日期作为还原点的名字)

6.打开“我的电脑”-右键点系统盘-“属性”-“磁盘清理”-“其他选项”-单击系统还原一栏里的“清理”-选择“是”-ok了

7、在各种软硬件安装妥当之后，其实XP需要更新文件的时候就很少了。删除系统备份文件吧：开始→运行→sfc.exe/purgecache近3xxM。(该命令的作用是立即清除"Windows文件保护"文件高速缓存，释放出其所占据的空间)

8、删掉\windows\system32\dllcache下dll档(减去200——300mb),这是备用的dll档，只要你已拷贝了安装文件，完全可以这样做。

9、XP会自动备份硬件的驱动程序，但在硬件的驱动安装正确后，一般变动硬件的可能性不大，所以也可以考虑将这个备份删除，文件位于\windows\drivercache\i386目录下，名称为driver.cab，你直接将它删除就可以了，通常这个文件是74M。

10、删除不用的输入法：对很多网友来说，WindowsXPt系统自带的输入法并不全部都合适自己的使用，比如IMJP8_1日文输入法、IMKR6_1韩文输入法这些输入法，如果用不着，我们可以将其删除。输入法位于\windows\ime\文件夹中，全部占用了88M的空间。

11、升级完成发现windows\多了许多类似$NtUninstallQ311889$这些目录，都干掉吧，1x-3xM

12、另外，保留着\windows\help目录下的东西对我来说是一种伤害，呵呵。。。都干掉！

13、关闭系统还原：系统还原功能使用的时间一长，就会占用大量的硬盘空间。因此有必要对其进行手工设置，以减少硬盘占用量。打开"系统属性"对话框，选择"系统还原"选项，选择"在所有驱动器上关闭系统还原"复选框以关闭系统还原。也可仅对系统所在的磁盘或分区设置还原。先选择系统所在的分区，单击"配置"按钮，在弹出的对话框中取消"关闭这个驱动器的系统还原"选项，并可设置用于系统还原的磁盘空间大小。

14、休眠功能会占用不少的硬盘空间，如果使用得少不妨将共关闭，关闭的方法是的：打开"控制面板"，双击"电源选项"，在弹出的"电源选项属性"对话框中选择"休眠"选项卡，取消"启用休眠"复选框。

15、卸载不常用组件：XP默认给操作系统安装了一些系统组件，而这些组件有很大一部分是你根本不可能用到的，可以在"添加/删除Windows组件"中将它们卸载。但其中有一些组件XP默认是隐藏的，在"添加/删除Windows组件"中找不到它们，这时可以这样操作：用记事本打开\windows\inf\sysoc.inf这个文件，用查找/替换功能把文件中的"hide"字符全部替换为空。这样，就把所有组件的隐藏属性都去掉了，存盘退出后再运行"添加-删除程序"，就会看见多出不少你原来看不见的选项，把其中那些你用不到的组件删掉（记住存盘的时候要保存为sysoc.inf，而不是默认的sysoc.txt），如Internat信使服务、传真服务、Windowsmessenger，码表等，大