基于SSM框架的旅游购票系统的设计与实现

在上一篇中,博主想要开发个旅游购票项目,今天它来了

技术栈

开发语言:JavaWeb
后端框架:SSM (Spring+SpringMVC+Mybatis)
开发环境:Eclipse MySQL5.5以上 Tomcat 8以上 JDK1.8
前端框架:LayUI,BootStrap
前端技术:ajax+json ,JavaScript

功能介绍

项目分为三个模块:管理员,PC网页与移动Web端
后台功能:景点管理,类别管理,订单管理,用户管理
前台功能:景点检索,购物车,下单,个人信息,登录注册,评论等

视频演示

SSMl旅游购票系统

项目更新

针对旅游购票系统,博主进行了更新:
1.添加日期选择模块,用户可以选择进入景区的时间
请添加图片描述
2.增加省份门票销量模块,从一定程度上对旅游地点做出推荐
请添加图片描述

技术难点

说是技术难点其是也算不上,只是博主在开发项目时遇到的一些问题与自己总结的一些经验
1.二级分类
博主在之前的开发中,其实也曾很少涉及二级分类,但当初浅尝辄止,当然,这次也没有涉及很深
二级分类其实与我们之前的类别下的商品是一样的,想明白这点其实还是不难的,博主之前做的是二级联动,这种在我们选择地区时用的最多,博主之前是使用ajax与jquery来实现的,但这次由于博主使用了LayUI框架,由于LayUI中将select标签使用input来重写了,之前的方法便不再通用了。
这是在LayUI中的写法

     <select id="sel_term" name="s_type" lay-filter="sel_term">
		<option value="-1">--请选择--</option>
		<c:forEach items="${list}" var="type" >
 	 <option value="${type.t_id }">${type.t_name }</option>
 	 </c:forEach>
	</select>
     <select id="sel_course" name="src_type">
		<option value="-1">--请选择--</option>	
	</select>
  

