基于Vue.js的影院购票微信小程序的设计与实现

目录一设计背景 4 课题现状 4 课题现状 4二开发环境及技术构架 5 2.1开发环境与工具 5 2.2技术架构 52.2.1Mysql技术 52.2.2Vue.js技术 5三需求分析 6 3.1系统目标 6 3.2功能需求 6 3.3性能要求 6四系统设计 74.1系统功能总体设计 74.2系统详细设计 74.2.1首页页面 74.2.2操作流程 74.2.3影院页面 84.2.4操作流程 84.2.5我的页面 94.2.6操作流程 94.3系统数据库设计 94.3.1数据库实体设计 94.3.2数据库表设计 11五系统实现 12 5.1电影首页模块 12 5.2切换城市模块 14 5.2影院模块 185.2.1选座模块 205.3我的模块 235.3.1登陆模块 255.3.2注册模块 26六系统测试 296.1测试用例设计 296.2测试结果 33七总结 34参考文献 1附录 2TOC\o"1-3"\h\u一设计背景课题现状近年来，中国电影产业蓬勃发展，电影票房持续攀升，观影人次不断增长，电影已成为人们日常生活中不可或缺的文化娱乐方式。随着生活水平的提高，人们对精神文化生活的需求日益增长，去电影院观看电影逐渐成为一种潮流。然而，面对海量的电影信息，观众难以快速有效地获取心仪影片的相关资讯，传统购票方式也存在着排队时间长、购票流程繁琐等问题。互联网技术的迅猛发展为电影产业带来了新的机遇，网络购票平台应运而生，为观众提供了便捷、高效的购票渠道。课题现状现在人可以在网上完成买票、退票、选票、购买饮料和小吃等操作在该公司推出的电商平台上，可以不需要到店就可以完成，目前虽然已经有很多基于Vue.js的相关小程序，但是我们对于小程序的开发还是很少。经过我们的观察，在使用一个小程序的时候，用户们都是先看一个小程序的外观，如果你拥有一个漂亮和精美的界面才会吸引下一次用户打开小程序，为了让用户可以经常的点击尝试进入每一个界面和每一个按钮，用户可以了解小程序的内容，所以，对于小程序的制作来说，页面设计占据了很大一个板块。二开发环境及技术构架2.1开发环境与工具影院购票小程序是Vant技术，基于Vue框架开发而成，采用微信开发者工具而成。系统所用的系统开发环境如下表2-1所示。表2-1系统开发环境环境版本微信开发者工具1.06.2405010服务器操作系统Win10用户界面Vue框架下面对本系统所选用的技术进行简单的介绍：（1）Vant技术Vant是一个基于Vue.js的移动端UI组件库，其宗旨是为了开发者提供高质量、易于使用的组件，可以帮助开发者快速构建高性能的移动应用。2.2技术架构该小程序系统运用Vant技术，采用Vue.js框架进行开发。2.2.1Mysql技术MySQL是一种开源的关系型数据库管理系统，由瑞典MySQLAB公司开发，现在由Oracle公司维护。MySQL支持多个操作系统，包括Linux、Windows、macOS等。它是一种客户端/服务器模式的数据库，提供高效、可靠、稳定的数据存储和管理服务。2.2.2Vue.js技术Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发设计。其核心库聚焦视图层，易于学习，能轻松与其他库或已有项目整合。它是无依赖的JavaScrip库，引入一个js文件即可使用，提供MVVM风格双向数据绑定，核心是ViewModel，负责连接View和Model，确保视图与数据一致，以轻量级架构助力前端高效、便捷开发。三需求分析3.1系统目标通过微信小程序这一平台，用户可以随时随地进行电影票查询和支付，极大地提升了购票的便捷性。从技术层面来看，该系统的实现将推动微信小程序在交通出行领域的应用创新，为后续的相关技术开发提供参考和借鉴。对于铁路部门而言，这样的系统有助于提升车票销售效率，减少线下售票压力，实现资源的优化配置。3.2功能需求本系统是便于人们线上购票方便而开发的一款小程序。主要内容包括：电影相关详情排片、线上选位置购票、购买小吃和饮品、切换城市所在地、查询附近影城。（1）电影展示模块：展示当前最新上映的电影列表，包括电影名称、票价观影时间等信息；（2）座位选择模块：用户选定场次后，系统展示场次座位的分布图选择用户想坐的位置；（3）购票结算模块：在确认用户进行购票后，系统将会生成订单和结算，可支付；（4）地址模块：用户可更改城市所在地更方便购票；（5）查找影城模块：可显示附近的影城然后进行选座、购票；3.3性能要求 本系统有以下几个性能要求：（1）响应时间（Responsetime）：用户与系统的交互在3秒内能得到响应，让用户有更好的体验；（2）并发用户数（Concurrentusers）：可以允许多个用户同时进入小程序，避免小程序系统或者页面崩溃；（3）页面渲染：用户在进入小程序后要及时渲染出效果；（4）页面流畅度：保证各个页面之间的跳转是流畅的进行；（5）用户登录：要第一时间弹出登陆注册页面选项；（6）实时性：要及时更新排片选位置等情况，保证用户第一时间获得最准确的信息；四系统设计4.1系统功能总体设计基于Vue框架设计与实现主要实现了电影首页、影城、我的模块结构图如图4-1所示。图4-1系统结构图4.2系统详细设计4.2.1首页页面 制作首页页面可以让我们用户进来有一个好的体验4.2.2操作流程 进入小程序第一个页面，就是首页轮播图会自动展示最近上映的新电影，下面也有最近上映的电影可以查看详情还可以切换城市地址例如图4-2所示。图4-2首页页面操作流程图4.2.3影院页面 用户可以在这里面进行查找附近影院4.2.4操作流程进入影院页面可以查看附近的电影院点击进去可以查看每部电影的排片时间后进行选座选座之后可以进行下单支付如图所示。图4-3影院页面操作流程图4.2.5我的页面 在这个页面可以进行自己的一些设置4.2.6操作流程进入页面之后有一个登陆注册的页面，登陆之后数据会存储在数据库里如图所示。图4-5我的页面操作流程图4.3系统数据库设计4.3.1数据库实体设计在此阶段，用户们可以一起参与和评价数据库系统的设计，从而有利于保证数据库系统的设计与用户的需求相吻合。在概念模式的设计中，E-R模型法是最常见的设计方法，下面进行详细介绍：（1）用户信息E-R图如图4-6所示。图4-6用户信息实体属性图（2）电影信息E-R图如图4-7所示。图4-7电影信息实体属性图4.3.2数据库表设计本系统采用MYSQL数据库进行系统数据的储存，主要的数据库表的具体设置如下：seatSelection选座信息表包电影数据、排片数据、座位数据、已选座位、价格等字段，具体表信息如下表4-1所示。表4-1seatSelection选座信息表列名数据类型长度是否主键是否可空说明cinemaPlanint11是否电影数据moviePlanint11否是排片数据seatDatavarchar50否是座位数据selectlistvarchar20否是已选座位pricevarchar20否是价格（2）Cinema信息表包括电影id、图片、价格、电影名称、主演、电影介绍等字段，信息如下表4-2所示。表4-2cinema信息表列名数据类型长度是否主键是否可空说明idint11是否电影idPngvarchar20否是图片Pricevarchar10否是价格namevarchar30否是电影名称Parametervarchar10否否主演Introductionvarchar20否否电影介绍

