基于Vue+SpringBoot的电影订票系统

基于Vue+SpringBoot的电影院订票系统

摘要:随着我国国民生活水平的提高,人们不再只追求温饱,各种精神上的享受绵绵不绝,人们更是喜欢在闲暇时间选择看电影放松心情。看电影的主要形式也从以前的露天电影转变到现在的室内放映厅。由于我国人口基数大,看电影的人也相应地多了起来,随之而来的也就是传统购票方式的排队难、买票难的问题,电影院订票系统应运而生。电影院订票系统解决了线下排队难的问题,用户在线选择需要观看的影片与其对应的场次,然后选座购买即可。
如若用户想看的电影在某一档期的票已售罄,用户可选择查看该影片在何时何地会放映从而继续订票观影。
本课题从我国国情出发,结合现实生活实际,阐明设计实现该系统的原因与意义,而后对该系统的各个功能模块需求进行研究分析,基于研究得出相关需求文档以及系统设计文档。最后采用前后端分离模式,前端采用Vue,结合ElementUI等实现前台以及后台系统的页面设计以及前端逻辑处理,后端采用Springboot + SpringMVC + Mybatis + Shiro实现该系统的功能开发以及系统测试,该系统具备了如下功能:
1.系统为用户进行热播电影推荐以及高分电影推荐;
2.系统管理员可对用户以及电影进行操作;
3.用户可以选座订票以进行观影。
关键词:电影院,选座,订票

Movie Tickets Booking System Based On Vue+SpringBoot
Abstract:With the improvement of people’s living standard in our country, people no longer only pursue food and clothing, a variety of spiritual enjoyment is continuous, people like to choose to watch movies in their leisure time to relax. The main form of movie watching has also changed from the former open-air movie to the present indoor screening hall. Due to the large population base of our country, the number of people who watch movies has increased correspondingly, which is followed by the traditional way of ticket queuing difficult, difficult to buy tickets, movie tickets booking system came into being. The movie tickets booking system solves the problem of offline queuing difficulty by allowing users to choose the films they want to watch and the corresponding sessions online, and then select seats to buy. If the movie they want to see is sold out at a certain date, they can choose to see when and where the movie will be shown to continue booking.
This topic is from the perspective of China’s national conditions, combining the reality of real life, to clarify the design realize the reason and significance of the system, and study of each functional module of the system demand analysis, based on the study related requirements document and the system design document. Finally adopt the separation mode, before and after the front using the VUEJS, the foreground and the background systems such as Element UI combining with logic and front page design processing, the back-end for SpringMVC, Springboot, Mybatis and Shiro was adopted to realize the function of the system development and system test, The system has the following functions:
1.The system recommends popular movies and high score movies for users;
2.The system administrator can operate on users and movies;
3.Users can choose seats to book tickets for watching movies.
Keywords: Cinema, Check The Seat, Book The Ticket

目 录

第一章 绪 论 1
1.1研究背景和意义 1
1.2课题研究内容 1
1.3论文结构安排 2
第二章 电影院订票系统需求分析 3
2.1总体目标 3
2.2总体需求设计 3
2.3用户需求分析 3
2.4功能性需求分析 5
2.4.1用户模块 5
2.4.2管理员模块 8
2.5非功能性需求分析 9
第三章 电影院订票系统的总体设计 11
3.1系统设计目标与设计原则 11
3.1.1系统设计目标 11
3.1.2系统设计原则 11
3.2系统总体框架 11
3.3功能设计 12
3.3.1用户模块 12
3.3.2管理员模块 13
3.4数据库设计 13
3.4.1数据库设计原则 13
3.4.2系统数据库设计 13
3.4.3系统数据库访问的实现 19
第四章 电影院订票系统的实现 20
4.1系统运行环境与开发环境 20
4.1.1系统运行环境 20
4.1.2系统开发环境 20
4.2系统实现关键技术介绍 20
4.3模块功能实现 21
4.3.1用户模块 21
4.3.2管理员模块 30
第五章 电影院订票系统的测试 34
5.1系统测试概述 34
5.1.1系统测试目的 34
5.1.2系统测试所需环境及设备 34
5.1.3测试流程 34
5.2 系统的功能测试 35
5.2.1 选座功能测试 35
5.2.2 登录功能测试 36
5.3 测试总结 38
第六章 课题总结与展望 39
6.1总结 39
6.2展望 39
参考文献: 40
致谢 41

第一章 绪 论

