简易用户管理系统-前端实现（表单&提交请求&button$基础）
laravel框架编写简易用户管理系统，前端Layui框架。
1.动态生成列表项
- 实现效果
- PHP后台传入用户对象（$users）。
- 前端页面接收数据传入table。
- 逻辑就是在生成表格时，遍历传来的$users对象，按对应的列属性赋值。
-
1 生成表格的HTML代码
<table> 2 3 <thead> 4 <tr> 5 <th width="60"><span>ID</span></th> 6 <th width="100"><span>管理员名称</span></th> 7 <th width="100"><span>管理员角色</span></th> 8 <th width="100"><span>真实姓名</span></th> 9 <th width="100"><span>手机号</span></th> 10 <th width="150"><span>邮箱</span></th> 11 <th width="100"><span>上次登录ip</span></th> 12 <th class="sort" width="150"><span>上次登录时间</span></th> 13 <th width="50"><span>状态</span></th> 14 <th width="120" align="center"><span>操作</span></th> 15 </tr> 16 </thead> 17 18 <tbody> 19 20 <?php foreach($users as $k => $v):?> 21 <tr id = <?php echo (int)$v->id +1 ?>> 22 <td><?php echo $v->id ?></td> 23 <td><?php echo $v->username ?></td> 24 <td><?php 25 switch($v->role){ 26 case 0: echo '超级管理员';break; 27 case 1: echo '普通管理员';break; 28 case 2: echo '编辑';break; 29 case 3: echo '审核';break; 30 }?> 31 </td> 32 <td><?php echo $v->realname ?></td> 33 <td><?php echo $v->phone_number ?></td> 34 <td><?php echo $v->email ?></td> 35 <td><?php echo $v->last_login_ip ?></td> 36 <td><?php echo $v->last_login_time ?></td> 37 <td><?php echo $v->status ?></td> 38 39 <td> 40 <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)" /> 41 42 <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)" /> 43 </td> 44 45 </tr> 46 <?php endforeach ?> 47 </tbody> 48 49 </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. 登出操作
- 敲码中。。
浙公网安备 33010602011771号