数据的增、删、改操作页面(数据处理PHP)
-
使用一段时间LayUI后,感觉LayUI并非开始接触的那样完美。
各种怪异的语法糖让人苦恼,但是可以理解和接受。
有时候觉得ASP和ASP.net挺好的,一个页面可以搞定数据的增、删、改、查,在LayUI中也可以,但如果页面中数据元素多的话代码段太长了,这让人很无奈。
一个程序完成,页面太多了,需要适当地精简一下。
对于一个数据表的记录增加、修改、删除、查询,两个文件可以完成所有的操作,一个前端页面和一个后台处理程序,前端页面上将列表和编辑页面合成在一起即可,但这样也有缺点,就是字段数多的时候,代码段会很长,看起来很不方便。
我的做法,前端分为两个:列表页面和编辑页面。
前端需要注意的问题:
1、如何判断是增加记录和修改记录?
通过设置op的值来判断。
2、子页面与父页面的参数传递
父页面一般在打开子页面成功后进行数据传递。关键在于获取子页面的引用
var iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象 let childBody = layer.getChildFrame('body', index);//找到它的子窗口的body
子页面访问父页面比较容易。如:if(parent.selectRowObj){//如果是增加操作就跳过 var Init_c01=parent.selectRowObj['data']['c01']; //...... }
3、提交前的数据检查。这一部分是公用的,但是检查数据唯一性是编辑部分要单独检查的。
4、代码的组织
很多人喜欢写下面的代码段:
if (obj.event === 'edit') { //...... }else if(obj.event === 'add'){ //...... }else if(obj.event === 'delete'){ //...... }else if(obj.event === 'search'){ //...... }else if(obj.event === '......'){ //...... }else if(obj.event === 'exit'){ //...... }
代码长了,缩进不明显的时候很容易搞混,我还是觉得下面的方式看得清楚:if (obj.event === 'edit') { //...... } if(obj.event === 'add'){ //...... } if(obj.event === 'delete'){ //...... } if(obj.event === 'search'){ //...... } if(obj.event === '......'){ //...... } if(obj.event === 'exit'){ //...... }
5、数据的删除一般情况下,重要的数据记录都不使用批量删除。
如果不使用批量删除,那么就需要将表格选择列置为单选,即radio。
后端需要注意的问题:
1、防止不经过系统直接访问,即通过地址栏直接访问。
2、就是防止非法访问,比如随意设置参数后的访问。
3、防止数据伪造,主要在SQL语句上,这个目前也比较好解决了,就是使用预处理语句。
前、后端的数据传递使用JSON格式,注意AJAX的同步与异步,比如检查数据唯一性的时候就不能异步,必须检查完了才能下一步。
效果图:
前端页面(列表):
<!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=[]; if(parent.selectRowObj){ 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; var layer = layui.layer; var $ = 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=""; var sTemp=null; sTemp=document.getElementById("Dc01").value; if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){ canContinue=false; strFalse="数据库ID不能为空!"; } sTemp=document.getElementById("Dc02").value; if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){ canContinue=false; strFalse="用户名称不能为空!"; } if(canContinue){ $.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>
前端部分(编辑):<!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=[]; if(parent.selectRowObj){ 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; var layer = layui.layer; var $ = 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=""; var sTemp=null; sTemp=document.getElementById("Dc01").value; if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){ canContinue=false; strFalse="数据库ID不能为空!"; } sTemp=document.getElementById("Dc02").value; if( trim(sTemp)=='' || sTemp==null || sTemp==undefined){ canContinue=false; strFalse="用户名称不能为空!"; } if(canContinue){ $.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); ?>
PHP文件可以写一个common.php,用于处理通用的功能。
————————————————
版权声明:本文为CSDN博主「dawn」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/dawn0718/article/details/123828443
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配,妙~啊~
· .NET Core 中如何实现缓存的预热?