1.1研究背景和意义
随着我国国力增强,人民的生活水平也越来越高,在现代化科技盛行的时代大背景下,越来越多人选择在闲暇时间去电影院感受电影文化,据统计,2019年的中国内地电影票房已经达642.66亿元,观影人次超过17.27亿。由此可见,我国国民越来越热忱于在闲暇时间观看电影。当网络在我国并不普及的时期,想要看电影就必须得去电影院排队买票,有时候遇到经典电影或者好评率高的电影便会大排长龙,这时排队买票对于远离某家电影院但是想看电影又得去这家电影院买票的人是不友好的,为了更方便我国网民线上购票观影,“电影院订票系统应运而生”。
“电影院订票系统”解决了排队难、买票难、选择难的难题。一方面,用户无须出门,只要通过这个系统便可以查询某家电影院哪个时间段播放哪部电影,在电影播出前选票订购便可前往观影,极大的减少了用户的买票时间。另一方面,电影院不需要太多人力便可以售出更多的票,降低了运营成本;除此之外,当用户不知道有哪些好口碑电影时,系统会根据其他用户们的综合评价来推荐给用户进行挑选。
1.2课题研究内容
随着人们对精神需求的扩大,闲暇时间在电影院观影已经成为了大多数人的第一选择。结合我国背景来说,传统的排队购票观影在时间上已经浪费了太多资源,观影的排队买票难的问题亟需解决。电影院订票系统在解决客户需求时也方便的各大影院商家。
本课题主要研究人们对电影院订票系统的需求以及该如何着手实现,在满足用户基本的选择影片,选座,下单,观影的需求外,用户还可以对已观看的电影进行评分评论,系统还为用户推荐了口碑好的电影以及最新上映的电影。与此同时,搭配的后台管理系统也让管理员能够清晰地了解用户量以及订单量并依据该数据对电影排期进行操作。
1.3论文结构安排
本论文一共分为五个部分,具体内容安排如下:
第1章:绪论。主要介绍本课题的研究背景及其开发意义,对电影院订票系统的实际应用做简单介绍。
第2章:电影院订票系统需求分析。介绍本课题的总体目标,对用户需求与分功能性需求进行分析。
第3章:电影院订票系统的总体设计。介绍系统的设计原则与最终设计目标,介绍数据库的总体设计以及设计原则,并对功能模块设计以及数据库表的设计进行一一阐述。
第4章:电影院订票系统的实现。介绍该系统的运行环境与开发环境。对该系统各个功能模块的实现进行详细介绍。
第5章:电影院订票系统的测试。介绍电影院订票系统的测试方法。
最后,对本课题进行总结。

第二章 电影院订票系统需求分析

2.1总体目标
设计出一个让用户易上手、功能齐全、交互优良的电影院订票系统,应用与实际生活,减少用户等待时间
2.2总体需求设计
1.应用场景:该系统适用于用户在选择网上购买电影票时的场景。用户登录电影院订票系统,如果有想要观看的影片可直接在首页搜索栏中选择影片搜索功能进行搜索,选中影片都点击图片查看影片详情,点击“选座购票”可进入选座页面进行选座购票。
2.关键流程:用户在选座后并且确认选座时,前台页面会锁定已选座位的选座功能,即他人不能进行选座,该用户除“重置座位”外也不能操作已选座位。用户选定座位并选择支付方式时,如果未完成支付,该订单便有一个失效时间(目前设定为30分钟内不支付即自动取消该订单);如果完成支付,用户便会收到一条支付成功的信息,信息包含电影名称、播放时间、座位、播放地点、影院名称等信息。后台管理系统则可以实时看到整个系统用户信息、订单信息、影院信息、影片信息等。
2.3用户需求分析
电影院订票系统主要涉及三类人员:
1.游客:未登录系统的游客仅能进行注册以及在首页进行搜索影片操作。
基于Vue+SpringBoot的电影订票系统_第1张图片

图2.1游客用例图
2.用户:游客注册成为用户后,可进行登录,当用户登录系统后可进行一系列操作。用户能查看电影院订票系统的所有电影,包括热映电影、最新上线电影、系统推荐电影,以及普通分类电影,若对某个电影感兴趣都可点击查看详情,查看详情后可进行选座购票,选座时若确认选座,其他人不能对已确认选座的座位进行选择,购票后在电影开播前三十分钟若对此订单有任何的不满意均可以退票。用户可以在系统进行修改个人信息操作
基于Vue+SpringBoot的电影订票系统_第2张图片

图2.2用户用例图
3.管理员:管理员可以在后台管理系统对系统所有资源进行维护。例如:查看修改用户资料,监控订单状态,对影片上新进行信息修改以及纠错,下架影片;当影院加盟合作时进行增加影院操作;管理用户评论,当用户评论涉及到敏感话题时及时做出删除评论操作;增加电影场次,根据影院进行协调安排场次时间,增加电影场次。
基于Vue+SpringBoot的电影订票系统_第3张图片

图2.3管理员用例图
2.4功能性需求分析
在浏览各大电影网站以及订票网站后以及结合实际情况对该系统进行需求修改,该系统的主要功能如下:
2.4.1用户模块
2.4.1.1注册
当用户未注册时只能浏览与搜索电影院订票系统中的影片和查看该影片详情,后续操作需要登录才能执行。
2.4.1.2登录
用户登录时,系统根据用户角色权限跳转页面,若是管理员用户跳转至后台管理系统;若是普通用户则跳转至电影院订票系统首页,普通用户登录后可以了解更多前台页面展示的影片信息或者选座订票。
2.4.1.3热映电影
该功能模块数据来自所有用户在本系统中的成交订单量最高的前六位进行展示,热映电影与该电影的评分高低无关。
2.4.1.4推荐电影
该功能模块数据来自各电影的评分的平均分排名前十名进行推荐,旨在为用户推荐口碑好的电影。
2.4.1.5电影详情展示
此模块显示了关于影片中部分详细信息,包括电影海报,电影名称,导演,演员,电影时长,上映时间为:首次上映在何时何地上映。
2.4.1.6选座订票
基于Vue+SpringBoot的电影订票系统_第4张图片

