售票系统|基于springboot+vue+elementui实现海底世界售票系统

作者主页：编程指南针

作者简介：Java领域优质创作者、CSDN博客专家 、掘金特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容：Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路  关注作者有好处

文末获取源码 

项目编号：BS-XX-173

一，项目简介

    随着我国旅游设施网络购票平台的快速发展，各种基于互联网的企业与服务也在快速发展。网络购票平台改变了人们购票的方式，人们开始使用网络购票平台进行购票和预约。对于个人用户而言，相较于线下购票是设施，网络购票平台空间更大，更廉价，也更利于不同设备之间、不同地区之间的文件传输。互联网其中一个理念便是为了让各个用户更加便利，网络购票平台的出现促进了这一理念的发展。大量网络论坛推行网络购票平台进行设施传播，人们将自己锁游玩的地方、踩过的景点坑、珍藏的景色照片上传至网络上，并在论坛中发帖对景点进行描述、

二，环境介绍

语言环境：Java:  jdk1.8

数据库：Mysql: mysql5.7

应用服务器：Tomcat:  tomcat8.5.31

开发工具：IDEA或eclipse

后台开发技术：springboot+mybatis

前台开发技术：vue+elementui

三，系统展示

5.1 用户模块

5.1.1 注册与登录

用户前注册页面是Register.vue实现的，登录页面是由login.vue实现的。用户注册时首先输入的是用户名和密码，然后接收到系统发送的验证码成功输入验证码后前端将数据传入后端sysUser传到后端，后端接收后首先会判断输入的账号是否存在，密码是否符合范式规则，如果不不符合那么会弹出提示框告诉用户密码不合格或者账户已存在。如果密码和账户都通过那么会从gouyan_admin模块中的sysUserController类调用其中的方法在再调用UserService中的注册方法从而将数据传输的userMapper类中最后由userMapper将数据提交到数据完成注册。注册时密码在userservice中有spring自带的密码加密工具类完成了加密。这样可以保证用户的隐私和个人信息安全还有账户安全。然后最后登录后再跳转到登录页面。注册页面如图-所示

注册成功后就能开始登录了。输入用户名和密码后点击登录按钮前端会通过、/sysUser接口将数据传输到后端，首先会判断你的账户是否存在还有判断你的密码是否正确，如若出现问题那么会弹出提示框告诉你账号或者密码错误。正确的话那么会完成登人后跳转的首页welcome.Vue页面中。登录页面如图5-2所示。

图5-1 注册页面

图5-2 登录页面

5.1.2 用户信息

用户信息页面是由userinfo.vue页面实现的，在进入系统之后用户可以通过点击右上角的个人头像进入个人信息页面。前端会将你的用户id通过/sysUser/getuser接口传入后端获取到你的个人信息。前端接收到回传的信息后将信息渲染到页面上。界面实现效果图如5-3所示。

图5-3 用户信息页面

5.1.3用户信息添加和修改

用户信息修改也是通过userinfo.vue页面实现的，在用户信息也面补全信息或者修改用户名。修改信息通过保存按钮提交数据，通过/SysUser接口进行数据的修改，通过此接口可以完成调用服务层的修改方法从而完成修改。最后经过userMapper将数据的提交至数据完成修改。修改数据页面如图5-4所示。

图5-4 用户信息修改页面

5.1.4用户查看订单功能

用户查看订单功能是通过点击左侧的菜单栏进入订单详情页面，是通过BIllinfo。vue和userMenu.vue页面一同实现的。在进入订单详情页之后通过/sysBill/id接口带着ID值传输到后端。通过其控制层调用BIllService中查询订单方法去取得订单信息，然后回传到前端，前端获取回传的信息将数据渲染到前端页面供用户查看。订单详情页面如图5-5所示。

图5-5 订单详情页面

5.2  推荐模块

5.2.1  人气乐园轮播

