LayUI⑸：数据的增、删、改操作页面（数据处理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的同步与异步，比如检查数据唯一性的时候就不能异步，必须检查完了才能下一步。

　　效果图：

 　　前端页面（列表）：

    
    用户信息〖编辑〗
    
    
    
    
    
		
    
        body { background-color: #ffffff; }
    


	

		
				
				

					数据库ID
					

						
						YQCY-HT-000，更改000，注意数字不能重复。
					
				
			
				

					用户类型
					

						
						
						
					
				
			
				

					用户名称
					

						
					
				
			
				

					密码
					

						
					
				

				

					岗位名称
					

						
					
		
				
			
				

					单位名称
					

						
							
						
					
					单位编码
					

						
					
				

				

					邮件帐号
					

						
					
				

				

					

						确认保存
					
				
		
			



	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

　　PHP文件可以写一个common.php，用于处理通用的功能。