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

淩亂°似流年 2022-10-11 03:36 331阅读 0赞

## 前言 ##

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

SSM网上书城

## 技术介绍： ##

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

## 项目结构 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]

## 主要功能： ##

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

## 项目截图展示： ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]

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

<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操作  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 8]  
书籍添加模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 9]  
用户列表，查看用户信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 10]  
订单列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 11]  
销售视图，使用echart插件，按销售时间，产品进行统计相应的销售额，使项目的订单信息更加直观。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 12]  
封装的echart视图，详情查看  
[echart实现销售视图][echart]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20221005/cf88f394894143f3acd883e057f1943d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20221005/8ea34026afff4e4a9511f0f5b7c24ecb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20221005/8bffb08894044ff9885d018286683970.png
[layui]: https://www.layui.com/layer/?alone
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]: /images/20221005/10939513720c43f0a842e2ff71c3e177.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 4]: /images/20221005/cf1d4f5c403a4a61968bfa57c4723423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 5]: /images/20221005/a85caf822a11432e8bf6ed42ccf9c59a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 6]: /images/20221005/1ec3963f40434023a7472f72965a7bae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 7]: /images/20221005/6b003c4610a9438c838d75f4d867fc75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 8]: /images/20221005/8304f8156deb4b13b7c377082cf431b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 9]: /images/20221005/5ce8dcd47ff2431a90bf0098636e5679.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 10]: /images/20221005/765e8951f4b143268ee4a4ee4c1e4efd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 11]: /images/20221005/87f0af09c9464200957feafad6a15aac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 12]: /images/20221005/929db85700714d1cb4834359fdfdd368.png
[echart]: https://blog.csdn.net/pengxiang1998/article/details/118354130
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 13]: /images/20221005/2c6e6a25fcd74ef58cfb5e41431ae490.png