登录第一个跳转的是乐园主页，映入眼帘的是评分比较高的人气乐园的轮播图。是通过/sysMoive接口跳转至后台用sysMovieController类调movieservice类中的查询计算方法然后将排满靠前的海底世界游玩项目数据查询出来然后回传到前端页面，再有welcome.Vue页面中的动画轮播方法进行轮播。该方法来源于elemnet——ui，中的watch方法进行动画轮播。页面图如5-6所示。

图5-6 轮播页面图

5.2.2  最高评分推荐

最高评分推荐功能是登录之后再主页的上方点击主页的评分标签，进入评分推荐的页面是将评分比较的不错的电影放入评分捡推荐中，这个功能是供movietop.vue实现的。点击进入后，前端会通过接口/movie将数据传入后台，后台通过movieservice的中的方法将评分电影查询出来。后台在将数据回传到前端，前端得到数据后再将数据渲染到页面供用户查看。评分推荐页面如图5-7所示。

 

图5-7 人气推荐页面图

5.2.3  口碑评分推荐

口碑推荐功能是登录之后再主页的上方点击主页的口碑标签，进入口碑推荐的页面是将口碑比较的不错的电影放入口碑捡推荐中，这个功能是供movie.vue实现的。点击进入后，前端会通过接口/movie将数据传入后台，后台通过movieservice的中的方法将口碑电影查询出来。后台在将数据回传到前端，前端得到数据后再将数据渲染到页面供用户查看。口碑推荐页面如图5-7所示。

图5-8 口碑推荐页面图

5.3 评论模块

5.3.1 评论功能

评论功能是给观看后的用户有评价的权利，如果海底世界自身十分优秀，那么用户肯定不会吝啬自己的评价者就是已相当于一次广告机会。评论功能是通过MovieInfo.vue进行实现的。用户评论完点击提交按钮那么前端会通过/movieinfo将数据传入后端.接收到数据movieservice会调用movieMapper方法将数据写入数据库，写入成功后会弹出提示框告诉用户已经评论成功。评论功能如图5-9所示。

图5-9 评论页面图

5.3.2 评分功能

评分功能是给观看后的用户有评分的权利，如果海底世界自身十分优秀，那么用户肯定不会吝啬自己的评价者就是已相当于一次广告机会。评分过高可以使该乐园上本平台的推荐位置。评分功能是通过MovieInfo.vue进行实现的。用户评论完点击提交按钮那么前端会通过/movieinfo将数据传入后端.接收到数据movieservice会调用movieMapper方法将数据写入数据库，写入成功后会弹出提示框告诉用户已经评论成功。评分功能如图5-10所示

图5-10 评分页面图

5.3.3 点赞功能

 点赞功能是让用户对各种评价进行点赞，评分功能是通过MovieInfo.vue进行实现的。用户点赞完点击提交按钮那么前端会通过/movieinfo将数据传入后端.接收到数据movieservice会调用movieMapper方法将数据写入数据库，写入成功后会弹出提示框告诉用户已经点赞成功。点赞功能如图5-11所示

图5-11 点赞页面图

5.4 支付模块

5.4.1 支付功能

支付功能是通过ChooseSeat.vue 和BillDetail.vue实现用户点击购票后会跳转到支付页面叫观众进行选座购票。确定后会跳转至支付页面，支付成功通过/BillDetail接口调用/bill接口去调用service然后生成订单打印票。功能实现图如图5-12所示

图5-12 支付功能页面图

5.6后台管理模块

5.6.1 用户管理功能

用户管理管理模块由三个功能组成，用户信息管理、订单信息管理、用户爱好管理。这三个功能包括基本的新增、修改、删除、查询。在进行这些操作的时候会统一的交给/sysUser接口进行传输到后台，再根据传输的数据决定调用哪个控制层进行操作传递，在传到服务层进行数据的改变。这些功能统一用功能抽取进行实现的。

用户信息管理使用/sysUser/userinfo，接口接收数据的在进入后调用服务层内的增删改查进行管理和操作。具体操作如图5-16所示。

图5-15 用户信息页面图

用户信息管理使用/sysUser/BillInfo，接口接收数据的在进入后调用服务层内的增删改查进行管理和操作。具体操作如图5-16所示。

