ssm+layui 超市管理系统大学期末作业详解（4）

最新推荐文章于 2021-06-01 15:56:28 发布

一条舞动青春的咸鱼

最新推荐文章于 2021-06-01 15:56:28 发布

阅读量601

点赞数 1

文章标签：控制器

本文链接：https://blog.csdn.net/qq_42923368/article/details/103550990

版权

表格界面

<%@page import="org.springframework.ui.Model"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超市管理系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
 <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
    <script src="layui/layui.js"></script>
</head>
 <body class="layui-layout-body">
 <div class="layui-layout layui-layout-admin">
  <div class="layui-header">
   <div class="layui-logo">超市管理系统</div>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                欢迎光临，${sessionScope.type}${sessionScope.account}
            </li>
            <li class="layui-nav-item"><a href="">安全退出</a></li>
        </ul>
  </div>
  <div class="layui-side layui-bg-black">
   <ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="demo">
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">管理员管理</a>
    <dl class="layui-nav-child">
      <dd><a href="jumpMinfo">管理员信息查询</a></dd>
      <dd><a >销售员事务管理</a></dd>
      <dd><a href="javascript:;">仓储管理员事务管理</a></dd>
      <dd><a href="javascript:;">平台用户信息管理</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">销售员管理</a>
    <dl class="layui-nav-child">
      <dd><a href="">商品管理</a></dd>
      <dd><a href="">供货商管理</a></dd>
      <dd><a href="">销售记录</a></dd>
    </dl>
  </li>
  <li class="layui-nav-item layui-nav-itemed">
    <a href="javascript:;">仓库管理员管理</a>
    <dl class="layui-nav-child">
      <dd><a href="">进货信息管理</a></dd>
      <dd><a href="">供货商管理</a></dd>
    </dl>
  </li>
</ul>
  </div>
  <div class="layui-body" >
  <div style="padding:40px">  
   <script id="toolbarDemo" type="text/html">
     <div class="layui-btn-container">
       <button class="layui-btn layui-btn-sm" lay-event="insertNewData">插入新数据</button>     
     </div>
  </script>  
         <table class="layui-hide" id="maintable" lay-filter="maintable"></table>   
   <script id="barDemo" type="text/html">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   </script>  
  </div>            
  </div>    
   </div>
 <script type="text/javascript" src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script>
layui.use(['layer','element','jquery','table'], function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  var $=layui.jquery;
  var table = layui.table; 
  table.render({
     elem: '#maintable'
     ,url:'returnJason'
     ,toolbar: true
     ,title: '用户数据表'
     ,totalRow: true
     ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
     ,cols: [[
       {field:'mid', title:'ID', width:100, fixed: 'left', sort: true}
       ,{field:'pass', title:'密码', width:200, edit: 'text'}
       ,{field:'mname', title:'用户名', width:200, edit: 'text'}
       ,{field:'memail', title:'邮箱', width:260, sort: true,edit: 'text'}
       ,{field:'msex', title:'性别', width:80, edit: 'text', sort: true}
       ,{field:'mphone', title:'电话', width:200, sort: true,edit: 'text'}
       ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
     ]]
     ,page: true
   });
//监听单元格编辑
  table.on('edit(maintable)', function(obj){
    var value = obj.value //得到修改后的值
    ,data = obj.data //得到所在行所有键值
    ,field = obj.field; //得到字段
    if("${sessionScope.type}"=="管理员"){
     layer.msg('[ID: '+ data.mid +'] ' + field + ' 字段更改为：'+ value);
    }else{
     layer.msg("您不是管理员，无权操作");
     table.reload('maintable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
              }
            }
          }, 'data');
    }
 });
  //头工具栏事件
  table.on('toolbar(maintable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    if("${sessionScope.type}"=="管理员"){
     switch(obj.event){
        case 'insertNewData':
          openInsert();
        break;      
      };
    }else{
     layer.msg("您不是管理员，无权操作");
     table.reload('maintable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
              }
            }
          }, 'data');
    }
  });
  //打开插入页面
  function openInsert(){
   layer.open({
    type:2,
    title:'插入管理员数据',
    content:"views/insertManager.html",
    area:['600px','420px'],
      success : function(data) {
   //重新渲染页面元素
            layui.use(['form','layer','jquery'], function(){
       var form = layui.form;
            });
        }
   });
  }
  //监听行工具事件
  table.on('tool(maintable)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if("${sessionScope.type}"=="管理员"){
     if(obj.event === 'del'){
         layer.confirm('真的吵他鱿鱼？', {
            btn: ['让他滚蛋','继续当苦力'] //按钮
          }, function(){
          $.ajax({
           url:'deleteManagers',
                  type:'post',
                  dataType:'text',
                  data:{"mid":data.mid},
                success: function(data){
               table.reload('maintable', {
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                      ,where: {           
                      }
                    }, 'data');
              },          
              error:function(err){
               layer.msg("404");
              }  
          });
            layer.msg('的确很重要', {icon: 1});
          }, function(){
            
          });
        } else if(obj.event === 'edit'){
         $.ajax({         
          url:'updateManagers',
             type:'post',
             dataType:'text',
             data:{"mid":data.mid,
                 "pass":data.pass,
             "mname":data.mname,
             "memail":data.memail,
             "msex":data.msex,
             "mphone":data.mphone
                },        
          success: function(data){
           table.reload('maintable', {
                  page: {
                    curr: 1 //重新从第 1 页开始
                  }
                  ,where: {                    
                  }
                }, 'data');
          },          
          error:function(err){
           layer.msg("404");
          }        
          });         
        }
    }else{
     layer.msg("您不是管理员，无权操作");
     table.reload('maintable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
              }
            }
          }, 'data');
    }
  });
});
</script>
</body>
</html>

