SSM+Layui网上书城系统 SSM商城系统

前言

从SSM框架整合搭建到Layui模板初窥门径,从对项目进行需求分析到将系统的开发提上日程,接下来,是对该项目进行简单总结。
在这里插入图片描述
该页面使用的是layui的时间线模块

SSM网上书城

技术介绍:

SSM+layui网上书城项目后端使用SSM框架(Spring+SpringMVC+Mybatis),前端使用layui框架,并整合使用echart视图,使用ajax进行异步请求,json返回数据

项目结构

在这里插入图片描述

主要功能:

前台:
书籍列表 购物车(session实现) 订单列表 个人信息 登录 注册
后台:
书籍管理 用户管理 订单管理 类别管理

项目截图展示:

前台书籍列表,用户可以检索书籍(模糊查询),并借助layui框架改变分页格式,打印导出书籍信息功能(导出excel)
在这里插入图片描述
购物车模块,使用session实现,可以实现购物车内商品数量增删,可清空购物车,下单前检测购物车是否为空,是否登录。
加入购物车使用了layui的弹框组件
layui弹框组件
删除弹框的调用方法

<script id="edit">
			<a onclick="del({{d.id}})" class="layui-btn layui-btn-sm layui-btn-danger">删除</a>
		</script>
		<script>
		function del(id){
			layer.confirm('确认删除该商品?', {
				  btn: ['确认','取消'] //按钮
				}, function(){
					layer.msg('正在删除 !',{icon: 1}, function(){						window.location.href="${basePath}/good/del.action?id="+id;  //具有延时作用
				});
				}, function(){
				  layer.msg('未删除 !',{icon: 2} );
				});
		}
		</script>

在这里插入图片描述

在这里插入图片描述
个人订单,可查询自己买的书籍商品
在这里插入图片描述
个人信息页面,可修改密码,查看个人信息
在这里插入图片描述
注册模块,使用ajax进行请求验证账户是否存在,判断输入信息格式等
在这里插入图片描述
注册模块详细代码

<form class="layui-form" action="#">
  <div class="layui-form-item">
    <label class="layui-form-label" style="width:400px">手机账号</label>
    <div class="layui-input-block">
      <input type="text" name="tel"  id="tel" onfocus="tel()" required  lay-verify="required" style="width:400px" placeholder="请输入手机号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width:400px">输入密码</label>
    <div class="layui-input-block">
      <input type="password" name="opass"  required lay-verify="required" style="width:400px" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width:400px">确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="npass" required lay-verify="required" style="width:400px" placeholder="请确认密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" style="width:400px">备注信息</label>
    <div class="layui-input-block">
      <input type="text" name="infos" required lay-verify="required" style="width:400px" placeholder="请确认备注信息" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item" >
   <label class="layui-form-label" style="width:400px"></label>
    <div class="layui-input-block" >
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script>

$(function(){   
	   //输入框的值改变时触发,我们为使其使用手机号注册,设定为11位时触发
	  $("#tel").on("input",function(e){
	    //获取input输入的值
	    var tel=e.delegateTarget.value;
	    if(tel.length==11){
	    	 $.ajax({
	       	  type:"POST",
	       	  url:"${basePath}/user/getbyid.action",
	       	  data:"uname="+tel,
	       	  dataType:"json",
	       	  success:function(data){
	       		  if(data.code==300){
	       			  layer.msg('该账户已存在!', {icon: 2});
	       		  }else{
	       			  layer.msg('该账户可用!', {icon: 1});
	       		  }	       	   
	       	  },
	       	 });
	    }
	  });
	});

layui.use('form', function(){   //表单提交时进行的
  var form = layui.form;
  //监听提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    var tel=data.field.tel;
    var opass=data.field.opass;
    var npass=data.field.npass;
    var info=data.field.infos;
    if(tel.length!=11){
    	  layer.msg('手机号为11位!', {icon: 2});
    	  return false;
    	 }
    if(opass.length>8||opass.length<4){
    	  layer.msg('密码长度为4-8字符!', {icon: 2});
    	  return false;
    	 }
    if(npass.length>8||npass.length<4){
  	  layer.msg('密码长度为4-8字符!', {icon: 2});
  	  return false;
  	 }
    if(npass!=opass){
    	layer.msg('两次密码输入不一致!', {icon: 2});
    	  return false;
    }
    $.ajax({   //
    	  type:"POST",
    	  url:"${basePath}/user/regist.action",
    	  data:"uname="+tel+"&&password="+npass+"&&is_admin"+info,
    	  dataType:"json",
    	  success:function(data){
    		  if(data.code==300){
    			  layer.msg('该账户已存在!', {icon: 2});
    		  }else{
    			  layer.msg('注册成功!', {icon: 1});
    		  }
    	   
    	  },
    	 });
    	 return false;
    	 });  	
  });

</script>

后台书籍管理,可对书籍进行CURD操作
在这里插入图片描述
书籍添加模块
在这里插入图片描述
用户列表,查看用户信息
在这里插入图片描述
订单列表
在这里插入图片描述
销售视图,使用echart插件,按销售时间,产品进行统计相应的销售额,使项目的订单信息更加直观。
在这里插入图片描述
封装的echart视图,详情查看
echart实现销售视图

书籍类别管理
在这里插入图片描述
以上便是SSM网上书城的简要介绍了,码字不易,给个赞呗!

  • 18
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 11
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

彭祥.

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

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

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

打赏作者

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

抵扣说明:

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

余额充值