layui，用layui+ajax完成crud

Love The Way You Lie 2022-03-16 06:44 900阅读 0赞

## 1.layui学习 ##

layui是前端框架，用来做前端界面，在项目中集成layui的步骤：  
1）解压layui-v2.2.5.zip  
2).在web项目WebRoot下创建layui文件夹，把css,lay两个文件夹及layui.js文件拷贝到layui文件夹中即可。如下所示:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]  
然后在要使用弹出层的页面上引入layui.css和layui.js文件

<link type="text/css"  rel="stylesheet"  href="layui/css/layui.css">
    	  <script type="text/javascript" src="layui/layui.js"></script>

**1.1各种层类型**  
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。  
以后用得最多的是信息层(type=0)和iframe层(type=2)

layui.use('layer', function(){
    					   
    					    layer.open({
    					    title:['百度首页','font-size:18px;color:red'],  //标题
    						  type : 2,  //iframe层
    						  content : 'http://www.baidu.com', //content只能
    						  是资源的url，即请求路径，不能是普通字符串
    						  area: ['800px', '400px'], //设置宽800px，高400px
    						  maxmin: true,   //显示最大化最小化按钮
    						  anim: 2    //从最底部往上滑入
    						//  time:5000    //5秒后自动关闭
    					   });
    					 });

**1.2带图标的层**  
针对type为0的信息层，type为3的加载层，以及layer.alert()的信息层有效  
如果是信息层，则icon的值可传入0-6  
0：  
![在这里插入图片描述][20190226210351595.png]  
1：对勾图标  
![在这里插入图片描述][20190226210405136.png]  
2：错误图标  
![在这里插入图片描述][20190226210438121.png]  
3：询问图标  
![在这里插入图片描述][20190226210443437.png]  
通过icon属性类配置层的图标

layui.use('layer',function(){
    			 //layer.alert():也是弹出信息层，相当于layer.open({type:0})
    			 layer.alert('今天天气好',{icon:5}); 
    		 })

或者

layer.open({
    				  type:0,
    				  content:'我是普通信息层',
    				  icon:2
    			 });

**1.3带按钮的层**  
通过btn属性来指定层上面的多个按钮

layer.confirm('是否确定删除？',{
    					  btn:['确定','取消'],
    					  btnAlign:'c', //按钮居中对齐
    					  shade:[0.5,'green'],  //遮罩效果，0.5是不透明度，范围
    					  [0,1], 参数2是背景颜色
    					  yes:function(index,layero){
    						   //按钮1，即确定按钮的回调函数
    						   console.log('确定,索引:'+index); 
    					  },
    					  resize:false,   //不允许拉伸层，即不能改变层的大小
    					  btn2:function(index, layero){
    						    //按钮【取消】的回调
    						    console.log('取消，索引：'+index)
    						    //return false //开启该代码可禁止点击该按钮关闭
    					}
    				})

**1.4 日期时间选择器**  
基本应用

<form  action="#"  method="post">
    	 生产日期：<input type="text" name="ldate"  id="sdate" > <br>
    	 <input type="submit" value="提交">
    	</form>
       <script type="text/javascript">
          layui.use('laydate',function(){
         
        	  //实例化laydate组件
              var laydate=layui.laydate; //不能省略这句
        	  laydate.render({
         
        		  elem:'#sdate'  //指定元素，和laydate绑定起来，用ID选择器将要绑
        		  定的元素选出来
        	  })
          })
       </script>

## 2.layui+ajax完成crud ##

改造之前的后台项目，实现下面的几个需求  
**2.1 在弹出层上加载商品添加页面**  
修改商品列表页面上的”添加”超链接，点击后在iframe层里加载添加页面

<a class="button border-main icon-plus-square-o"
    					href="javascript:void(0)"  onclick="toAdd()">
    						添加商品</a>
     //点击“添加商品”后,打开iframe层去加载添加页面
    	function toAdd(){
    		  //使用layer.open方法打开一个弹出层--iframe层
    			   layui.use('layer',function(){
    				   layer.open({
    					   type: 2, 
    					   title:['添加商品','font-size:16px;color:red'],
    					   content: '${ctx}/goods.action?method=toAdd', 
    					   //iframe层,content必须是资源的url，不是普通String
    					   area:['700px','450px'],
    					   //closeBtn:2,     //设置关闭按钮为圆角按钮
    					   //time:3000,   //3秒后自动关闭
    					   anim:2,  //弹出动画，从最底部往上滑入
    					   maxmin:true  //显示最大最小化按钮
    					 });
    			   });
    	}