在这里插入图片描述
本界面完全使用layui编写的，数据表格的规范是json
格式参考

所以当你从数据库获得数据lst的时候还不够，你还需要对象中包一个对象，外部属性要求是msg，code，count，数据属性是data泛型
所以创建resultMap类用来做传递json’的操作

package com.market.pojo;
public class ResultMap<T> {    
 private String msg;    
 private  T data;    
 private  int code;    
 private  int count;
 public String getMsg() {
  return msg;
 }
 public void setMsg(String msg) {
  this.msg = msg;
 }
 public T getData() {
  return data;
 }
 public void setData(T data) {
  this.data = data;
 }
 public int getCode() {
  return code;
 }
 public void setCode(int code) {
  this.code = code;
 }
 public int getCount() {
  return count;
 }
 public void setCount(int count) {
  this.count = count;
 }
 public ResultMap(String msg, T data, int code, int count) {
  super();
  this.msg = msg;
  this.data = data;
  this.code = code;
  this.count = count;
 }
 public ResultMap() {
  super();
 }
 @Override
 public String toString() {
  return "ResultMap [msg=" + msg + ", data=" + data + ", code=" + code + ", count=" + count + "]";
 }  
}

在控制器中实例ManagerService

@Autowired
 ManagerService ms;

调用returnJason传送jason数据

@RequestMapping("/returnJason")
 @ResponseBody
 public ResultMap<List<Managers>> findAll(@RequestParam("page") int page,@RequestParam("limit") int limit){ 
  System.out.println("page="+page);
  List<Managers>contentList=ms.selectByLimit(page);
//  System.out.println("returnjson数据List<Managers>");
//  
//  System.out.println(contentList.toString());
  int totals=ms.getCountNum();
  System.out.println("total="+totals);
  ResultMap<List<Managers>> result=new ResultMap<List<Managers>>("",contentList,0,totals);
//  System.out.println("returnJason的数据："+result.toString());
  return result;
 }

打开新界面插入新数据

//头工具栏事件
  table.on('toolbar(maintable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id);
    if("${sessionScope.type}"=="管理员"){
     switch(obj.event){
        case 'insertNewData':
          openInsert();
        break;      
      };
    }else{
     layer.msg("您不是管理员，无权操作");
     table.reload('maintable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
              }
            }
          }, 'data');
    }
  });
  //打开插入页面
  function openInsert(){
   layer.open({
    type:2,
    title:'插入管理员数据',
    content:"views/insertManager.html",
    area:['600px','420px'],
      success : function(data) {
   //重新渲染页面元素
            layui.use(['form','layer','jquery'], function(){
       var form = layui.form;
            });
        }
   });
  }

当检验通过你是管理员的身份，将会打开弹出层views/insertManager.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" href="../layui/css/layui.css">
 <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
    <script src="../layui/layui.js"></script>