图2.4用户选座订票流程图
选座订票模块分为选座与订票两个部分:
1.选座:当用户进行选座时可以根据用户需求进行推荐选座,该推荐选座从放映厅的中间座位开始进行推荐,当用户点击确认选座时将会在当前页面锁定座位,并不影响其他用户对该用户当前锁定的座位进行选择,只有用户进行确认选座时其他用户才不可对已选座位进行选择。
2.订票:用户在确认选座后会有一个支付界面,若用户在未支付订单失效时间内未完成付款则取消该订单;若用户在电影开场前由于各种原因想取消订单时,可在个人中心“我的订单”点击“取消订单”即可,用户取消的订单会以“取消态”出现在用户的订单记录中。
2.4.1.7支付
该功能决定电影院订票系统的核心业务——选座订票观影是否能够按照业务流程完成。用户在确认选座后并支付完成才能获取观影资格。
2.4.1.8评分评论
用户可以在观看电影后前往个人中心中“我的订单”对影片进行评价,评价后用户不能修改、删除该评价。
2.4.1.9搜索影片
用户可以在系统主页进行搜索影片,此功能用户不登录亦可以进行使用。
2.4.2管理员模块
2.4.2.1用户管理
系统管理员登录后台管理系统后对用户进行增加用户,修改用户信息,删除用户,查询用户状态等操作。
2.4.2.2影片管理
系统管理员登录后台管理系统后对影片进行管理,如更新影片信息,下架影片,查询影片,影片引入等操作。
2.4.2.3订单管理
系统管理员登录后台管理系统后对订单进行监控,订单由用户选座订票成功交易而成,为保证用户订单信息的真实性,因此管理员不能在后台对订单进行增加订单、修改订单、删除订单等操作,目前系统功能可以支持用户在开场时间前无理由取消订单并退款。
2.4.2.4评分管理
系统管理员登录后台管理系统后对电影评分进行监控,如遇到敏感评论可对此评论进行删除。
2.4.2.5影院管理
系统管理员登录后台管理系统后对影院进行管理,如更新影院信息,新增加盟影院,当某影院取消合作时删除该影院信息。
2.4.2.6场次管理
系统管理员可以在后台管理系统中查看当前已发布的场次信息,并根据场次时间对场次进行调整以及新增场次。
2.5非功能性需求分析
非功能性需求是一个合格的软件产品不能忽视的一部分,在一个系统设计之初就需要考虑到其易用性、可靠性、兼容性、性能、安全性。电影院订票系统的设计兼顾到了以下五个非功能性需求:
1.易用性:用户在整个购票流程中的体验对于系统来说极为重要,因此页面设计的流程是否清晰,用户是否能简单的点击操作便可以完成购票,都会对用户的体验造成十分重要的影响。
2.可靠性:为确保系统的可靠性,电影院订票管理系统采用了在开发阶段都会对单个模块进行大量的模拟数据测试,模块测试成功后会在系统设计完成时进行系统测试以及集成测试,前台系统使用多个普通用户进行测试,后台管理系统使用多个测试用例对整个后台管理系统进行测试。
3.兼容性:电影院订票系统要求兼容IE11以及市面上主流浏览器,因为在技术选型时,确定了前端采用Vue,但是Vue由于ES6不受IE支持,所以安装了babel-polyfill,因此不会导致对浏览器的兼容出现问题。
4.性能:电影院订票系统涉及到关于图片的大量查询操作,后端采用druid;前端则使用LocalStorage对经常需要获取且极少变更的数据进行本地存储,减少对服务端的请求。
5. 安全性:电影院订票系统涉及到了大量的用户数据以及影片资源,因此在安全层面进行了加强管理。后台采用JWT 与Shiro进行登录鉴权与API保护;前端使用路由策略进行权限控制,角色为普通用户的用户无法访问后台管理系统,并且未登录前无法访问特定路径。

第三章 电影院订票系统的总体设计

3.1系统设计目标与设计原则
3.1.1系统设计目标
在保证系统的可持续发展的前提下,打造一个具备易操作性、人性化、响应迅速的电影院订票系统。
3.1.2系统设计原则
电影院订票系统设计按以下原则设计:
1.可扩展性:通过注册管理接入接口:提供系统配置管理,对所有接口进行注册与配置管理,接口的实现与主程序松耦合,具有与其他系统进行接口对接的能力。
2.规范性:接口采用传统风格,查询获取信息使用get方式,增删改使用post方式,使开发者从接口中就能清晰明了的知道要获取何种资源以及执行何种操作。
3.前进性:系统开发采用前后端分离模式,使前后端开发人员可以更专注于各自擅长的领域,提升开发的效率。
3.2系统总体框架
该系统采用前后端分离模式,最大化地将前后端代码解耦。前后端分离开发在系统出现bug的时候快速地将bug精准定位到前端或者后端,不仅如此,该模式更增加了前后端代码的可维护性以及程序的易读性。借助Swagger,后端开发了哪些接口都可一览无遗,前端不需要等后端开发了所有接口才能开始进行页面的开发,从而大大提高开发效率,减少项目天/人数。前端只需要关注页面的设计以及一些格式化的逻辑处理,后端关注业务逻辑以及数据的存取,前后端使用JSON形式进行交互,使用CORS解决跨域。
基于Vue+SpringBoot的电影订票系统_第5张图片

图3.1前后端分离模式架构图
3.3功能设计
基于Vue+SpringBoot的电影订票系统_第6张图片

