简易用户管理系统-前端实现（表单&提交请求&button$基础）

laravel框架编写简易用户管理系统，前端Layui框架。

1.动态生成列表项

• 实现效果

• PHP后台传入用户对象（$users）。
• 前端页面接收数据传入table。
• 逻辑就是在生成表格时，遍历传来的$users对象，按对应的列属性赋值。

•     生成表格的HTML代码
  
                  <table>
  
                       <thead>
                           <tr>
                                   <th width="60"><span>ID</span></th>
                                   <th width="100"><span>管理员名称</span></th>
                                   <th width="100"><span>管理员角色</span></th>
                                   <th width="100"><span>真实姓名</span></th>
                                   <th width="100"><span>手机号</span></th>
                                   <th width="150"><span>邮箱</span></th>
                                   <th width="100"><span>上次登录ip</span></th>
                                   <th class="sort" width="150"><span>上次登录时间</span></th>
                                   <th width="50"><span>状态</span></th>
                                   <th width="120" align="center"><span>操作</span></th>
                           </tr>
                       </thead>
  
                       <tbody>
  
                           <?php foreach($users as $k => $v):?>
                               <tr id = <?php echo (int)$v->id +1 ?>>
                                       <td><?php echo $v->id ?></td>
                                       <td><?php echo $v->username ?></td>
                                       <td><?php
                                           switch($v->role){
                                               case 0: echo '超级管理员';break;
                                               case 1: echo '普通管理员';break;
                                               case 2: echo '编辑';break;
                                               case 3: echo '审核';break;
                                           }?>
                                       </td>
                                       <td><?php echo $v->realname ?></td>
                                       <td><?php echo $v->phone_number ?></td>
                                       <td><?php echo $v->email ?></td>
                                       <td><?php echo $v->last_login_ip ?></td>
                                       <td><?php echo $v->last_login_time ?></td>
                                       <td><?php echo $v->status ?></td>
  
                                       <td>
                                           <input type="button" value="编辑" class="layui-btn layui-btn-primary" type="button" id = <?php echo $v->id?> style="width:50%;padding:0;margin:;float:left;box-sizing:border-box;" onclick="javascript:onEditBtn(this)" />
  
                                           <input type="button" value="删除" class="layui-btn layui-btn-primary" type="button" id = <?php echo $v->id?> style="width:50%;padding:0;margin:0;float:right;box-sizing:border-box;" onclick="javascript:onDelBtn(this)" />
                                       </td>
  
                               </tr>
                           <?php endforeach ?>
                       </tbody>        
  
                   </table>

2. 点击 新增 按钮弹出表单，新建用户

• 实现效果

• button绑定点击事件 onclick()
• 弹出表单 layer.open()
• 表单验证 lay-veritfy
• 提交表单，刷新父页面

