基于VUE+SpringBoot的旅游管理系统哦--前后端分离

目录

一、概要

二、采用技术及API

三、系统主要功能

四、图片展示

五、资源分享

---

一、概要

这个系统是在博主的毕业设计，由于是当时是刚开始使用vue和springboot所以这个项目的相关技术上面可能会有一些不合理。

二、采用技术及API

系统主要才用了vue框架技springBoot的后端接口，采用了前后端分离的方式进行数据交互；同时为了符合当前的旅游系统的要求增加了：支付宝付款API、百度地图API、七牛云云存储等；采用mysql作为主要数据库

三、系统主要功能

旅行社用户端系统的功能结构图，如图3-1所示：

  图3-1 前台用户系统结构图

后台管理员系统功能结构图如图3-2所示：

图3-2 后台管理员系统结构图

导游系统功能结构图如图3-3所示：

图3-3 后台导游系统结构图

四、图片展示

4.1景点的收藏与管理

用户进入系统选择景点，如图6-1所示，路线界面上会显示系统中所有收录的景点，用户可以根据排序内容中的景点所在地域、城市、景点类别、价格区间、适合游玩人群等进行相对应的景点筛选。

图6-1 景点列表

用户选择景点并点击进入景点详情界面，如图6-2所示（这里以故宫为例），景点详情界面会展示景点的相关信息，为了能够让用户方便了解景点周边的情况还显示了景点相对应的地图，web端采用百度地图API进行地图的接入与显示，小程序端使用腾讯地图，如图6-3、图6-4所示，除此之外系统还提供了用户景点的收藏功能，用户可以选择自己感兴趣的景点，点击收藏即可。最后如图6-5所示，会显示与景点相关的所有攻略。

图6-2 景点详情

图6-3 web端百度地图显示

图6-4 小程序腾讯地图显示

图6-5景点相关攻略

4.2 系统推荐

系统推荐这一部分是用户点击进入景点详情界面或是路线详情界面，系统会根据用户曾对某些景点有过的历史行为，进行可能喜欢的景点推荐。同时还会按照用户查看的景点的信息推荐周边热门的景点以及和当前景点共同主题的景点。如下图进入故宫景点界面之后，会出现如图6-6、6-7、6-8的所示景点推荐。

图6-6 猜你喜欢景点推荐

图6-7周边景点推荐

图6-8相关路线推荐

4.3 用户充值

用户充值界面主要是采用的支付宝进行相关的支付操作，由于系统具有web端以及微信小程序所以无法直接使用支付宝API进行支付，故采用了系统虚拟余额的这种模式进行付款。这一部分主要是会显示用户当前的账户余额，同时界面上还提供金额选项，以及用户能够进行自定义的金额充值如图6-9所示。在点击确认充值后，前端会向后端发送充值金额，后端会调用支付宝API（在支付宝考法平台中已配置支付宝秘钥以及公钥），生成支付二维码，通过执行AlipayTradePrecreateResponse response = alipayClient.execute(request)创建支付请求，在由response.getQrCode()返回所需二维码，但其返回的是一段字符串，所以需要二维码解析器进行解析之后才能生成可以被扫描的二维码图片，本系统主要采用 vue自带的vue-qr进行二维码自动解析，解析完成如图6-10所示。

图6-9 用户充值界面

图6-10 二维码支付

生成的二维码使用支付宝进行支付，支付成功截图如图6-11所示。支付完成后，API会自动调用回调函数，但是由于回调函数是不能够传递参数给前端的所以不能够了解到是否支付完成。于是这里采用了webSocket，进行前后端之前的通信，当支付完成后会向前端发送通知，已支付完成，前端通过另一个webSocket来监听信息，当前端监听到消息之后，前台二维码变成支付成功提示，如图6-12所示。

图6-11 支付成功截图

图6-12 支付状态变更

4.4 路线管理与购买

旅行社的路线管理主要是分为前后台两个部分，后台是管理人员对路线进行添加、删除等管理。旅游路线的添加分路线基本信息的添加与时间的安排添加，如为图6-13、6-14所示。

图6-13 路线增加界面

图6-14 增加旅游行程安排

用户进入系统选择路线，如图6-15所示，路线界面上会显示系统中所有存在的路线，用户可以根据排序内容中的目的城市、主题类别以及排序的方式（销量最多、好评最多等）进行相对应的路线选择，或是根据路线的关键字进行搜索。

图6-15所示

用户选择自己想要预定或是感兴趣的路线之后，会进入相对应的详情界面如图6-16所示。界面会向用户介绍路线的相关资讯包括可以选择的日期、目的地、旅游天数等。用户可以在界面上选择相关的出发日期，并进行人数以及房间的选择，选择完成之后系统会自动对价格进行计算，用户再直接购买，系统会生成相对应的订单（生成的订单是未付款状态）并跳转至订单付款界面如图6-17所示。用户可以再订单付款界面选择直接付款或是取消付款，如果用户点击取消付款在15分钟内未付款，订单会自动取消。用户点击付款，系统会检验用户的账户能否支持完成支付，如果可以则会提示订单支付完成，并跳转回路线详情界面；余额不充足则会跳转到用户充值界面。

图6-16路线详情

图6-17 订单支付界面

4.5 购物车购买与查看

购物车界面如图6-18所示，主要是用户对自己感兴趣的路线加入购物车之后，可以对其进行维护与购买。在用户选择了对应的路线之后，系统会自动的计算出所含的路线总价格是多少，在将多个路线直接对应的生成不同的订单，但是在确认订单界面可以直接全部付款如图6-19所示。

图6-18 用户购物车界面

图6-19 确认订单

4.6 旅游攻略的增加与查看

为了能够增加用户的体验感，旅行社还提供了旅游攻略分享模块功能。用户可以在自己完成某些地方的旅行之后，进行相关的攻略或是游记的添加，旅行攻略的增加界面如图6-20所示，可以进行图片、文字的添加。旅行攻略的增加成功后会跳转到攻略查看界面如图6-21、图6-22所示。

图6-21 旅行攻略网页查看界面

图6-22 旅行攻略小程序查看界面

4.7 系统统计

系统的统计与分析主要分成两个部分，一个关于系统所有资源的统计分析，包含旅行团的订单分布、系统的全部订单、昨日订单、热门景点所在城市、系统热门路线等资源以图表的形式进行显示；第二部是关于销售额和销售量的情况分析，主要分成以月份显示和以季度显示，同时可以选择不同的年份来查看不同年份的销售情况。通过销售额和销售量的统计，可以便于管理人员对于旅行社的收益的分析，以及便于旅行社安排路线以及减少路线浪费、不成团等情况。后台管理员系统资源监控界面如图6-23所示，系统销售量及销售额统计如图6-24所示。

图6-23 系统资源监控界面

图6-24 旅行社销售额及销售量统计

五、资源分享

有想要和我探讨这个毕业设计的，或是想要这个资源的可以私信和我联系