**2.2 在添加页面上异步提交表单**  
1)将添加页面上的提交按钮类型改成button，变成普通按钮，是为了用异步提交

<button class="button bg-main icon-check-square-o" type="button" 
    onclick="addGoods()">
    							提交</button>
    同时将表单的action和method删掉
    <form class="form-x" id="addForm" enctype="multipart/form-data">

2).给按钮添加事件，调用addGoods()函数，发送异步请求

//异步提交表单的函数
    	function addGoods() {
    		//$('#addForm').serialize():只能将普通元素提交的数据转换为查询字符串
    		key=value&key2=valu2...
    		// console.log($('#addForm').serialize());//查询字符串
    		key=value&key2=value
    		//获取到表单中所有的参数数据(普通参数+文件域参数)
    		var formData = new FormData($('#addForm')[0]);
    		//发送异步请求
    		$.ajax({
    			url : '${ctx}/goods.action?method=add',
    			type : 'POST',
    			//表单中有文件域时，要做文件上传时，必须指定contentType: false,让
    			jQuery能够支持 enctype="multipart/form-data"
    			contentType : false,
    			//表单中有文件域时，要将processData设为false，表示不要将文件域中的
    			文件数据转换为字符串
    			processData : false,
    			//指定要发给服务器的参数,
    			data : formData,
    			dataType : 'text',
    			success : function(data) {
    				//console.log(data+',type:'+typeof data);
    			//js会隐式调用Boolean()将'true'转换为true
    			if(data){
    					//关闭弹出层,当前iframe层所在窗口是列表页面窗口的子窗口
    					var index = parent.layer.getFrameIndex(window.name); 
    					//先得到当前iframe层的索引
    					parent.layer.close(index);
    				}						
    			},
    			complete:function(xhr,textStatus){
    				    //重新请求列表页面
    				    parent.location.href='${ctx}/goods.action?
    				    method=queryByPage';
    				    
    			}
    		})
    	}

**注意：如果表单中有文件域，则必须有下面的设置**  
1)var formData = new FormData($(’\#addForm’)\[0\]);获取表单中所有参数数据(普通参数+文件域)

2)$.ajax()方法中加上下面2个属性

//表单中有文件域时，要做文件上传时，必须指定contentType: false,让jQuery能够支
    持 enctype="multipart/form-data"	
    contentType : false,
    	//表单中有文件域时，要将processData设为false，表示不要将文件域中的文件数据
    	转换为字符串
    	processData : false,

3).改造GoodsServlet的add方法，给客户端写回一个true/false

// 3.调用Service的方法，传入商品对象
    		GoodsService service = new GoodsServiceImpl();
    		boolean flag = service.addGoods(goods);
    		PrintWriter out=response.getWriter();
    		out.print(flag);
    		out.flush();
    		out.close();

**2.3 在弹出层上加载修改商品页面**

1.  修改商品列表页面上的”修改”超链接，点击后在iframe层里加载修改页面

<a class="button border-main"
    								href="javascript:void(0)"  
    								onclick="toUpdate(${gd.goods_id })"><span
    								class="icon-edit"></span> 修改</a>
    
     //点击“修改”后，打开iframe层加载修改页面
    	 function toUpdate(goodsid){
    		  //使用layer.open方法打开一个弹出层--iframe层
    		   layui.use('layer',function(){
    			   layer.open({
    				   type: 2, 
    				   title:['修改商品','font-size:16px;color:red'],
    				   content: '${ctx}/goods.action?
    				   method=toUpdate&goodsId='+goodsid, //iframe层,content必
    				   须是资源的url，不是普通String
    				   area:['700px','450px'],
    				   //closeBtn:2,     //设置关闭按钮为圆角按钮
    				   //time:3000,   //3秒后自动关闭
    				   anim:2,  //弹出动画，从最底部往上滑入
    				   maxmin:true  //显示最大最小化按钮
    				 });
    		   });
    	 }

**2.4 在修改页面上异步提交表单**  
1)把update.jsp页面上的表单的action,method删除，按钮改成普通按钮

2）.给按钮添加事件，调用updateGoods()函数，发送异步请求