• HTML部分的代码：
  
  <!-- 弹出的增加管理员的表单 -->
      <div id="add-main" style="display: none;">
         <form class="layui-form" id="add-form" action="">
          <input type="hidden" name="_token" value="{{ csrf_token() }}" />
               <div class="layui-form-item center" >
                <label class="layui-form-label" style="width: 100px" >昵称</label>
                <div class="layui-input-block">
                 <input type="text" name="username" required value="" style="width: 240px" lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                </div>
               </div>
  
               <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">真实姓名</label>
                <div class="layui-input-block">
                 <input type="text" name="realname" required style="width: 240px" lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input">
                </div>
               </div>
  
                <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">手机</label>
                <div class="layui-input-block">
                 <input type="text" name="phone_number" required style="width: 240px" lay-verify="required|phone|number" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
               </div>
  
                <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">邮箱</label>
                <div class="layui-input-block">
                 <input type="text" name="email" required style="width: 240px" lay-verify="required|email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
               </div>
  
              <div class="layui-form-item">
                  <label class="layui-form-label" style="width: 100px">设置密码</label>
                  <div class="layui-input-block">
                    <input name="password" class="layui-input" required style="width: 240px" type="password" id="firstpsd" placeholder="请输入密码" autocomplete="off" lay-verify="firstpsd">
                  </div>
              </div>
  
              <div class="layui-form-item">
                  <label class="layui-form-label" style="width: 100px">确认密码</label>
                  <div class="layui-input-block">
                      <input name="password" class="layui-input" required style="width: 240px" type="password" id="secondpsd" placeholder="请再次输入密码" autocomplete="off" lay-verify="secondpsd">
                  </div>
              </div>
  
               <div class="layui-form-item">
                  <label class="layui-form-label" style="width: 100px">管理员角色</label>
                  <div class="layui-input-block">
                    <select name="role" lay-verify="role">
                      <option value="">请选择</option>
                      <option value="0">超级管理员</option>
                      <option value="1">普通管理员</option>
                      <option value="2">编辑</option>
                      <option value="3">审核</option>
                    </select>
                  </div>
               </div>
  
               <div class="layui-form-item">
                <div class="layui-input-block">
                 <button class="layui-btn" lay-submit="" lay-filter="save" >确认</button>
                 <button class="layui-btn layui-btn-primary" id="closeBtn" >取消</button>
                </div>
               </div>
         </form>
      </div>

  弹出页面的脚本
  
  <script type="text/javascript">
  
          function onAddBtn(){
           //弹出的页面层-自定义
              layer.open({
                  type: 1,
                  title:"新增管理员",
                  closeBtn: false,
                  shift: 2,
                  area: ['400px', '550px'],
                  shadeClose: true,
                  //btn: ['新增', '取消'],
                  //btnAlign: 'c',
                  content: $("#add-main"),//表单样式 div的id
                  success: function(layero, index){},
                  yes:function(){
                  }
              });
          }
      </script>

  表单验证与提交的脚本
  
  layui.use(['layer','form'],function(){
              var layer = layui.layer;
              var $ = layui.jquery;
              var form = layui.form();
  
              //自定义验证规则
              form.verify({
                  firstpsd:[
                      /^[\S]{6,12}$/
                      ,'密码必须6到12位，且不能出现空格'
                  ]
                  ,secondpsd: function(value){
                      //按照id取值 #id
                      //alert($("#firstpsd").val());
                      if(value != $("#firstpsd").val()){
                          $("#secondpsd").val("");
                          return '确认密码与密码不一致';
                      }
                  }
                  ,role:function(value){
                      if(value == ''){
                          return "请选择管理员角色";
                      }
                  }
              });
  
              //监听新增事件的提交
              form.on('submit(save)',function(data){
                  params = data.field;    //获取表单数据
                  /*layer.alert(JSON.stringify(data.field), {
                      title: '最终的提交信息'
                  });*/
  
                  submit($,params); //调用提交请求的函数
                  return false;
              });
  
              //监听取消按钮
              var obj = document.getElementById('closeBtn');
              obj.addEventListener('click', function cancel(){
                  CloseWin();
              });
  
          });

  提交请求和刷新的函数脚本
  
  //请求回调函数
          function submit($, params){
              $.post('/addUser',params, function(data){
  
                  if(data.code == 1){
                  //操作成功
                      //输出信息
                      layer.msg(data.msg,function(){
                          CloseWin();//关闭当前窗口
  
                      });
                  }else{
                  //操作失败
                      layer.msg(data.msg,function(){
                          //CloseWin();//关闭当前窗口
                          location.reload();//刷新页面
                          return false;
                      });
                  }
  
              },'json');
          }
  
          //关闭新增窗口并刷新的函数
          function CloseWin(){
              parent.location.reload(); //父页面刷新
              var index = parent.layer.getFrameIndex(window.name);    //先得到当前iframe层的索引
              parent.layer.close(index);    //再执行关闭
          }

3.点击每行对应的编辑按钮，更新用户信息

• 实现效果

• 每行的用户id作为该“编辑”按钮的id绑定。
• 每行设置一个行id，设置为用户id+1。
• 设置点击事件，弹出表单，给表单绑定对应行的数据
• 提交验证表单