五系统实现5.1电影首页模块用户打开小程序的第一个页面如图5-1所示。图5-1系统登录界面图主要代码如下：<!--

<view

></view>

--><navigator

class="back"

open-type="navigateBack"

delta="1">

<van-icon

name="arrow-left"

size="50rpx"/></navigator><image

src="{{detailData.poster}}"

class="photo"

mode="aspectFill"></image><view

class="contentbox">

<view

class="name"></view><view

class="btn"

bindtap="changetxt">

<image

src="/images/{{txtaction=='hidden'?'down':'up'}}.png"></image>

<text>

{{txtaction=='hidden'?

'展开':'收起'}}</text></view><!--

参演人员

--><view

class="personnel"><view

class="title">参演人员</view><view

class="photobox">

<view

class="item"

wx:for="{{detailData.actors}}">

<image

src="{{item.avatarAddress}}"

mode="aspectFill"></image>

<view

class="name">{{}}</view>

<view

class="name_role">{{item.role}}</view>

</view></view></view><!--

剧照

--><view

class="personnel"><view

class="title

tit"

bindtap="showAll">

<text>剧照</text>

<text

class="all">全部(5)</text></view><view

class="photobox">

<view

class="item

imgitem"

wx:for="{{detailData.photos}}">

<image

src="{{item}}"

mode="aspectFill"></image>

</view></view></view><van-button

type="primary"

size="large"

color="linear-gradient(to

right,

#ff976a,

#f7692c)">

</van-button>5.2切换城市模块用户可以查看城市所在地附近的影城和电影票最低价格如图5-2所示。图5-2切换城市界面图主要代码如下：//