//异步提交表单的函数
    function updateGoods() {
    	//获取到表单中所有的参数数据，没有文件域
    	var formData=$('#updateForm').serialize();
    	//发送异步请求
    	$.ajax({
    		url : '${ctx}/goods.action?method=update',
    		type : 'POST',
    		//指定要发给服务器的参数,
    		data : formData,
    		dataType : 'text',
    		success : function(data) {
    			//console.log(data+',type:'+typeof data);
    			//js会隐式调用Boolean()将'true'转换为true
    			if(data){
    				//关闭弹出层,当前iframe层所在窗口是列表页面窗口的子窗口
    				var index = parent.layer.getFrameIndex(window.name); //先
    				得到当前iframe层的索引
    				parent.layer.close(index);
    			}			
    			
    		},
    		complete:function(xhr,textStatus){
    			    //重新请求列表页面
    			    parent.location.href='${ctx}/goods.action?method=queryByPage';
    			    
    		}
    	})
    }

3）.改造GoodsServlet的update方法，给客户端写回一个true/false

// 调用service的修改商品方法
    		GoodsService service = new GoodsServiceImpl();
    		boolean flag = service.updateGoods(gd);
    		PrintWriter out = response.getWriter();
    		out.print(flag);
    		out.flush();
    		out.close();

总结：获取表单中参数数据的两种方法  
1.var formData=KaTeX parse error: Expected 'EOF', got '&' at position 49: …为查询字符串key=value&̲key2=valu2...，不…(表单对象)\[0\]) :获取到表单中所有的参数数据(普通参数+文件域参数)

**2.5 在商品列表页面上弹出“删除”信息层**  
1)修改”删除”超链接

<a class="button border-red" href="javascript:void(0)"  
    onclick="deleteGoods(${gd.goods_id })"><span
    							class="icon-trash-o"></span>删除</a>	
    
     //点击"删除"后，打开信息层
    	 function  deleteGoods(goodsId){
    		 layui.use('layer',function(){
    				layer.confirm('是否确定删除？',{
    					  btn:['确定','取消'],
    					  btnAlign:'c', //按钮居中对齐
    					  shade:[0.5,'green'],  //遮罩效果，0.5是不透明度，范围
    					  [0,1], 参数2是背景颜色
    					  yes:function(index,layero){
    						   //按钮1，即确定按钮的回调函数
    						 //  console.log('确定,索引:'+index); 
    						   //发送异步请求
    						   $.ajax({
    							   url : '${ctx}/goods.action?method=delete',
    								type : 'POST',
    								//指定要发给服务器的参数,
    								data : "goodsId="+goodsId,
    								dataType : 'text',
    								success : function(data) {
    									//console.log(data+',type:'+typeof 
    									data);
    									//js会隐式调用Boolean()将'true'转换为
    									true
    									if(data){
    										//关闭弹出层,信息层就是当前窗口的层，
    										直接关闭
    										layer.close(index);
    									}			
    									
    								},
    								complete:function(xhr,textStatus){
    									    //重新请求列表页面
    									    
    									    location.href='${ctx}/goods.action?
    									    method=queryByPage';
    									    
    								}  
    						   });
    					  },
    					  resize:false,   //不允许拉伸层，即不能改变层的大小
    					  btn2:function(index, layero){
    						    //按钮【取消】的回调
    						    console.log('取消，索引：'+index)
    						    //return false //开启该代码可禁止点击该按钮关闭
    					}
    				});
    		 });
    	 }

2）在GoodsServlet中加一个delete方法处理删除请求，给客户端写回true/false

// 删除商品
    	public void delete(HttpServletRequest request, HttpServletResponse 
    	response)
    			throws ServletException, IOException {
        
    		int goods_id = Integer.parseInt(request.getParameter("goodsId"));
    		// 调用service的删除商品方法
    		GoodsService service = new GoodsServiceImpl();
    		boolean flag = service.deleteGoods(goods_id);
    		PrintWriter out = response.getWriter();
    		out.print(flag);
    		out.flush();
    		out.close();
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0MDEzNzkw_size_16_color_FFFFFF_t_70]: /images/20220316/8b53cdddf418467b8fbe541850c9b5ea.png
[20190226210351595.png]: /images/20220316/a77cd8bcf08d40fcbe038c99cfedc7d5.png
[20190226210405136.png]: /images/20220316/84fb1831b58c400387efacbcb59e2810.png
[20190226210438121.png]: /images/20220316/98f1ed60212343c6a64b3ab0cad43617.png
[20190226210443437.png]: /images/20220316/19fc4a14ac2d4b60b31cfba9f523756b.png