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

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

项目编号: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也是非常成熟的技术是开发变得更加简洁。资料文档齐全,并且系统在市场上已经有成熟的同类型系统案例。技术上可行。

相关文章
|
27天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
132 1
|
11天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
92 62
|
3天前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
19 1
|
9天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
24 2
|
12天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
21天前
|
存储 安全 Java
打造智能合同管理系统:SpringBoot与电子签章的完美融合
【10月更文挑战第7天】 在数字化转型的浪潮中,电子合同管理系统因其高效、环保和安全的特点,正逐渐成为企业合同管理的新宠。本文将分享如何利用SpringBoot框架实现一个集电子文件签字与合同管理于一体的智能系统,探索技术如何助力合同管理的现代化。
55 4
|
21天前
|
前端开发 Java Apache
SpringBoot实现电子文件签字+合同系统!
【10月更文挑战第15天】 在现代企业运营中,合同管理和电子文件签字成为了日常活动中不可或缺的一部分。随着技术的发展,电子合同系统因其高效性、安全性和环保性,逐渐取代了传统的纸质合同。本文将详细介绍如何使用SpringBoot框架实现一个电子文件签字和合同管理系统。
40 1
|
23天前
|
JavaScript UED
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
【10月更文挑战第5天】本示例展示了如何在 Vue.js 中使用 Element UI 组件实现动态添加和删除嵌套表单项。该表单包含设备信息、设备部位及其对应的任务列表,支持用户动态添加设备部位和任务,并提供相应的表单验证规则。
100 0
Vue + ElementUI 实现动态添加和删除表单项的多层嵌套表单
|
24天前
|
文字识别 安全 Java
SpringBoot3.x和OCR构建车牌识别系统
本文介绍了一个基于Java SpringBoot3.x框架的车牌识别系统,详细阐述了系统的设计目标、需求分析及其实现过程。利用Tesseract OCR库和OpenCV库,实现了车牌图片的识别与处理,确保系统的高准确性和稳定性。文中还提供了具体的代码示例,展示了如何构建和优化车牌识别服务,以及如何处理特殊和异常车牌。通过实际应用案例,帮助读者理解和应用这一解决方案。
|
8天前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
25 0
下一篇
无影云桌面