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

相关文章
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
111 62
|
3天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
32 13
|
11天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
XML Java 数据库连接
SpringBoot集成Flowable:打造强大的工作流管理系统
在企业级应用开发中,工作流管理是一个核心组件,它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理(BPM)平台,它提供了强大的工作流引擎和建模工具。结合SpringBoot,我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中,并展示其强大的功能。
139 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
69 2
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
1月前
|
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 的前后端分离的后台管理系统
40 0
|
2月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
210 2
|
22天前
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
39 1
SpringBoot入门(7)- 配置热部署devtools工具
|
1月前
|
缓存 IDE Java
SpringBoot入门(7)- 配置热部署devtools工具
SpringBoot入门(7)- 配置热部署devtools工具
43 2
 SpringBoot入门(7)- 配置热部署devtools工具