</head>
<body>
 <div style="padding:30px" id="insertManager">
   <form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-block">
          <input name="name" class="layui-input" type="text" placeholder="请输入姓名" autocomplete="off" lay-verify="name">
       </div>
       <div class="layui-form-item">
        <label class="layui-form-label">密码：</label>
        <div class="layui-input-block">
          <input name="pass" class="layui-input" type="text" placeholder="请输入密码" autocomplete="off" lay-verify="pass">
       </div>
       </div>
       <div class="layui-inline">
          <label class="layui-form-label">验证邮箱</label>
          <div class="layui-input-inline">
           <input name="email" class="layui-input" type="text" autocomplete="off" lay-verify="email">
          </div>
       </div>
       <div class="layui-form-item">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block">
          <input name="sex" title="男" type="radio" checked="" value="男">
          <input name="sex" title="女" type="radio" value="女">
       </div>
       <div class="layui-form-item">
       <div class="layui-inline">
          <label class="layui-form-label">验证手机</label>
          <div class="layui-input-inline">
           <input name= 
           "phone" class="layui-input" type="tel" autocomplete="off" lay-verify="required|phone">
          </div>
       </div>
       <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" type="submit" lay-filter="dosubmit" lay-submit="">立即提交</button>
          <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
      </div>
    </form>       
     </div>
     <script type="text/javascript" src="../lib/jquery-3.3.1.min.js"></script>
     <script src="../layui/layui.js"></script>
     <script>
     layui.use(['form','layer','jquery'], function(){
       var form = layui.form;
       var $ = layui.jquery;
       //监听提交
       form.on('submit(dosubmit)', function(data){
      $.ajax({
               url:'../InsertManager',
               data:data.field,
               dataType: "json",
               type:'POST',
               async: false,
               success:function (data) {
                console.log("success");
                layer.msg("success");               
               }     
           })
           var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);//关闭弹出的子页面窗口
        window.parent.location.reload();
         return false;
       });    
     });
     
     </script>
</body>
</html>

layui自带的检验，我没写新的监听事件

对登录者身份判定，如果是管理员可以进行改删

 //监听行工具事件
  table.on('tool(maintable)', function(obj){
    var data = obj.data;
    //console.log(obj)
    if("${sessionScope.type}"=="管理员"){
     if(obj.event === 'del'){
         layer.confirm('真的吵他鱿鱼？', {
            btn: ['让他滚蛋','继续当苦力'] //按钮
          }, function(){
          $.ajax({
           url:'deleteManagers',
                  type:'post',
                  dataType:'text',
                  data:{"mid":data.mid},
                success: function(data){
               table.reload('maintable', {
                      page: {
                        curr: 1 //重新从第 1 页开始
                      }
                      ,where: {           
                      }
                    }, 'data');
              },          
              error:function(err){
               layer.msg("404");
              }  
          });
            layer.msg('的确很重要', {icon: 1});
          }, function(){
            
          });
        } else if(obj.event === 'edit'){
         $.ajax({         
          url:'updateManagers',
             type:'post',
             dataType:'text',
             data:{"mid":data.mid,
                 "pass":data.pass,
             "mname":data.mname,
             "memail":data.memail,
             "msex":data.msex,
             "mphone":data.mphone
                },        
          success: function(data){
           table.reload('maintable', {
                  page: {
                    curr: 1 //重新从第 1 页开始
                  }
                  ,where: {                    
                  }
                }, 'data');
          },          
          error:function(err){
           layer.msg("404");
          }        
          });         
        }
    }else{
     layer.msg("您不是管理员，无权操作");
     table.reload('maintable', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
              key: {
              }
            }
          }, 'data');
    }
  });

通过异步发送的方式向控制器deleteManagers发送请求

@RequestMapping("/deleteManagers")
@ResponseBody
 public String updateManagers(@PathParam("mid")String mid) {
  System.out.println("成功来到deleteManagers");
  int id=Integer.parseInt(mid);
  ms.deleteByPrimaryKey(id);
  return "successful insert";
 }

通过异步发送的方式向控制器updateManagers发送请求,更改数据

@RequestMapping("/updateManagers")
 @ResponseBody
 public String updateManagers(Managers m) {
  System.out.println("成功来到updateManagers");
  ms.updateByPrimaryKeySelective(m);
  return "successful insert";
 }

一条舞动青春的咸鱼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ssm+layui 超市管理系统大学期末作业详解（4）

表格界面<%@page import="org.springframework.ui.Model"%><%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html><html lang="en">...
复制链接

扫一扫