• HTML部分的代码
  
  <!-- 弹出的更新管理员信息的表单 -->
      <div id="edit-main" style="display: none;">
         <form class="layui-form" lay-filter="edit-form" action="">
          <input type="hidden" name="_token" value="{{ csrf_token() }}" />
               <div class="layui-form-item center" >
                <label class="layui-form-label" style="width: 100px" >昵称</label>
                <div class="layui-input-block">
                 <input type="text" id = "nickname" name="username" required value="" style="width: 240px;background:#F2F2F2" lay-verify="required" readonly="true" autocomplete="off" class="layui-input">
                </div>
               </div>
  
               <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">真实姓名</label>
                <div class="layui-input-block">
                 <input type="text" id = "realname" name="realname" required style="width: 240px;background:#F2F2F2" lay-verify="required" disabled = "true" placeholder="" autocomplete="off" class="layui-input">
                </div>
               </div>
  
               <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">手机</label>
                <div class="layui-input-block">
                 <input type="text" name="phone_number" id = "mobile" required style="width: 240px" lay-verify="required|phone|number" placeholder="" autocomplete="off" class="layui-input">
                </div>
               </div>
  
                <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">邮箱</label>
                <div class="layui-input-block">
                 <input type="text" name="email" id = "email" required style="width: 240px" lay-verify="required|email" placeholder="" autocomplete="off" class="layui-input">
                </div>
               </div>
  
               <div class="layui-form-item">
                  <label class="layui-form-label" style="width: 100px">管理员角色</label>
                  <div class="layui-input-block">
                    <select id = "role" name="role" lay-verify="role">
                      <option value="">请选择</option>
                      <option value="0">超级管理员</option>
                      <option value="1">普通管理员</option>
                      <option value="2">编辑</option>
                      <option value="3">审核</option>
                    </select>
                  </div>
               </div>
  
               <div class="layui-form-item">
                <div class="layui-input-block">
                 <button class="layui-btn" lay-submit="" lay-filter="save2" >确认</button>
                 <button class="layui-btn layui-btn-primary" id="closeBtn2" >取消</button>
                </div>
               </div>
         </form>
      </div>

  编辑按钮点击响应事件

        function onEditBtn(element){

             //BUTTON的id是用户id,设置行id为用户id+1
              var item=document.getElementById(Number(element.id)+1);
              //alert(item.cells[1].innerHTML);
  
              /*
               * 使用form.val方式赋值，老是提示 form.val is not a function ，layui版本是2.5.x，很迷。
              layui.use(['layer','form'],function(){
                    var $ = layui.jquery;
                    var form = layui.form;
                  //表单初始赋值
  
                    form.val('edit-form', {
                    "username": item.cells[1].innerHTML
                    ,"realname": item.cells[3].innerHTML
                    ,"phone_number": item.cells[4].innerHTML
                    ,"email": item.cells[5].innerHTML
                    ,"role": item.cells[2].innerHTML
                    });
  
              });
  
   */ 
  
              //弹出编辑页面
              layer.open({
                  type:1,
                  title:"编辑管理员信息",
                  closeBtn:false,
                  shift:2,
                  area:['400px', '500px'],
                  shadeClose:true,
                  content:$("#edit-main"),
                  success: function(layero,index){
                      //表单赋初值 js方式
                      document.getElementById("nickname").value = item.cells[1].innerHTML;
                      document.getElementById("realname").value = item.cells[3].innerHTML;
                      document.getElementById("mobile").value = item.cells[4].innerHTML;
                      document.getElementById("email").value = item.cells[5].innerHTML;
                      document.getElementById("role").value = item.cells[2].innerHTML;
  
                      //选择框渲染 好像没用。。 选择框的默认值没有成功展示
                      layui.use(['layer','form'],function(){
                          var $ = layui.jquery;
                          var form = layui.form();
                          form.render('select');
                      });
                  },
                  yes:function(){
                  },cancel:function(index,layero){//点击取消，关闭窗口
                      layer,close(index);
                  }
              });
  
          }

  //监听更新事件的提交
              form.on('submit(save2)',function(data){
                  var params = data.field;
                  $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
                  //alert(params);
                  $.ajax({
                              type:"post",
                              url:'/updateUser',
                              data:params,
                              dataType:"json",
                              error:function(data){
                                  common.layerAlertE('链接错误！', '提示');
                              },
                              success:function(data){
                                  if(data.code == 1){
                                  //操作成功
                                      //输出信息
                                      layer.msg(data.msg,function(){
                                          CloseWin();
                                      });
                                  }else{
                                  //操作失败
                                      layer.msg(data.msg,function(){
                                          location.reload();//刷新页面
                                          return false;
                                      });
                                  }
  
                              }
                      });
  
              });