图3.2电影院订票系统系统模块图
根据需求分析得出电影院订票系统整个系统所需模块如上图,前台系统中的各个模块紧密联系实现一整个选座订票业务操作,后台管理系统分别对各个模块的数据进行维护。
3.3.1用户模块
前台系统首页使用了轮播图展示热映电影,使用栅格布局展示影片并使用左侧边栏展示高分电影以及搜索影片的搜索框。前台系统实现了包括注册、登录、热播电影、电影详情、选座订票、支付、评分评论、搜索影片等九大功能模块。
3.3.2管理员模块
后台管理系统有六大模块,即用户管理、影片管理、订单管理、影院管理、评分管理与场次管理,各个管理模块对数据库表中的记录进行浏览与维护。
3.4数据库设计
3.4.1数据库设计原则
数据库设计关系到整个开发过程的高效开发与后期投入使用时的正常使用,因此在设计数据库时必须遵守一些原则规范来确保数据库设计能被稳定地修改与访问,遵循以下设计原则:
1.统一规范所有数据库、表、字段的命名,并添加对应说明。
2.合理建立索引字段,挑选重复值较少的字段作为索引字段,以此提高数据库的操作效率。
3.在开发阶段,建立必要的主键与外键,以保证数据的一致性与完整性;在生产阶段,移除外键,提高数据库的操作效率。
4.数据库表字段不可再分,遵循三大范式。
3.4.2系统数据库设计
根据需求分析得出,该系统需使用13张表,数据库表信息与表之间的关系如下:
表 3.1 数据库表说明
表名 描述
CINEMA 影院信息表
MOVIE 电影表
MOVIE_INFO 电影信息表
ORDERS 订单表
SCORE 电影评分表
USERS 用户表
ROLES 角色表
USER_ROLE 用户角色表
PERMISSION 权限表
ROLE_PERMISSION 角色权限表
SCHEDULE 场次表
REPOSITORY 库存表
SEATS 座位表

  1. 影院信息表(CINEMA)的详情信息如下:
    表 3.2 影院信息表字段详情
    列名 类型 是否充许为空 备注
    ID INT(20) NO 影院ID
    CINEMANAME VARCHAR(200) YES 影院名称
    ROOM VARCHAR(200) YES 放映厅
    ADDRESS VARCHAR(200) YES 影院地址
    SEATS VARCHAR(200) YES 座位数
    TELEPHONE VARCHAR(20) YES 电话号码
    CREATETIME DATETIME YES 创建时间
    MODIFIEDTIME TIMESTAMP YES 修改时间
    2.电影表(MOVIE)的详情信息如下:
    表 3.3 电影表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 电影ID
    MOVIE_ID INT(11) NO 影院名称
    MOVIENAME VARCHAR(50) YES 电影名称
    FOREIGN VARCHAR(255) YES 外语名称
    CREATETIME DATETIME YES 创建时间
    MODIFIEDTIME TIMESTAMP YES 修改时间
    3.电影信息表(MOVIE_INFO)的详情信息如下:
    表 3.4 电影信息表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 主键
    INTRODUCE VARCHAR(1000) YES 电影简介
    DIRECTOR VARCHAR(100) YES 导演
    ACTORS VARCHAR(200) YES 演员
    MOVIELENGTH VARCHAR(20) YES 电影长度
    POSTER VARCHAR(100) YES 海报
    RELEASE VARCHAR(100) YES 上映时间
    CREATETIME DATETIME YES 创建时间
    MODIFIEDTIME TIMESTAMP YES 修改时间
    4.订单表(ORDERS)的详情信息如下:
    表 3.5 订单表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 字段id
    STATUS VARCHAR(20) YES 订单状态
    ORDERUSER VARCHAR(20) YES 下单人
    MOVIE_ID INT(11) YES 电影ID
    MOVIENAME VARCHAR(100) YES 电影名称
    ORDERID VARCHAR(50) YES 订单号
    DATE DATE YES 电影开播日期
    RUNTIME VARCHAR(50) YES 电影开播时间
    ENDTIME VARCHAR(50) YES 电影结束时间
    ADDRESS VARCHAR(100) YES 播放地址
    CINEMAID INT(20) YES 影院ID
    SEATS VARCHAR(255) YES 座位
    INVALID VARCHAR(50) YES 失效时间
    TOTAL VARCHAR(50) YES 总价
    CREATETIME DATETIME YES 创建时间
    MODIFIEDTIME TIMESTAMP YES 修改时间
    5.评分表(SCORE)的详情信息如下:
    表 3.6 评分表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 主键
    MOVIE_ID INT(30) NO 电影ID
    USERNAME VARCHAR(50) NO 评分人
    COMMENTS VARCHAR(50) YES 评论
    SCORE FLOAT YES 评分
    CREATETIME TIMESTAMP YES 修改时间
    6.角色表(ROLES)的详情信息如下:
    表 3.7 角色表字段详情
    列名 类型 是否充许为空 备注
    ROLE_ID INT(11) NO 角色ID
    ROLE_NAME VARCHAR(20) YES 角色名称
    7.用户表(USERS)的详情信息如下:
    表 3.8 用户表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 用户ID
    USERNAME VARCHAR(100) YES 用户名
    AGE INT(5) YES 年龄
    SEX VARCHAR(10) YES 性别
    PASSWORD VARCHAR(100) YES 密码
    PHONENUMBER VARCHAR(20) YES 电话号码
    SALT VARCHAR(200) YES 盐
    CREATETIME DATETIME YES 创建时间
    MODIFIEDTIME TIMESTAMP YES 修改时间
    8.用户角色表(USER_ROLE)的详情信息如下:
    表 3.9 用户角色表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 主键
    ROLE_ID INT(11) YES 角色ID
    USER_ID INT(11) YES 用户ID
    9.权限表(PERMISSION)的详情信息如下:
    表 3.10 权限表字段详情
    列名 类型 是否充许为空 备注
    PERMISSION_ID INT(11) NO 主键;权限ID
    NAME VARCHAR(50) YES 权限名称
    PERMS VARCHAR(500) YES 权限标识
    10.角色权限表(ROLE_PERMISSION)的详情信息如下:
    表 3.11 角色权限表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 主键
    PERMISSION_ID INT(11) YES 权限ID
    ROLE_ID INT(11) YES 角色ID
    11.场次表(SCHEDULE)的详情信息如下:
    表 3.12 场次表字段详情
    列名 类型 是否充许为空 备注
    ID INT(11) NO 主键
    CINEMA_ID INT(11) YES 影院ID
    MOVIE_ID INT(11) YES 电影ID
    ROOM VARCHAR(255) YES 放映厅
    DATE DATE YES 日期
    SCHEDULE VARCHAR(255) YES 场次开始时间

