0
点赞
收藏
分享

微信扫一扫

LayUI⑸：数据的增、删、改操作页面（数据处理PHP）

上善若水山西太原 2022-03-30 阅读 49
LayUIPHP

　　使用一段时间LayUI后，感觉LayUI并非开始接触的那样完美。

　　各种怪异的语法糖让人苦恼，但是可以理解和接受。

　　有时候觉得ASP和ASP.net挺好的，一个页面可以搞定数据的增、删、改、查，在LayUI中也可以，但如果页面中数据元素多的话代码段太长了，这让人很无奈。

　　一个程序完成，页面太多了，需要适当地精简一下。

　　一般对于一个数据表，两个文件可以完成所有的操作，一个前端页面和一个后台处理程序，前端页面上将列表和编辑页面合成在一起即可，但这样也有缺点，就是字段数多的时候，代码段会很长，看起来很不方便。

　　我的做法，前端还是分为两个：列表页面和编辑页面。

　　前端需要注意的就是子页面与父页面的参数传递。

　　后端需要注意的就是防止非法访问。

　　前端页面（列表）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
	<style>
		* { margin: 0;padding: 0;}
	</style>
</head>
<body>
<div style="width:100%;">
	
	<div class="layuimini-container">
			<div class="layuimini-main">
					<script type="text/html" id="toolbarDemo">
							<div class="layui-btn-container">
									<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
									<button class="layui-btn layui-btn-normal layui-btn-sm data-edit-btn" lay-event="edit"> 编辑 </button>
									<button class="layui-btn layui-btn-normal layui-btn-sm data-delete-btn" lay-event="delete"> 删除 </button>
									<button class="layui-btn layui-btn-normal layui-btn-sm data-exit-btn" lay-event="exit"> 关闭 </button>
							</div>
					</script>
					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
			</div>
	</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
	var selectRowObj;//选择的行对象
	
    layui.use(['form', 'table','element'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
		var element = layui.element;
			
        table.render({
            elem: '#currentTableId',
            url: 'ZTBUser.php',
			method:'POST',
			where:{"OP":"列表"},			
            toolbar: '#toolbarDemo',
            defaultToolbar: ['exports'],
            cols: [[
                {type: 'radio', width: 80, title: '选择'},
                {field: 'c01', width: 160, title: '数据库ID', sort: true},
                {field: 'c02', width: 120, title: '用户名'},
                {field: 'c03', width: 120, title: '密码'},
                {field: 'c04', width: 120, title: '类型'},
                {field: 'c05', width: 160, title: '单位名'},
                {field: 'c06', width: 100, title: '编码'},				
                {field: 'c07', width: 120, title: '岗位'},
                {field: 'c08', width: 160, title: '邮件帐号'}
            ]],
            limits: [5,10],
            limit: 15,
            page: true,
            skin: 'line',
			done: function (res, curr, count) {
			}						
        });

        // toolbar监听事件
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {
					var index = layer.open({
						title: '添加用户',
						type: 2,
						shade: 0.3,
						maxmin:false,
						shadeClose: false,
						area: ['50%', '100%'],
						content:'ZTBUserEdit.html',
						success: function (layero, index) {
									let childBody = layer.getChildFrame('body', index);//找到它的子窗口的body
									childBody.contents().find("#op").val('add');
									//解锁数据库ID
									// childBody.contents().find("#Dc01").removeClass("disabled");
									childBody.contents().find("#Dc01").removeAttr("readonly","");
						}
					});
            } 			
			if (obj.event === 'edit') {
					if(selectRowObj){
							var index = layer.open({
												title: '编辑用户',
												type: 2,
												shade: 0.3,
												maxmin:false,
												shadeClose: false,
												area: ['50%', '100%'],
												content:'ZTBUserEdit.html',
												success: function (layero, index) {
															var iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象
															let childBody = layer.getChildFrame('body', index);//找到它的子窗口的body
															childBody.contents().find("#Dc01").val(selectRowObj['data']['c01']);
															childBody.contents().find("#Dc02").val(selectRowObj['data']['c02']);
															childBody.contents().find("#Dc03").val(selectRowObj['data']['c03']);
															// childBody.contents().find("#Dc04").val(selectRowObj['data']['c04']);
															// childBody.contents().find("#Dc05").val(selectRowObj['data']['c05']);
															childBody.contents().find("#Dc06").val(selectRowObj['data']['c06']);
															childBody.contents().find("#Dc07").val(selectRowObj['data']['c07']);
															childBody.contents().find("#Dc08").val(selectRowObj['data']['c08']);
															childBody.contents().find("#op").val('edit');
															//锁定数据库ID
															// childBody.contents().find("#Dc01").addClass("disabled"); 
															childBody.contents().find("#Dc01").attr("readonly","readonly");
															//用户类型
															if(selectRowObj['data']['c04']==='管理员'){
																	childBody.contents().find("#Dc04_A").attr("checked", true);
																	childBody.contents().find("#Dc04_B").attr("checked", false);
																	childBody.contents().find("#Dc04_C").attr("checked", false);			
															}
															if(selectRowObj['data']['c04']==='文件审核'){
																	childBody.contents().find("#Dc04_A").attr("checked", false);
																	childBody.contents().find("#Dc04_B").attr("checked", true);
																	childBody.contents().find("#Dc04_C").attr("checked", false);			
															}
															if(selectRowObj['data']['c04']==='普通用户'){
																	childBody.contents().find("#Dc04_A").attr("checked", false);
																	childBody.contents().find("#Dc04_B").attr("checked", false);
																	childBody.contents().find("#Dc04_C").attr("checked", true);			
															}
															iframe.layui.form.render('radio');
															//得到单位名称的列表
															$.ajax({
																url:'ZTBGetDepartmentList.php',
																type:'POST',
																async:false,
																success:function (JsonData) {
																	DepartmentList=JsonData.data;
																	for(var i=0;i<DepartmentList.length;i++){
																		childBody.contents().find("#Dc05").append(new Option(DepartmentList[i].c02, DepartmentList[i].c02));						
																	}
																}
															});													
															childBody.contents().find("#Dc05").val(selectRowObj['data']['c05']);													
															iframe.layui.form.render('select');//重新渲染													
												}
							});										
					}
			}
			if(obj.event === 'delete'){
				if(selectRowObj){
						layer.confirm('确定要删除这条记录吗？', function (index) {
							$.ajax({
								url:'ZTBUser.php',
								data:{"OP":"删除",
									  "C01":selectRowObj['data']['C01'],
									  },
								type:'POST',
								async:true,
								success:function (JsonData) {
									if(JsonData['data']!='OK'){							
										layer.msg('删除记录失败！',{time:2000,icon:5});
									}else{
										//刷新表格
										
									}
								}
							});							 					
						layer.close(index);													
						})					
				}
			}
			if(obj.event === 'exit'){
				//关闭本窗口tab
				$(".layui-this i ",parent.document).click();				
			}
        });
        //监听表格单选框选择
        table.on('radio(currentTableFilter)', function (obj) {
			selectRowObj=obj;
        });	
    });
