简易用户管理系统-前端实现（表单&提交请求&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. 登出操作
- 敲码中。。
简易用户管理系统-前端实现（表单&提交请求&button$基础）的更多相关文章
- 使用form表单提交请求如何获取后台返回的数据？
问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...
- 结合API Gateway和Lambda实现登录时的重定向和表单提交请求（Python3实现）
1. 创建Lambda函数,代码如下: from urllib import parse def lambda_handler(event, context): body = event['body' ...
- 前端 动态表单提交（post、put）
第一步:form表单定义统一属性 <input type="text" class="form-value" /> 第二步:获取所有值 var fo ...
- 前后端交互技术之servlet与form表单提交请求及ajax提交请求
1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...
- SpringMVC中前端Form表单提交后跳转不过去的问题
今天晚上打算谢谢Spring整合这个内容,写的差不多之后运行 出现了各种问题 逐一排查 首先有一个(MyEclipse10) 一: class path resource [spring-mvc.xm ...
- python中前后端通信方法Ajax和ORM映射（form表单提交）
后端从数据库获取数据给到前端: 第一种方式: admin.py文件代码: @admin.route('/showList') def show(): # 获取数据库所有文章数据,得到一个个对象 res ...
- 前端-form表单与CSS
目录 form表单 表单属性 label标签 input标签 select 下拉框标签 textarea多行文本 提交 Flask 结合form表单 初探 CSS介绍以及基本选择器 基本选择器 组合选 ...
- 24.form表单提交的六种方式
form表单提交方式 1.无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标 ...
- 编写HTML表单提交并接受数据信息（获取用户通过表单提交的内容）
MyInfoForm.java package com.fxl; import java.io.IOException; import java.io.PrintWriter; import java ...
随机推荐
- jQuery中$()函数的7种用法汇总
前言 jQuery对象是一个类数组的对象,含有连续的整形属性以及一系列的jQuery方法.它把所有的操作都包装在一个jQuery()函数中,形成了统一(也是惟一)的操作入口.其中我们用的非常频繁的一个 ...
- Java 国际化标准程序实现
国际化程序实现 所谓的国家化应用指的就是根据当前的语言环境读取指定的语言资源文件. 如果要想实现国际化的操作,那么首先要解决的问题就是如何读取资源文件的问题:所谓的资源文件 就是指文件后缀名称为:&q ...
- [b0044] numpy_快速上手
1 概念理清 2 创建数组 2.1 f1= np.array( [ [1,2,3,4], [2,3,4,5], [3,4,5,6] ]) 其他代码 a= np.array([ [ [3.4,5,6,8 ...
- GitHub最强技术面试手册：Tech Interview Handbook
摘要: 求职还是需要认真准备的. 原文:超实用技术面试手册,从工作申请.面试考题再到优势谈判,GitHub获30000星 作者:量子位 技术人员求职面试,单刷leetcode上的大厂题库可能还不够. ...
- 记录C#连接数据库工具类
一.SQL Server /// <summary> /// 数据库的通用访问代码 /// 此类为抽象类, /// 不允许实例化,在应用时直接调用即可 /// </summary&g ...
- eNSP仿真软件之利用三层交换机实现VLAN间路由
1.实验原理: VLAN将一个物理的LAN在逻辑上划分成多个广播域.VLAN内的主机间可以直接通信,而VLAN间不能直接互通. 在现实网络中,经常会遇到需要跨VLAN相互访问的情况,工程师通常会选择一 ...
- 昨天周末晚上没有出去，码了一小段，先留着kangkang。
昨天周末晚上没有出去,码了一小段,先留着kangkang. import numpy as npimport matplotlibmatplotlib.use('Agg')import matplot ...
- React 修改获取state中的值
14===> 修改state中的值 不能够直接修改 state = { num: 10 } 如 this.state.num+=12; 不能够直接修改 错误 通过 this.setState({ ...
- 微信小程序支付功能讲解(1)
前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...
- AcWing 800. 数组元素的目标和
网址 https://www.acwing.com/solution/AcWing/content/2064/ 题目描述给定两个升序排序的有序数组A和B,以及一个目标值x,请你求出满足A[i] + B ...