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

Posted 2021-09-09 彭祥.

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

技术栈

开发语言：JavaWeb
后端框架：SSM （Spring+SpringMVC+Mybatis）
开发环境：Eclipse mysql5.5以上 Tomcat 8以上 JDK1.8
前端框架：LayUI，BootStrap
前端技术：ajax+json ，javascript

功能介绍

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

视频演示

SSMl旅游购票系统

技术难点

说是技术难点其是也算不上，只是博主在开发项目时遇到的一些问题与自己总结的一些经验
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

后台管理