12.库存表(REPOSITORY)的详情信息如下:
表 3.13 库存表字段详情
列名 类型 是否充许为空 备注
ID INT(11) NO 主键
SCHEDULE_ID INT(11) YES 场次ID
RESERVE INT(5) YES 库存余量
SEATS VARCHAR(255) YES 座位信息
13.座位表(SEATS)的详情信息如下:
表 3.14 座位表字段详情
列名 类型 是否充许为空 备注
ID INT(11) NO 主键
SCHEDULE_ID INT(11) YES 场次ID
ROW INT(5) YES 行
COLUMN INT(5) YES 列
SEATID VARCHAR(255) YES 唯一座位ID
CREATETIME TIMESTAMP YES 座位选择时间
基于Vue+SpringBoot的电影订票系统_第7张图片

图3.3数据库表之间的ER关系图
该系统中,数据库表主要有13张,ER关系图如上。关联关系主要有:用户表与角色表通过用户角色表进行关联,角色表与权限表通过角色权限表进行关联;库存表通过场次ID与座位表进行关联,场次表通过场次ID与座位表关联,影院信息表通过影院ID与场次表进行关联等,具体可查看上图。
3.4.3系统数据库访问的实现
本系统所选用的后台框架是SpringBoot,数据库选用MySQL,数据库访问层选用Mybatis。在Spring Boot项目中,实现数据库的连接十分简单,只需在pom.xml文件中引入相关依赖,并在application.yml文件中添加相关配置,即可轻易实现。
3.4.3.1数据库连接设计
为了达到数据库资源重用,获得更快的系统响应速度,避免数据库连接泄露,本系统的数据库连接使用了tomcat-jdbc连接池技术。避免了数据库连接的频繁创建、释放引起的大量性能开销,实现了连接资源的可回收管理。
3.4.3.2数据库查询设计
为了优化数据库查询,本系统使用了Redis缓存技术,对于实时性要求不高的且频繁被请求的数据进行缓存,以此降低对数据库的访问,提升接口响应速度,设置缓存失效时间并对过期缓存处理。

第四章 电影院订票系统的实现

根据前期所做的需求分析与系统设计,最终实现了从用户选择影片到支付的整体业务流程的电影院订票系统, 并设计了后台管理系统对整个系统进行运营与维护,本章将从业务逻辑以及代码实现方面详细描述各系统模块功能。

4.1系统运行环境与开发环境
4.1.1系统运行环境
运行环境:windows10
应用中间件:Tomcat8+
数据库:MySQL
4.1.2系统开发环境
前端开发工具:Webstorm;
后台开发工具:IntelliJ IDEA;
数据库:MySQL;
编程语言:Java、Vue
4.2系统实现关键技术介绍
本系统的开发采用前后端分离。
前端框架主要使用Vue,较之其他前端框架,Vue较为新颖,vue从React与Angular中取其精华去其糟粕。Vue的主要特点是轻量级、易使用;使用了一个虚拟 DOM;提供了响应式的,并且可组合式的视图组件;
后台框架主要使用了Springboot+ Mybatis+Shiro,由于传统的SSM需要进行大量的引入依赖以及xml配置,所以在技术选型的是选择了springboot。mybatis对数据库进行操作,剔除了之前的注解加语句的形式,一定程度上达到了松耦合的目的。shiro对整个系统的系统访问进行授权以及访问控制。
4.3模块功能实现
4.3.1用户模块
4.3.1.1注册模块
基于Vue+SpringBoot的电影订票系统_第8张图片

图4.1注册界面
游客在填写相应信息后提交,如若校验通过则可以成功注册并返回到登录界面;如果用户已有账号则可以直接“返回登录页”进行登录操作。
功能实现:
1.用户在进行注册输入时,密码不得小于六位有效字符。在前端使用正则表达式对密码是否包含特殊字符进行判断,同时对两次输入的密码是否一致进行比对;使用正则表达式对用户在页面输入的手机号码进行判断是否有效;
2.当用户提交时在前端对用户密码进行一次无salt的MD5加密,之后发送至后端后再在controller层对密码进行加salt的MD5二次加密,最大限度地保密了用户密码,大大提高了用户账号的安全性;
3.用户注册时调用后端接口对用户名是否已存在进行验证,后端对用户名与数据库中的用户名进行比对,数据库中无此用户名则成功注册,否则返回false注册失败。
4.用户注册成功后,默认角色权限为普通用户,如果需要对某个用户进行添加权限需要超级管理员在后台管理系统对用户进行授权操作。

4.3.1.2登录模块
基于Vue+SpringBoot的电影订票系统_第9张图片