lay-filter是LayUI中的标签,为过滤器,它能够来通过标签来过滤获取标签中的内容,即在form表单中,它可以过滤筛选input ,select,radio等标签,如代码中 form.on('select(sel_term),从而获取他的内容,使用jquery中的data=$("#id”.val() 方式是行不通的

<script type="text/javascript">
		layui.use([ 'form' ], function() {
			form = layui.form;
			form.on('select(sel_term)', function(data) {
				var val = data.value;
				var $selcourse = $("#sel_course");
				$.get("${basePath}/types/seclist.action", {
					typeid : val
				}, function(result) {
					$selcourse.find("option:gt(0)").remove();//清除
					var jsondata = JSON.parse(result);
					data = jsondata.data;
					for (var i = 0; i < data.length; i++) {
						var id = data[i].id;
						var name = data[i].name
						var $option = $("<option value="+id+">" + name
								+ "</option>");
						//把option追加到sel下拉对象中里
						$selcourse.append($option);
					}
					form.render();//要重新渲染

				});

			});
		});
	</script>

此外,在成功后我们还需要对表单进行重写渲染。
2.JSON字符串
之前博主的开发时由于很少用到ajax,所以也没有很好的做到前后端分离,近期在学习中掌握最简单的前后端分离方法:ajax请求,json数据返还。
json的确很重要,它可以为我们的项目提供更好的可移植性,比如我们在Controller中使用model将数据保存并响应在页面,那么当我们的使用的不是jsp而是php或者安卓时,我们的后端依然可以使用,因为我们使用的是json,只需要对其解析即可
下面以其中的一条json数据为例来解析其构成与获取

{
	"code":0,
	"data":[
		{
			"id":1,
			"name":"吃喝玩乐",
			"typeid":1
		},
		{
			"id":2,
			"name":"民宿旅馆",
			"typeid":1
		},
		{
			"id":4,
			"name":"洛阳特产",
			"typeid":1
		},
		{
			"id":5,
			"name":"名胜古迹",
			"typeid":1
		}
	],
	"count":5
}

如上,这个json数据中含有三个元素,这是一种键值对的方式,分别为:
code,data,count
那么我们假设我们获取的这个json为result,要如何获取里面的内容呢

result.code  即0     result.count  即5
result.data 获取的是data数值
result.data[0]  获取data中第一条数据
result.data[0].id  获取data中第一条数据的id值,即1

PC网页

请添加图片描述

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

移动Web

请添加图片描述

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

后台管理

请添加图片描述

请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
一,开发环境以及运行基础 编译环境:基于eclipse,jdk1.7 数据库:MySQL,mongoDB, 服务器:Tomcat+image(Tomcat) 二、项目简介 我们这个项目有两大系统,四大接口,八大模块组成,根据登录的用户不同展示不同的功能菜单,它又是一个涉及到前台用户页面和后台系统的整合项目,整个项目中用到的框架有:后台是ssm框架,前台主要是用easyUI,ajax,jquery等技术,数据库使用的是mysql+Mongodb,mysql主要用来存储用户的数据和后台系统的数据,Mongodb主要用来存储Aop的日志记录,Easyui+ajax+jquey主要实现用户在前台查看旅游信息,实现对订单的订购,查看和退单,以及对热点旅游资讯的查看和页面的美化效果,后台主要是对旅游线路,景点,旅游主题和导游信息的业务操作,以及对用户订单和新闻资讯的处理,从而实现从前台页面到后台的交互。 一、首先介绍我们的登录和注册页面。 登录页面:我们用到easyui的美化,并采取验证码登录,防止别人登录,为了和后台风格保持一致,我们采用了简单、大方、清新的登录页面。 注册页面:这个页面采取HTML5+webservice接口调用,注册页面主要展示给用户,所以我们的页面更炫、更酷、体验度更好等,最后调用了一个webservice的接口,用户注册时填写手机验证码,让用户的信息更安全。 二、其次是我们项目分为两大系统,首先管理员登录。 1.管理员拥有所有的权限,他负责给用户分配角色和权限,管理员这块有一个亮点,它可以根据用户登录的次数给用户打不同的折扣,次数越多,折扣越低,其次,将一个月内没有登录的自动拉黑. 2.旅游景点管理:这个模块主要分为三部分,景点管理,线路管理和美景展示,景点管理主要关联了推送展示和景点门票.旅游线路管理这块关联的比较繁琐,因为每个景点都有线路,所以他和旅游景点管理,旅游项目管理,导游管理,订单管理,门票管理都有间接的关联关系.最后就是美景展示,采用了html5的视屏播放标签,对整个旅游项目的一个介绍. 3.旅游项目管理:这个模块主要分为五大旅游项目,亲子游,闺蜜游,蜜月游,自由行,从展示的列表中可以看到五大项目对于开发人员大同小异,它主要涉及一般的增删改查,富文本编辑器.它关联了旅游线路管理和订单管理,其中它可以批量新增线路,还可以双击查看属于这个旅游项目中的路线,让用户更直观的了解旅游项目工程. 4.导游管理:这个模块分为四个部分,导游基本信息,带团申请表,导游风采展示,导游展示表.导游的基本信息主要介绍了导游的信息和评分级别,带团申请表主要有导游申请带团旅游的申请信息,导游风采展示主要有导游的照片,双击照片可以查看导游的基本信息.它是一个独立的模块. 5.订单管理:这个模块是我们项目的重中之重,可以这么说,整个项目基本上都是围绕它来进行,下面我们就来好好介绍,它分为四个部分:票务订单管理,景点订单管理,主题订单管理和线路订单管理.票务订单主要关联了扇形统计图(echarts)和客户订单的处理,比如:这边数据修改后echarts会改变扇形统计图.客户下单后,后台需要确认订单后,客户才能看到自己的订单信息.景和点订单管理:它又和上面我们介绍的旅游景点关联,客户下单后,后台需要确认订单后,客户才能看到自己的订单信息,主题订单管理和线路订单管理大同小异,都是在上面的基础上完成订单.最后订单这块还有一个退票的展示,用户退票之后,管理员需要确认退票,才能退票,使得这个景点的票数增加一张,确认订单则减少一张.这个模块难就难在业务繁杂,关联关系台太复杂.这是我们项目的难点之一! 6.门票管理:这个模块主要负责订单完成后这边的票数会有相应的变化,看似简单其实它关联的关系比较多的,上面的模块也提到了相应的业务. 7.新闻资讯管理:这个模块以接口为主,就是掉了一个和新闻相关的接口,也就是我们的四大接口之一. 8.统计报表管理:这个模块也是我们的亮点模块,它主要用到的技术echarts,它里面有一个柱形的统计图和扇形的统计图,柱状统计图主要和景点总人数-剩余票数统计出的旅游人数,扇形统计图主要从票务的订单拿出从今天数前七天的票务的销售情况.这个模块也是我们的技术难点之一. 9.其他的小模块介绍:网盘服务,鲜花,日志管理,网盘服务,就是创建一个文件夹,里面可以批量上传一些图片.鲜花服务:我们通过HTTPClieat调用我们一组的鲜花接口.这也是项目的技术难点之一.日志管理科:这块我们用mongodb非关系型数据库和Aop切面来进行我们项目的日志记录,它也是我们项目的技术难点之一。 三、其次介绍我们的用户系统,这个系统主要分为六个模块. 1.旅游景点管理:它就是展示了一些景点,路线,美景,联系客服.景点和线路都是可以给用户提供下单(最后涉及了一个qq邮箱接口,发送邮件),而美景就是一个视频展示,介绍我们的旅游,联系客服这块调用webservice接口进行在线聊天。 2.旅游项目管理:这个模块和管理员的模块有异曲同工之处,这块主要是给用户看的,所以展示的内容是项目中所有的线路,用户可以根据自己所需的线路来下单。 3.新闻资讯:这块也是和管理员登录界面是一样的,在这不在详细介绍了。 4.订单管理:这个模块在管理员页面介绍的很详细了,不同的就是,用户不管是下单还是退票,必须是要通过后台同意的,用户是不能立马看到下单和退票的状态,后台同意后才能让看到。 5.导游管理:在这展是为了用户能够更直接的看到自己跟团导游的信息。 6.位置服务:这个模块用到webservice调用了百度地图,它可以让用户更准确的定位到自己的位置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

彭祥.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值