pages/city/city.jsPage({

data:

{

citylist:[

{

"first":"A",

"listdata":["a1","a2","a3","a4"]

},

{

"first":"B",

"listdata":["b1","b2","b3","b4"]

},

{

"first":"C",

"listdata":["c1","c2","c3","c4"]

},

{

"first":"D",

"listdata":["d1","d2","d3","d4"]

},

]

},

onLoad(options)

{

this.getdata()

},

getdata:function(){

const

citylist

=

[]

wx.request({

url:

'/film/api/v1/getCitiesInfo',

success:

(result)

=>

{

//

console.log(result.data.data.cities)

const

res

=result.data.data.cities

const

firstPin

=["A",

"B",

"C",

"D",

"E",

"F",

"G",

"H",

"J",

"K",

"L",

"M",

"N",

"P",

"Q",

"R",

"S",

"T",

"W",

"X",

"Y",

"Z"]

for

(let

i

=

0;

i

<

firstPin.length;

i++)

{

//

console.log(firstPin[i])

const

list

=

[]

res.forEach(item

=>

{

const

pinStart

=

item.pinyin[0].toUpperCase()

if

(pinStart

===

firstPin[i])

{

list.push(item)

}

});

citylist.push({first:firstPin[i],listdata:list})

}

this.setData({

citylist

})

},

})

},

onReady()

{

},

*/

onShow()

{

},

onHide()

{

},

onUnload()

{

},

onPullDownRefresh()

{

},

onReachBottom()

{

},

onShareAppMessage()

{

}})5.2影院模块图5-3影院界面图主要代码如下：Page({

data:

{

cinemaData:[]

},

onLoad(options)

{

this.getCinemaData()

},

getCinemaData:function(){

const

city

=

wx.getStorageSync('city')

//

console.log(city)

let

url

=

'/film/api/v1/getCinemaList?pageSize=20'

if

(city)

{

url

=

"/film/api/v1/getCinemaList?cityId="+city.cityId+"&pageSize=20"

}

wx.request({

url:url,

success:

(result)

=>

{

//

console.log(result.data.data.cinemas)

this.setData({

cinemaData:result.data.data.cinemas

})

},

})

},

gotoDetail:function(e){

//

console.log(e.currentTarget.dataset.cinemaid)

wx.navigateTo({

url:

'/pages/cinemaDetail/cinemaDetail?id='+e.currentTarget.dataset.cinemaid,

})

},

onReady()

{

},

onShow()

{

this.getCinemaData()

},

onHide()

{

},

onUnload()

{

},

onPullDownRefresh()

{

},

onReachBottom()

{

},

onShareAppMessage()

{

}})5.2.1选座模块图5-5选座界面图主要代码如下：<!s/seatSelection/seatSelection.wxml--><view

class="classbox">

<view

class="item">

<view

class="box

selection"></view>

<text>已售</text>

</view>

<view

class="item">

<view

class="box

Unselected"></view>

<text>{{MoviePlan.salePrice/100}}元</text>

</view></view><view

class="pm">

<image

src="/images/电影-选座页面-荧幕icon.png"></image>

<text>{{MoviePlan.hallName}}

银幕</text><view

class="notice">

<van-tag

plain

type="warning">儿童须知</van-tag>

<text>儿童需购票入场VIP厅及指定特效厅</text>

</view>

</view><van-button

type="primary"

size="large"

color="linear-gradient(to

right,

#fdba63,

#fc7b03)"

wx:if="{{!selectlist.length}}">请先选座</van-button><van-button

type="primary"

size="large"

color="linear-gradient(to

right,

#ffb732,

orangered)"

wx:if="{{selectlist.length}}"

bindtap="gotoPay"

>{{MoviePlan.salePrice/100*selectlist.length}}元

确认选座</van-button>5.3我的模块图5-6我的界面图主要代码如下： <!--

顶部状态栏

--><view

class="bar-box"

style="height:

{{navBarHeight}}px;">

<view

class="level"

style="margin-top:

{{barHeight}}px;">

<view

class="level

bar"

bindtap="headClick"

wx:if="{{show}}">

<image

class="top-head"

src="../../images/pxz.jpg"

mode="widthFix"></image>

<view

class="welcome">

<text

class="nick">{{

user.username

||

'未登录'

}}</text>

<text

class="acount">189****8888</text>

</view>

</view>

<view

class="bar-title"

wx:else>个人中心</view>

<view>

<view

class="money">

<text>成长值</text>

<text

class="money-text">110/200</text>

</view>

<view

class="share-text">这个同学有点懒，还没有写简介哦！</view>

</view>

<view

class="share-btn">查看详情</view>

</view></view><view

class="level

sign-box">

<view>想看</view>

<view>看过</view></view>

</block></view><view

style="padding-left:

18px;">精选服务</view><view

class="white-boxx">

<view

class="small-box">

<image

style="width:

190px;height:

100px;"

mode="aspectFit"

src="../../images/img4.png"

alt=""

/>

</view>

</view>

<view

class="white-box">

<button

