使用一段时间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,用于处理通用的功能。
|