图4.2登录界面
前端根据用户是否是某个角色决定登录后的跳转页面,如果用户是“普通用户”时跳转至前台系统首页,如果用户是“系统管理员”时跳转至电影院订票系统后台管理系统。后端根据角色类型判断用户是否有权限访问即将访问的路径,此权限由shiro进行访问控制,数据库维护了users表,roles表,user_role表对用户的角色类型进行授权与取消授权。
功能实现:
1.用户输入时密码不得少于六位,否则不能提交;
2.用户输入用户名与密码并提交后前端对用户密码进行无salt的MD5加密并将数据发送给后端进行验证;
3.后端验证时使用用户注册时存入数据库中的salt对前端发送过来的密码进行加salt加密后与数据库中的用户密码进行比较,若完全匹配则登录成功,并使用用户名以及用户ID生成token后返回至前台;不完全匹配则登录失败;
基于Vue+SpringBoot的电影订票系统_第10张图片

图4.3JWT生成token方法
4.用户登录授权验证根据用户role_id来判断跳转页面,当用户拥有管理员权限时跳转至后台管理系统的主页面;当用户角色是普通用户时则跳转至电影院订票系统主页。
4.3.1.3热播电影
基于Vue+SpringBoot的电影订票系统_第11张图片

图4.4热播电影界面
热播电影根据系统中订单的成交量来进行排名并取排名靠前的前六个影片在前台展示。
基于Vue+SpringBoot的电影订票系统_第12张图片

图4.5订单表联查电影信息表座位热播电影
在这里插入图片描述

图4.6获取热播电影数据接口
热播电影模块通过该接口获取数据之后将电影进行展示,用户可以点击该模块中的电影以进入电影详情页面或前往购买。
4.3.1.4电影详情
基于Vue+SpringBoot的电影订票系统_第13张图片

图4.7电影详情页面
电影详情页展示了该电影的导演、演职员、上映时间、地区等信息,用户也可以点击图中的“购票”按钮来进行选座购票。
4.3.1.5选座订票
基于Vue+SpringBoot的电影订票系统_第14张图片

图4.8前端选座功能实现
基于Vue+SpringBoot的电影订票系统_第15张图片

图4.9前端选座时获取数据库已选座位信息
该功能模块为电影院订票系统的核心模块。

  1. 用户选座前先进行场次选择,选择对应的场次后前端通过后端接口获取数据库已选座位信息,用户不可以对已选座位进行操作
  2. 用户在选择座位后点击“确认选座”时,前端传递一个用户信息以及场次信息和用户当前已选的座位信息给后端,后端根据场次ID以及座位值来判断用户是否可以选择当前所选座位,可选则插入数据库;
    基于Vue+SpringBoot的电影订票系统_第16张图片

图4.10用户选座时后端进行的逻辑判断
3.后端根据前端传过来的用户信息、场次信息、座位信息生成订单,用户可以点击“立即付款”对订单进行支付,如果用户直接支付则生成二维码;如果用户不选择立即支付订单则在前端为订单加一个定时器并将定时时间存入订单信息通过后端一并存入数据库。未支付订单在失效时间后,后端根据失效时间删除订单同时将二维码置为失效。
4.用户在规定时间内取消订单时,后端操作数据库将订单置为“已关闭”态。
4.3.1.6支付模块
支付模块使用支付宝沙箱环境调用其接口实现,商家账号与支付账号由支付宝沙箱提供。配置与逻辑处理如下图:
基于Vue+SpringBoot的电影订票系统_第17张图片

图4.11支付宝沙箱AlipyConfig配置类
支付宝沙箱配置中,将支付宝开放平台中的沙箱服务中的appid与支付宝开放平台开发助手密钥设置如图,之后使用支付宝开放平台开发助手中的密钥在开放平台生成支付宝公钥设置如图。
基于Vue+SpringBoot的电影订票系统_第18张图片

图4.12 AlipayUtil包配置
AlipayUtil负责接收前端表单传递过来的商户订单号、订单名称、付款金额、商品描述等信息。
基于Vue+SpringBoot的电影订票系统_第19张图片

图4.13支付接口
异步通知接口用于支付成功后获取支付宝中post过来的信息并对信息进行验签。验签主要的验证信息为对订单信息进行验证,如果当前获取的订单信息与已经支付的订单信息不符则验签失败,否则则验签成功。当验签成功时对数据库订单状态进行更新。
基于Vue+SpringBoot的电影订票系统_第20张图片

图4.14订单支付页面
因支付宝沙箱移动端app不稳定,付款时经常会出现“系统繁忙,请稍后再试”页面提示,故支付时只能登录PC进行支付。
基于Vue+SpringBoot的电影订票系统_第21张图片

图4.15登录支付宝沙箱账户页面
基于Vue+SpringBoot的电影订票系统_第22张图片

图4.16支付成功页面
支付成功后,调用异步通知接口将订单状态修改为“已支付”,调用同步通知接口跳转至用户订单列表界面。
4.3.1.7评分评论模块
基于Vue+SpringBoot的电影订票系统_第23张图片

图4.17用户评分评论界面
用户在“个人中心”中从“我的订单”点击某个订单中的评价按钮对该电影进行评价,用户通过拉拽图中星星进行评分。评价成功后的评分将会作为高分推荐电影的显示依据,评价将会显示在电影详情页下方。评分等级分为五级:
1.0~2(不含2星)星为,很差;
2.2~4(不含4星)星为,差;
3.4~6(不含6星)星为,一般;
4.6~8(不含8星)星为,好;
5.8~10(含10星)星为,很好。
4.3.1.8电影推荐
电影推荐根据用户在此系统上对各个影片的平均评分来推荐,平均分越高则越推荐。平均分=各个用户的有效评分之和/总有效评分用户数量,有效评分来自已观看该影片的用户在本系统上对该影片的评分。
4.3.1.9搜索影片
在这里插入图片描述

