基于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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

彭祥.

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

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

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

打赏作者

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

抵扣说明:

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

余额充值