4. 删除用户

• 实现效果

• 点击按钮，弹出确认框，点击确认
• 刷新父页面

•        //删除用户对应的onClick（）事件
          function onDelBtn(element){
  
              //获取id
              var id = element.id;
              var $ = layui.jquery;
              $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
              //弹出确认弹窗
              layer.confirm('确认删除该管理员吗？', {
                btn: ['确认','取消'] //按钮
              }, function(){
                  // alert(id);
                   $.ajax({
                          type:"post",
                          url:'/delUser',
                          data:{'id':id},
                          dataType:"json",
                          error:function(data){
                              common.layerAlertE('链接错误！', '提示');
                          },
                          success:function(data){
                              if(data.code == 1){
                              //操作成功
                                  //输出信息
                                  layer.msg(data.msg,function(){
                                      CloseWin();
                                  });
                              }else{
                              //操作失败
                                  layer.msg(data.msg,function(){
                                      location.reload();//刷新页面
                                      return false;
                                  });
                              }
  
                          }
                      });
              }, function(){
  
              });
  
          }

5.用户登录

• 实现效果

• 输入用户名和密码，获取表单数据，提交请求。
• 根据不同的返回值，作页面跳转或者错误提示的处理。

• 前端模块
  
  <div class="login_from">
          <div class="login_title">
              <h1>欢迎登录CMS</h1>
          </div>
          <form class="layui-form" id="doLogin"  action="" method="post">
              <div class="form_group">
                  <input class="layui-input" id="username" name="username" placeholder="请输入账号">
                  <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                  <span class="errorinfo">请您输入用户名</span>
              </div>
              <div class="form_group">
                  <input class="layui-input" id="password" type="password" name="password" placeholder="请输入密码">
                  <span class="errorinfo">密码不能为空</span>
              </div>
  
                      <button class="layui-btn" lay-submit="" lay-filter="form">登 录</button>
          </form>
      </div>

  登录处理的脚本
  
  <script>
          layui.use('form', function(){
  
              var form = layui.form();
              var key = true;
              var slider = $('#slider');
              var verify = function (obj) {
                  obj.addClass('layui-form-danger')
                      .focus()
                      .one('input',function () {
                          obj.removeClass('layui-form-danger').next('span').fadeOut();
                      })
                      .next('span').slideDown('fast');
              }
              form.on('submit(form)', function(data){
  
                  var input = $(data.form).find('input');
                  for(var i=0;i<input.length;i++){
                      var t = input.eq(i);
                      if(t.val() == ''){
                          verify(t);
                          return false;
                      }
                  }
                  if(!key){
                      slider.one('click',function () {
                          slider.next('span').fadeOut();
                      }).next('span').slideDown('fast');
                  }else{
                      $.ajax({
                          type:"post",
                          url:'/dologin',
                          data:$('#doLogin').serialize(),
                          dataType:"json",
                          error:function(data){
                              common.layerAlertE('链接错误！', '提示');
                          },
                          success:function(data){
  
                              if(data.code==1){
                                  //登录成功，用户状态改变，跳转到菜单页
                                 layer.msg(data.msg, function(index){
                                 //layer.close(index);
                                 window.location.href = 'menu';
  
                                });
  
                              }else{
                                   layer.msg(data.msg);
  
                              }
                          }
                      });
                  }
                  return false;
              });
  
          });
      </script>

6. 登出操作

• 敲码中。。