图4.18模糊查询影片
用户搜索影片时前端调用后端接口对movieInfo表进行模糊查询,模糊查询使用右匹配,这样可以有效地使用索引。
4.3.2管理员模块
4.3.2.1用户管理
在这里插入图片描述

图4.19用户管理界面
所有用户均来源于前台注册页面注册成功的用户,管理员可以在后台对查询出来的用户修改信息与删除,原则上不应对用户信息进行修改,修改用户信息流程如下:
1.修改除“密码”之外的信息可以直接修改并点击“确定”进行确认修改;
2.如需修改用户密码时,管理员只需要输入新的密码并确认即可修改成功,修改用户密码时,前端对密码进行一次MD5无salt加密,发送至后端,后端则取当前用户ID调用userMapper文件中的方法查询该用户salt,之后对前端发送过来的密码进行加salt的MD5加密。
4.3.2.2订单管理
在这里插入图片描述

图4.20订单管理界面
为保证订单的真实性,管理员仅有查看订单的权限,不能对订单进行维护。查询订单信息数据时,后端在Order定义类型为MovieInfo的私有变量,在Mybatis中对Order表以及MovieInfo表根据movie_id对两表进行联查,最后得出订单数据。
4.3.2.3影片管理
基于Vue+SpringBoot的电影订票系统_第24张图片

图4.21影片管理界面
管理员在影片管理界面中可以对影片进行电影上新、修改电影信息以及电影下架等操作。当管理员对影片进行增删改操作时,后端根据ID对movieInfo表与movie表进行操作。
4.3.2.4影院管理
基于Vue+SpringBoot的电影订票系统_第25张图片

图4.22影院管理界面
管理员在影院管理界面中可以对各个影院进行维护,新增影院信息、修改影院信息以及删除影院信息。修改和新增影院信息时,前台使用elementUI中的upload实现图片的上传,并对影院名称进行判断,如果影院名称为空则提示“请添全数据”,通过判断之后方可成功点击“确定”按钮进行操作。
4.3.2.5评分管理
基于Vue+SpringBoot的电影订票系统_第26张图片

图4.23评分管理界面
1.评分来自用户对影片的真实评论,为保证其真实性,不提供修改评分评论的功能,评分由用户在前台页面对影片评论而来;
2.当用户评论包含敏感话题、人身攻击、引战、恶意辱骂等信息时,管理员可以选择删除该评论。管理员进行删除评论操作时,后端对score表进行操作,成功之后返回true,否则返回false。
4.3.2.6场次管理
在这里插入图片描述

图4.24场次管理界面
1.场次管理可以新增场次以及修改场次信息、查询场次信息、删除场次;
2.为了让用户有足够的时间了解并购买某场次的票,管理员在新增场次时应大于当前日期三日及以上;
3.在加载时查询schedule表全表获取数据,当管理员进行修改与删除操作时,成功返回true,否则返回false。

第五章 电影院订票系统的测试

5.1系统测试概述
5.1.1系统测试目的
任何一个人都不可能百分百地保证自己所设计的系统没有任何缺陷,系统测试的目的就是在测试过程中尽可能地系统中存在的bug,并对其加以修正,以保证系统的稳定性、鲁棒性,在系统设计期间,越早发现bug越早解决越好,这不仅决定了该系统开发的开发周期更影响着系统上线后运维的难易程度。测试的最终目的如下:
1.系统是否能够正常地运行。
2.系统操作流程是否能满足预期的业务需求。
3.尽可能地发现系统存在的bug并及时解决。
5.1.2系统测试所需环境及设备
硬件环境:windows10
测试数据库:localhost:3306/movies
测试浏览器:Microsoft Edge, IE 11,Chrome8.0,猎豹浏览器,QQ浏览器。
5.1.3测试流程
1.制定测试计划;
后端:完成接口后进行接口测试,随后对模块进行模块测试;
2.设计测试用例;
3. 使用测试工具对测试用例进行测试;
4. 对测试结果进行总结与分析。
5.2 系统的功能测试
5.2.1 选座功能测试
表5.1选座功能测试用例表
操作端 功能块 功能点 用例ID 前置条件 操作步骤 测试数据 预期结果
前台 选座模块 选座 Y_XZMK_001 该用户所选座位未出售 1.用户填写正确的用户名与用户密码;
2.选择欲观影的影片;
3.选择场次;
4.选择座位;
5.确认选座。 seats:1,2,3,4 选座成功
Y_XZMK_002 该用户所选座位包含已经出售座位 1.用户填写正确的用户名与用户密码;
2.选择欲观影的影片;
3.选择场次;
4.选择座位;
5.确认选座。 seats:1,2,3,4 选座失败
基于Vue+SpringBoot的电影订票系统_第27张图片

图5.1添加座位成功结果
基于Vue+SpringBoot的电影订票系统_第28张图片