图5-16 用户订单页面图

用户信息管理使用/sysUser/UserHabit，接口接收数据的在进入后调用服务层内的增删改查进行管理和操作。具体操作如图5-17所示。

图5-17 用户爱好页面图

5.6.2 权限管理功能

权限管理是由角色信息管理和资源信息管理组成，这两个功能包括基本的新增、修改、删除、查询功能。

角色信息管理功能是负责管理拥有权限的角色或者新建角色，这些角色是负责装取资源。在进行基本的事务操作后统一交到/sysRole接口中再由传输的数据下放细分在具体调用/sysRloe中相应方法接着进行对应数据处理和操作。后端负责相应前端的操作进行角色的管理。具体操作如图5-18所示。

图5-18 角色信息管理页面图

资源信息管理，是对页面资源进行管理，给角色分配不同的页面资源角色就要不同的权限去访问相应的页面。在进行资源管理的同时所进行的任何操作都将通过/sysResource接口传输到后端进行事务操作。具体进行的操作会细分到其控制层中去调用相应服务层的方法进行数据处理和后续操作。具体操作如图5-19所示。

图5-19 资源信息管理页面图

5.6.3 海底世界管理功能

海底世界管理功能是由海底世界信息管理、海底世界区域管理、海底世界品牌管理组成。这三个功能包括基本的新增、修改、删除、查询功能。这三个功能拥有各个管理功能中的基本事务逻辑。

海底世界信息管理，是对海底世界详细信息进行管理，海底世界信息管理标签查询功能方便用户更加快的找到相应想要的数据。在进行海底世界信息管理的同时所进行的任何操作都将通过/sysMovieinfo接口传输到后端进行事务操作。具体进行的操作会细分到其控制层中去调用相应服务层的方法进行数据处理和后续操作。具体操作如图5-20所示。

图5-20 海底世界详细信息管理页面图

海底世界区域管理，是对海底世界区域操作进行管理，对个各个省份还有市区有门店的地方进行管理。在进行海底世界区域管理的同时所进行的任何操作都将通过/sysMovieArea接口传输到后端进行事务操作。具体进行的操作会细分到其控制层中去调用相应服务层的方法进行数据处理和后续操作。具体操作如图5-21所示。

图5-21 海底世界区域管理页面图

海底世界品牌管理，是对海底世界品牌操作进行管理，对所有相应的海底世界品牌进行操作对新注册的海底世界品牌进行添加。在进行海底世界区域管理的同时所进行的任何操作都将通过/sysMovieCinema接口传输到后端进行事务操作。具体进行的操作会细分到其控制层中去调用相应服务层的方法进行数据处理和后续操作。具体操作如图5-22所示。

图5-22 海底世界品牌管理页面图

四，核心代码展示

package com.gouyan.web.controller.system;

import com.gouyan.common.response.ResponseResult;
import com.gouyan.system.domin.SysRole;
import com.gouyan.system.service.impl.SysRoleServiceImpl;
import com.gouyan.web.controller.BaseController;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
public class SysRoleController extends BaseController {

    @Autowired
    SysRoleServiceImpl sysRoleService;

    @GetMapping("/sysRole")
    public ResponseResult findAll(){
        startPage();
        List<SysRole> data = sysRoleService.findAll();
        return getResult(data);
    }

    @GetMapping("/sysRole/{id}")
    public ResponseResult findById(@PathVariable Long id){
        return getResult(sysRoleService.findById(id));
    }

    @PostMapping("/sysRole")
    public ResponseResult add(@Validated @RequestBody SysRole sysRole){
        return getResult(sysRoleService.add(sysRole));
    }

    @PutMapping("/sysRole")
    public ResponseResult update(@Validated @RequestBody SysRole sysRole){
        return getResult(sysRoleService.update(sysRole));
    }

    @DeleteMapping("/sysRole/{ids}")
    public ResponseResult delete(@PathVariable Long[] ids){
        return getResult(sysRoleService.delete(ids));
    }

