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. 登出操作

  • 敲码中。。

简易用户管理系统-前端实现(表单&提交请求&button$基础)的更多相关文章

  1. 使用form表单提交请求如何获取后台返回的数据?

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  2. 结合API Gateway和Lambda实现登录时的重定向和表单提交请求(Python3实现)

    1. 创建Lambda函数,代码如下: from urllib import parse def lambda_handler(event, context): body = event['body' ...

  3. 前端 动态表单提交(post、put)

    第一步:form表单定义统一属性 <input type="text" class="form-value" /> 第二步:获取所有值 var fo ...

  4. 前后端交互技术之servlet与form表单提交请求及ajax提交请求

    1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...

  5. SpringMVC中前端Form表单提交后跳转不过去的问题

    今天晚上打算谢谢Spring整合这个内容,写的差不多之后运行 出现了各种问题 逐一排查 首先有一个(MyEclipse10) 一: class path resource [spring-mvc.xm ...

  6. python中前后端通信方法Ajax和ORM映射(form表单提交)

    后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...

  7. 前端-form表单与CSS

    目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...

  8. 24.form表单提交的六种方式

    form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...

  9. 编写HTML表单提交并接受数据信息(获取用户通过表单提交的内容)

    MyInfoForm.java package com.fxl; import java.io.IOException; import java.io.PrintWriter; import java ...

随机推荐

  1. SpringCloud(五):断路器(Hystrix)和hystrixdashboard图实现链路追踪

    第一:关于服务调用和熔断安全: ribbon和Feign: 1. 相当于nigx+doubbe,微服务间的服务调用,API网关的请求转发等内容2. Feign整合了Ribbon和Hystrix  Hy ...

  2. HTML <input> 标签的 accept 属性

    <form> <input type="file" name="pic" id="pic" accept="im ...

  3. ie11 SCRIPT5011:不能执行已释放Script的代码

    依照我遇到的问题为例: (我的页面结构为:父页面中嵌套有iframe子页面) 1.造成这种情况的原因是:父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给 ...

  4. 【Gradle】Android Gradle 高级自定义

    Android Gradle 高级自定义 使用共享库 Android的包,如android.app,android.content,android.view,android.widget等,是默认包含 ...

  5. 树莓派Raspberry pi安装系统/烧录系统

    一:下载系统文件 1.树莓派官网系统下载链接:https://www.raspberrypi.org/downloads/raspbian/ (也可在百度云盘下载:https://pan.baidu. ...

  6. windows下安装react

    在 Windows 10 64 下创建 React App 由 SHUIJINGWAN · 2018/03/26   1.在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本: ...

  7. & 和 && 的区别,与(&)运算符、位移运算符(<< 、>>、>>>)的含义及使用(Java示例)

    & 和 && 的区别,与(&)运算符.位移运算符(<< .>>.>>>)的含义及使用(Java示例) 1. & 和 & ...

  8. 爬取编程常用词汇,保存为Excel

    编程常用词汇 import requests import openpyxl from lxml import etree import re url = 'https://www.runoob.co ...

  9. jango rest-framework page_size更新

    老项目是三年前写的, 这周的新项目要用上DRF的分页功能时,发现老的写法无效了. 于是看了一些文档,原来写法变了. https://blog.csdn.net/dqchouyang/article/d ...

  10. 「MacOS」将网站转换为应用程序,只需一个Unite

    unite mac有着非常强大的功能,能够轻松的将网站转换为macOS上的应用程序,除了现代化的网页浏览功能以外,Unite for Mac下载还包括特定于macOS的功能,通知,TouchBar支持 ...