图5.2添加座位失败结果
根据测试用例表中的测试用例测试,响应时间以及结果均符合预期,测试通过。
5.2.2 登录功能测试
表5.2登录功能测试用例表
操作端 功能块 功能点 用例ID 前置条件 操作步骤 测试数据 预期结果
前台 登录模块 登录 Y_DLMK_001 用户仅有普通用户权限 1.用户在登录界面输入正确的用户名与密码;
2.点击登录后跳转至前台页面 userName:zhangsan
password:123456 用户仅能进行查看影片、查看影片详情、选座订票、查看个人信息、查看个人订单信息。
Y_DLMK_002 用户有普通管理员权限 1.用户在登录界面输入正确的用户名与密码
2.点击登录后跳转至后台页面,不能进行对用户授权管理 userName:lisi
password:123456 用户能进行影片管理,订单管理,场次管理,评分管理。
Y_DLMK_003 用户为超级管理员 1.用户在登录界面输入正确的用户名与密码
2.点击登录后跳转至后台页面且能够对用户进行授权管理 userName:admin
password:123456 超级管理员能进行对系统提供的所有功能进行操作
基于Vue+SpringBoot的电影订票系统_第29张图片

图5.3JMeter中测试登录功能
在以上测试中使用JMeter设置一个线程数为10,延迟时间为1秒,循环次数为1秒 的线程组对登录功能测试,由于前后端均对用户密码进行了MD5加密,这时候Jmeter中password使用的是在前台登录界面登录时加密后的密码,最后得出如下结果。
基于Vue+SpringBoot的电影订票系统_第30张图片

图5.4JMeter中测试登录察看结果表

5.3 测试总结
通过在软件开发中对单个模块的单元测试以及系统设计完成之后对系统的集成测试后,该电影院订票系统在功能上实现了前期需求中的功能,符合预期效果;在性能上,响应速度在预期范围内,符合预期效果。该系统符合系统需求,并能够实现预期的业务操作。

第六章 课题总结与展望

6.1总结
本课题阐述了前后端分离模式进行开发电影院订票系统的全过程,前端使用技术栈Vue加上ElementUI支撑整个页面设计以及前端逻辑处理,后端使用Java,,前后端以JSON进行数据交互,后端配置了Swagger向前端展示了各个接口,并使用了Mysql5.5作为数据库。
在进行本课题的可行性分析以及需求分析时借鉴了各大订票网站的业务形式,并对该系统做可行性分析以及需求分析,在实现过程中结合实际对需求进行更改,在编写实现了后端接口后进行单元测试以及前后端交互进行模拟测试,最后,进行系统测试以验证系统的高可用性。
6.2展望
本系统为用户与影院的商家提供了诸多方便,实现了“欲观影即买票,买票即成功”的目的。但是在开发过程中发现该系统仍然存在许多功能不足之处,例如系统中的支付功能未实现,由于微信、支付宝对用户信息的保护,非企业不能调用支付接口,这就使得这些需求在我个人的能力下是不能实现的;再者就是由于个人技术能力上的不足未实现高并发下的抢票功能;除此之后,还有许多功能可以在后续学习过程中实现。
因此,业余时间进行个人技能的学习提升是非常有必要的,而且,在多人联合开发中最重要也是必不可少的就是高效沟通,如何将自己的想法正确地说出来尤为重要。

参考文献:

[1]明日科技.《Java从入门到精通(第5版)》. 北京:清华大学出版社,2019.03.01
[2]程杰.《大话设计模式》. 北京:清华大学出版社,2007.12.1
[3]杨开振.《深入浅出Spring Boot 2.x》.北京:人民邮电出版社,2018.08.01
[4]王松.《Spring Boot+Vue全栈开发实战》.北京:清华大学出版社, 2019.01.01
[5]张海藩. 《软件工程导论》. 北京:清华大学出版社, 2003.
[6]小马哥.《Spring Boot编程思想(核心篇)》.北京:电子工业出版社,2019.04
[7]黎连业、王华、李淑春.《软件测试与测试技术[M]》.北京:清华大学出版社,2009.321-322
[8]梁灏.《Vue.js实战》.北京:清华大学出版社,2017.10
[9]孔昊.《JavaWeb设计实用教程——基于Eclipse环境的应用开发》.北京:机械工业出版社,2012.4
[10]孙卫琴.《Tomcat与Java Web开发技术详解(第3版)》.北京:电子工业出版社,2019.7
[11]徐丽健.《Spring Boot+Spring Cloud+Vue+Element项目实战:手把手教你开发权限管理系统》.北京:清华大学出版社,2019.6.1
[12]王达.《深入理解计算机网络》.北京:水利水电出版社,2017.1
[13]Irv Englande(作者),朱利(译者).《现代计算机系统与网络(原书第5版)》. 北京:机械工业出版社,2018.11.1
[14]Olga Filipova 《Learning Vue.js 2》Packt Publishing 2016.12.13
[15]Johanna Rothman(作者),郑柯(译者)《项目管理修炼之道》.北京:人民邮电出版社.2009.10.1
[16]Baron Schwartz(作者),Peter Zaitsev(作者),Vadim Tkachenko(作者),宁海元(译者),周振兴(译者)《高性能MySQL(第3版)》,北京:电子工业出版社.2013.04.01

致谢

时光荏苒,青春留不住年华,论文完成时也预示着我们即将离开这个孕育了我们四年的校园。感谢我的导师王少华老师在此论文编写中给我提供的支持与帮助!感谢段润英老师给我的建议与指导!

感谢广州大学松田学院的各位好友提供的帮助!
感谢16计算机科学与技术2班全体同学的陪伴以及帮助!
感谢广州大学松田学院计算机科学与技术系全体教师的悉心教诲与包容!感谢各位辅导员给我们的帮助与支持!

你可能感兴趣的:(java,java)