class="row"

style="width:

100%;border-bottom:

none;

justify-content:

center;

"

bind:tap="onLogin">

{{

user.username

?

'退出登录'

:

'登录'

}}

</button></view><view

class="copy">

<text>©2203尹菲</text></view>5.3.1登陆模块管理员可以添加，修改，删除绩效信息，主要包括姓名，月份，绩效等，其界面展示如图5-7所示。图5-7登陆管理界面图主要代码如下： <view

class="container">

<view

class="input-group">

<input

class="input"

placeholder="请输入用户名"

bindinput="onUsernameInput"

/>

</view>

<view

class="input-group">

<input

class="input"

placeholder="请输入密码"

password="true"

bindinput="onPasswordInput"

/>

</view>

<button

class="login-btn"

bindtap="onLogin">登录</button>

<button

class="register-btn"

bindtap="navigateToRegister">注册</button></view>5.3.2注册模块图5-8注册管理界面图主要代码如下：<view

class="container">

<view

class="input-group">

<input

class="input"

placeholder="请输入用户名"

bindinput="onUsernameInput"

/>

</view>

<view

class="input-group">

<input

class="input"

placeholder="请输入密码"

password="true"

bindinput="onPasswordInput"

/>

</view>

<view

class="input-group">

<input

class="input"

placeholder="请再次确认密码"

password="true"

bindinput="onConfirmPasswordInput"

/>

</view>

<button

class="register-btn"

bindtap="onRegister">注册</button>

<button

class="login-btn"

bindtap="navigateToLogin">登录</button></view>

六系统测试6.1测试用例设计本系统设计了6个测试用例，具体测试用例设计如下表6-1至6-6所示：表6-1“电影首页”功能测试用例测试用例目标对“轮播图”功能进行测试用例的初始化打开商城首页测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-01在首页等待三秒后切换下一张图片轮播效果成功与期望结果一致Result-02等待3-5秒无反应轮播图效果失败与期望结果一致表6-2“热映页面”功能测试用例测试用例目标对“查看详情”功能进行测试用例的初始化打开影片界面测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-03选择一部影片点击查看详情会跳出演出人员的名字内容概要等查看详情效果成功与期望结果一致Result-0选择一部影片点击查看详情无反应查看详情效果失败与期望结果一致表6-3“切换城市”功能测试用例测试用例目标对“切换城市”功能进行测试用例的初始化打开购票首页测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-05在点击城市然后在首写字母为C下面选择长沙退出后显示长沙切换城市效果成功与期望结果一致Result-06在点击城市然后在首写字母为C下面选择长沙退出后无显示切换城市效果失败与期望结果一致表6-4“购票”功能测试用例测试用例目标对“购票”功能进行测试用例的初始化打开选择的影城测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-07选好位置后点击立即支付支付后显示支付成功购票成功与期望结果一致Result-08选好位置后点击立即支付无反应购票失败与期望结果一致表6-5“购票”功能测试用例测试用例目标对“购票”功能进行测试用例的初始化打开选择的影城测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-09选好位置后点击立即支付支付后显示支付成功购票成功与期望结果一致Result-10选好位置后点击立即支付无反应购票失败与期望结果一致表6-6“影院模块”功能测试用例测试用例目标对“影院”功能进行测试用例的初始化打开测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-11点击“影院”会显示附近的影城可以进行线上购票选座购票成功与期望结果一致Result-12选好位置后点击立即支付无反应购票失败与期望结果一致表6-7“登录页面”功能测试用例测试用例目标对“登录”功能进行测试用例的初始化点击登录按钮测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-13点击登录按钮然后输入已有的用户名和密码登录成功与期望结果一致Result-14点击登录按钮然后输入已有的用户名和密码然后显示登录失败登录失败与期望结果一致表6-8“注册页面”功能测试用例测试用例目标对“注册”功能进行测试用例的初始化点击注册按钮测试结果评估标准测试的每一个步骤都与期望结果一致测试过程编号操作步骤与测试数据期望结果实际结果Result-15输入想要注册的用户id和密码然后点击完成注册成功跳转登录页面与期望结果一致Result-16输入想要注册的用户id和密码然后点击完成然后弹出注册失败框注册失败与期望结果一致6.2测试结果把上述所有描述的功能模块都进行了测试，结果都和预期结果一样可以实现效果。

七总结该系统用了微信开发者工具、Vant技术、Vue框架和mysql技术结合而成的，可能完成的不是特别好在制作过程中边学边问其中还有很多做的不是很好很完善的地方。这个系统整体用这些技术实现了电影首页、切换城市页面、热映页面、选座页面、影城页面、个人登陆页面和注册页面虽然页面不是特别多但都是我自己个人一点一点琢磨然后