    /**
     * 给指定 id 的角色分配权限，包括增加或者删除权限
     * @param roleId
     * @param keys
     * @return
     */
    @PostMapping("/sysRole/{roleId}")
    public ResponseResult allotRight(@PathVariable Long roleId, @RequestBody Long[] keys){
        return getResult(sysRoleService.allotRight(roleId, keys));
    }

}

package com.gouyan.web.controller.system;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.gouyan.common.response.ResponseResult;
import com.gouyan.common.utils.StringUtil;
import com.gouyan.system.domin.LoginUser;
import com.gouyan.system.domin.SysUser;
import com.gouyan.system.domin.vo.SysUserVo;
import com.gouyan.system.service.impl.SysUserServiceImpl;
import com.gouyan.web.controller.BaseController;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.AuthenticationException;
import org.apache.shiro.authc.IncorrectCredentialsException;
import org.apache.shiro.authc.UnknownAccountException;
import org.apache.shiro.authc.UsernamePasswordToken;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @author
 * @create 2022-11-22 21:52
 */
@RestController
public class SysUserController extends BaseController {
    @Autowired
    private SysUserServiceImpl sysUserService;

    @GetMapping("/sysUser")
    public ResponseResult findAll(SysUser sysUser){
        startPage();
        List<SysUser> data = sysUserService.findAll(sysUser);
        return getResult(data);
    }

    @GetMapping("/sysUser/{id}")
    public ResponseResult findById(@PathVariable Long id){
        return getResult(sysUserService.findById(id));
    }

    /**
     * 添加用户请求，注册也在这里
     * @param sysUser
     * @return
     */
    @PostMapping("/sysUser")
    public ResponseResult add(@Validated @RequestBody SysUser sysUser){
        return getResult(sysUserService.add(sysUser));
    }

    @PutMapping("/sysUser")
    public ResponseResult update(@Validated @RequestBody SysUser sysUser){
        return getResult(sysUserService.update(sysUser));
    }

    @DeleteMapping("/sysUser/{ids}")
    public ResponseResult delete(@PathVariable Long[] ids){
        return getResult(sysUserService.delete(ids));
    }

    //用户登录
    @RequestMapping("/sysUser/login")
    public ResponseResult login(@RequestBody SysUserVo sysUserVo){
        return getResult(sysUserService.login(sysUserVo));
    }
}

package com.gouyan.web.controller.system;

import com.gouyan.common.response.ResponseResult;
import com.gouyan.system.domin.SysUserHobby;
import com.gouyan.system.service.impl.SysUserHobbyServiceImpl;
import com.gouyan.web.controller.BaseController;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;

import java.util.List;

/**
 * @Author:  
 * @Create: 2022-11-20 10:54
 */
@RestController
public class SysUserHobbyController extends BaseController {

    @Autowired
    SysUserHobbyServiceImpl sysUserHobbyService;

    @GetMapping("/sysUserHobby")
    public ResponseResult findAll(){
        startPage();
        List<SysUserHobby> data = sysUserHobbyService.findAll();
        return getResult(data);
    }

    @GetMapping("/sysUserHobby/{id}")
    public ResponseResult findById(@PathVariable Long id){
        return getResult(sysUserHobbyService.findById(id));
    }

    @PostMapping("/sysUserHobby")
    public ResponseResult add(@Validated @RequestBody SysUserHobby sysUserHobby){
        return getResult(sysUserHobbyService.add(sysUserHobby));
    }

    @PutMapping("/sysUserHobby")
    public ResponseResult update(@Validated @RequestBody SysUserHobby sysUserHobby){
        return getResult(sysUserHobbyService.update(sysUserHobby));
    }

    @DeleteMapping("/sysUserHobby/{ids}")
    public ResponseResult delete(@PathVariable Long[] ids){
        return getResult(sysUserHobbyService.delete(ids));
    }

}

五，项目总结

本系统使用Java基础语言和成熟的springboot框架和vue框架集成开发做到前后端分离，MybatisPlus和MySQL也是非常成熟的技术是开发变得更加简洁。资料文档齐全，并且系统在市场上已经有成熟的同类型系统案例。技术上可行。