</script>
</body>
</html>

　　前端部分（编辑）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户信息〖编辑〗</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
	<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>	
    <style>
        body { background-color: #ffffff; }
    </style>
</head>
<body>
	
<div class="layui-form layuimini-form">
		<form class="layui-form login-bottom" lay-fiter="ZTBUserEdit">
				<input type="hidden" id="op" value="">
				<div class="layui-form-item">
					<label class="layui-form-label required">数据库ID</label>
					<div class="layui-input-block">
						<input type="text" name="Dc01" id="Dc01" lay-verify="required" lay-reqtext="数据库ID不能为空"  value="" class="layui-input" >
						<tip>YQCY-HT-000，更改000，注意数字不能重复。</tip>
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户类型</label>
					<div class="layui-input-block" id="UserType">
						<input type="radio" name="Dc04" id="Dc04_A" value="管理员" title="管理员" checked="">
						<input type="radio" name="Dc04" id="Dc04_B" value="文件审核" title="文件审核">
						<input type="radio" name="Dc04" id="Dc04_C" value="普通用户" title="普通用户">
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label required">用户名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc02" id="Dc02"  lay-verify="required" lay-reqtext="用户名称不能为空"  value="" class="layui-input">
					</div>
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" name="Dc03"  id="Dc03" value="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label required">岗位名称</label>
					<div class="layui-input-block">
						<input type="text" name="Dc07" id="Dc07"  lay-verify="required" lay-reqtext="岗位名称不能为空"  value="" class="layui-input">
					</div>		
				</div>
			
				<div class="layui-form-item">
					<label class="layui-form-label">单位名称</label>
					<div class="layui-input-inline">
						<select name="Dc05" id="Dc05" lay-filter="Department">
							<option value=""></option>
						</select>
					</div>
					<label class="layui-form-label">单位编码</label>
					<div class="layui-input-inline">
						<input type="text" name="Dc06"  id="Dc06" value="" class="layui-input" disabled="disabled">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">邮件帐号</label>
					<div class="layui-input-block">
						<input type="text" name="Dc08"  id="Dc08" value="" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
					</div>
				</div>		
		</form>	
</div>

<script>
	var DepartmentList=[];
	var Init_c01=parent.selectRowObj['data']['c01'];
	var Init_c02=parent.selectRowObj['data']['c02'];
	var Init_c03=parent.selectRowObj['data']['c03'];
	var Init_c04=parent.selectRowObj['data']['c04'];
	var Init_c05=parent.selectRowObj['data']['c05'];
	var Init_c06=parent.selectRowObj['data']['c06'];
	var Init_c07=parent.selectRowObj['data']['c07'];
	var Init_c08=parent.selectRowObj['data']['c08'];
		
    layui.use(['layer','form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

		//得到单位名称的列表
		$.ajax({
			url:'ZTBGetDepartmentList.php',
			type:'POST',
			async:false,
			success:function (JsonData) {
				DepartmentList=JsonData.data;
			}
		});
						
		//监听下拉列表的点击事件
		 form.on('select(Department)', function(data){
			 var selectDepartmentName = data.value; //选择的单位名称
			 //在数组中找到对应的编码
			for(var i=0;i<DepartmentList.length;i++){
				if(DepartmentList[i].c02==selectDepartmentName){
					document.getElementById('Dc06').value=DepartmentList[i].c01;
				}
			}			 
		 });
							
        //监听提交
        form.on('submit(saveBtn)', function (data) {
			var table = layui.table;
			//判断操作类型
			if(document.getElementById("op").value==='add'){				
						//检查数据
						var canContinue=true;
						var strFalse="";						

						$.ajax({//检查数据库ID是否存在
								url:'ZTBIsExist.php',
								data:{"where":"c01='"+document.getElementById("Dc01").value+"'"},
								type:'POST',
								datetype:'json',
								async:false,
								success:function (data) {
										if(data=='OK'){ 
												canContinue=false;
												strFalse="数据库ID已经存在！";
										}
								}
						});

						$.ajax({//检查姓名是否重复
							url:'ZTBIsExist.php',
							data:{"where":"c02='"+document.getElementById("Dc02").value+"'"},
							type:'POST',
							datetype:'json',
							async:false,
							success:function (data) {
								console.log(data);
								if(data=='OK'){ 
									canContinue=false;
									strFalse="用户姓名已经存在！";
								}
							}
						});

						if(canContinue){
								$.ajax({
									url:'ZTBUser.php',
									data:{"OP":"新增",
										  "C01":document.getElementById("Dc01").value,
										  "C02":document.getElementById("Dc02").value,
										  "C03":document.getElementById("Dc03").value,
										  "C04":$('#UserType input[name="Dc04"]:checked ').val(),
										  "C05":document.getElementById("Dc05").value,
										  "C06":document.getElementById("Dc06").value,
										  "C07":document.getElementById("Dc07").value,
										  "C08":document.getElementById("Dc08").value,
										  },
									type:'POST',
									async:true,
									success:function (JsonData) {
										if(JsonData['data']!='OK'){							
											layer.msg('插入记录失败！',{time:2000,icon:5});
										}else{
											// 关闭弹出层
											layer.close(index);
											var iframeIndex = parent.layer.getFrameIndex(window.name);
											parent.layer.close(iframeIndex);							
										}
									}
								});							 
						}else{
								layer.alert(strFalse);
						}
				
			}
			if(document.getElementById("op").value==='edit'){
						//判断数据是否更改
						var strUpdate='';
						if(document.getElementById("Dc02").value != Init_c02){
							strUpdate=" c02='"+document.getElementById("Dc02").value+"'";
						}

						if(document.getElementById("Dc03").value != Init_c03){
							if(strUpdate==''){
								strUpdate=" c03='"+document.getElementById("Dc03").value+"'";
							}else{
								strUpdate=strUpdate+" , c03='"+document.getElementById("Dc03").value+"'";
							}
						}
						
						var strUserType=$('#UserType input[name="Dc04"]:checked ').val();
						
						if(!strUserType != Init_c04){
							if(strUpdate==''){
								strUpdate=" c04='"+strUserType+"'";
							}else{
								strUpdate=strUpdate+" , c04='"+strUserType+"'";
							}
						}
						
						if(document.getElementById("Dc05").value != Init_c05){
							if(strUpdate==''){
								strUpdate=" c05='"+document.getElementById("Dc05").value+"'";
							}else{
								strUpdate=strUpdate+" , c05='"+document.getElementById("Dc05").value+"'";
							}
						}
						
						if(document.getElementById("Dc06").value != Init_c06){
							if(strUpdate==''){
								strUpdate=" c06='"+document.getElementById("Dc06").value+"'";
							}else{
								strUpdate=strUpdate+" , c06='"+document.getElementById("Dc06").value+"'";
							}
						}
									
						if(document.getElementById("Dc07").value != Init_c07){
							if(strUpdate==''){
								strUpdate=" c07='"+document.getElementById("Dc07").value+"'";
							}else{
								strUpdate=strUpdate+" , c07='"+document.getElementById("Dc07").value+"'";
							}
						}
												
						if(document.getElementById("Dc08").value != Init_c08){
							if(strUpdate==''){
								strUpdate=" c08='"+document.getElementById("Dc08").value+"'";
							}else{
								strUpdate=strUpdate+" , c08='"+document.getElementById("Dc08").value+"'";
							}
						}									
						console.log(strUpdate);
						if(strUpdate ='123'){
								//提交更改	
								$.ajax({
									url:'ZTBUser.php',
									data:{
										"strSet":strUpdate,
										"strWhere":"c01='"+document.getElementById("Dc01").value+"'"
									},
									type:'POST',
									datetype:'json',
									success:function (data) {
										window.parent.location.reload();
									}
								});
							
						}
						var iframeIndex = parent.layer.getFrameIndex(window.name);
						parent.layer.close(iframeIndex);				
			}
			
            return false;			
        });

    });
</script>

</body>
</html>

　　PHP部分：

<?php
require 'ZTBlinkConfig.php';
$strFalse="";
$continue=true;
$srcAddr="http://XX.XX.XX.XX";
$returnArr=[];//准备返回的数组

//获取访问IP
if (array_key_exists('HTTP_ORIGIN',$_SERVER)) {
	$origin = $_SERVER['HTTP_ORIGIN'];
}else if (array_key_exists('HTTP_REFERER',$_SERVER)) {
	$origin = $_SERVER['HTTP_REFERER'];
}else {
	$origin = $_SERVER['REMOTE_ADDR'];
}
if(substr($origin,0,15)!=substr($srcAddr,0,15)){
	$continue=false;
	$strFalse="拒绝访问".substr($origin,0,15)."!";
}
if(!$_SESSION['ZTBUser']){
	$continue=false;
	$strFalse="请登录!";	
}
if($continue){
		$OP=!empty($_POST['OP']) ? $_POST['OP'] : '';//得到操作类型
		switch($OP){
			case '列表':
					//获取具体的页数
					$page  = isset($_POST['page']) ? intval($_POST['page']) : 1;
					//获取每页的行数
					$limit = isset($_POST['limit']) ? intval($_POST['limit']) : 15;
					//计算偏移值
					$offset = ($page-1)*$limit;
					$sql1 = "select count(*) from htuser";
					$res = $ZTBConn->query($sql1);
					$rows = $res->fetch();
					$rowCount = $rows[0];
					$returnArr['code']=0;
					$returnArr['msg']="";
					$returnArr['count']=$rowCount;
					//提取要返回的值
					$sql2="SELECT TOP $limit * FROM htuser WHERE c01 NOT IN ( SELECT TOP $offset c01 FROM htuser ORDER BY c01 ) ORDER BY c01";
					$result=$ZTBConn->query($sql2);
					$rows=$result->fetchAll(PDO::FETCH_ASSOC);
					$returnArr['data']=$rows;	
				break;
			case '增加':
					//获取post的数据
					$C01 = $_POST['c01'];
					$C02 = $_POST['c02'];
					$C03 = $_POST['c03'];
					$C04 = $_POST['c04'];
					$C05 = $_POST['c05'];
					$C06 = $_POST['c06'];
					$C07 = $_POST['c07'];
					$C08 = $_POST['c08'];
					//准备插入数据
					$sql = "insert into htuser(c01,c02,c03,c04,c05,c06,c07,c08) values('$C01','$C02','$C03','$C04','$C05','$C06','$C07','$C08')";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];	
					if ( !$rowCount ) {
						$returnArr['data']="OK";	
					}else{
						$returnArr['data']="数据插入错误！";	
					}	
					break;
			case '修改':
					$Where=$_POST['strWhere'];
					$Set=$_POST['strSet'];
					//连接数据库
					$sql = "UPDATE htuser SET $Set WHERE $Where";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];	
					if ( $rowCount ) {
						$returnArr['data']='OK';
					}else{
						$returnArr['data']="数据修改错误！";
					}	
					break;
			case '删除':
					//获取post的数据
					$C01 = $_POST['C01'];
					//连接数据库
					$sql = "delete from htuser where c01='$C01'";
					$result =$ZTBConn->query($sql);
					$rows = $result->fetch();
					$rowCount = $rows[0];
					if ( $rowCount>0 ) {
						$returnArr['data']='OK';
					}else{
						$returnArr['data']="删除失败！";	
					}						
					break;
			default:
					$returnArr['data']="不支持的操作！";
					break;
		}
}else{
	$returnArr=$strFalse;
}
header('Content-type:text/json');
//返回JSON格式的数据
echo json_encode($returnArr,JSON_UNESCAPED_UNICODE);
?>
举报

相关推荐

【MySQL】数据处理之 增●删●改

sql数据库databasemysql数据

SQL语言的分类：DDL(数据库、表的增、删、改)、DML(数据的增、删、改)

sqloracle数据库

PHP操作MongoDB数据库详细例子介绍（增、删、改、查） （六）

PHP操作MongoDB数据库增删改查phpmongodb用户授权Html/CSS前端开发

Laravel 模型增、删、改操作

App批量更新PostgreSQLHarmonyOS后端开发

数据库的建立、增、删、改、查

学习数据库开发

mysql数据库的增、删、改、查

数据库创建数据库插入数据create运维指尖人生

shell处理mysql增、删、改、查

linuxmysqlshell交互式脚本MySQL数据库

Access 数据库Java执行增/删/改/查/操作

accesssqljava数据源

MySql的CRUD（增、删、改、查）操作

MySqlCRUDinsertdeleteupdate系统/运维

python操作mysql（增、删、改、查）

mysqlsql语句sql
0 条评论