LayUi之用户(URUD)

1.查询

主界面：main.jsp

查询 dao方法

action代码

js代码:

2.增加

增加的dao方法：

增加action代码：

js代码：

3修改

修改的dao方法：

修改action代码：

js代码：

4.删除

删除的dao方法：

删除action代码：

js代码：

5.完整代码

userManage.jsp

userManage.js

userEdit.js

userEdit.jsp

1.查询

主界面：main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>    




Insert title here



  
    layout demo
    
    
      
      
        
      
      
      nav 1
      nav 2
      nav 3
      
        nav groups
        
          menu 11
          menu 22
          menu 33
        
      
    
    
    
      
        
          
          tester
        
        
          Your Profile
          Settings
          Sign out
        
      
      
        
          
        
      
    
  
  
  
  
  
    
	
	  
	    首页
	  
	  
	    1
	  
	 
	
  
  
    
            底部固定区域

界面修改展示：点用户管理会展示用户名，文本框，查询按钮以及新增按钮

查询 dao方法

查询数据库中的数据

sql语句：

select *
,(case rid
when 1 then '管理员'
when 2 then '发起者'
when 3 then '审批者'
when 4 then '参与者'
when 5 then '会议室管理员'
else '其他'end
)roleName

from t_oa_user

dao方法：

查询的dao源代码：

//查询用户信息及对应的角色，角色是通过case when得来的
	public List> list(User user,PageBean pageBean) throws Exception{
		String sql ="select * rn" + 
				",(case rid rn" + 
				"when 1 then '管理员' rn" + 
				"when 2 then '发起者' rn" + 
				"when 3 then '审批者' rn" + 
				"when 4 then '参与者' rn" + 
				"when 5 then '会议室管理员' rn" + 
				"else '其他'end rn" + 
				")roleNamern" + 
				"rn" + 
				"from t_oa_user where 1=1 ";
		String name = user.getName();
		if(StringUtils.isNotBlank(name)) {
			sql+="and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, pageBean);
	}

查询到方法测试类：

查询测试代码：

	@Test
	public void testList() {
		User user = new User();
		PageBean pageBean = new PageBean();
		try {
			List> list = userDao.list(user, pageBean);
		for(Map map:list) {
			System.out.println(map);
		}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

运行结果展示：

所运行出来的数据就是数据库里面所存储的数据，如果有表示查询方法没有问题

action代码

	//用户查询
	public String list(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List> users = userdao.list(user, pageBean);
			//注意：layui中的数据的格式
			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),users));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据查询失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码:

//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
}

//2.点击查询
function query(){
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}

上面都完成了就可以进行模糊查询了

2.增加

增加的dao方法：

//增加
	
	public int add(User user) throws Exception{
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
	}

增加dao方法测试：

运行结果显示1，就可以去数据库查看是否增加了冰冰

增加成功，数据库也查询到冰冰，说明增加的dao 方法没有问题

增加action代码：

	//用户增加
	public String add(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.add(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	}

js代码：

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
	
	//绑定新增按钮的点击事件
	$('#btn_add').click(function(){
		row=null;
		open('新增');
	});
});
 
 
//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
	
	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});
	
}
//2.点击查询
function query(){
//	console.log($("#ctx").val());
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}
 
 
//3.对话框
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭','批量新增'],
       yes: function(index, layero){
    	   //jquery.find
    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       },
       btn3: function(index, layero){
    	   layer.msg("批量新增");
    	   return false;
       },
       btn4: function(index, layero){
    	   layer.closeAll("批量新增碎冰冰");
       }
    });
 }界面运行效果展示：点击新增按钮会弹出一个模态框
  
3修改 
        修改的dao方法： 
//修改
	public int edit(User user) throws Exception{
		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	} 
修改dao测试类： 
 
 
 修改成功 
 
 修改action代码： 
	//用户修改
	public String edit(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.edit(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据修改成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据修改失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	} 
js代码： 
let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
		 //table的数据在父页面userManager.js
		 //点击编辑按钮的时候，当前
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//
	//取 user from中的值
	return form.val('user');
} 
4.删除 
删除的dao方法： 
//删除
	public int del(User user) throws Exception{
		String sql = "delete from t_oa_user where id=?";
		return super.executeUpdate(sql, user, new String[] {"id"});
	} 
删除的dao方法测试： 
 
 
运行结果为1，去数据库查询 
  
 
删除成功，没有冰冰怕热这个用户了，什么我们的删除的dao方法没有问题  
  
删除action代码： 
	//用户删除
	public String del(HttpServletRequest req,HttpServletResponse resp) {
		
		try {
			//影响行数
			int rs = userdao.del(user);
			if(rs>0) {
				ResponseUtil.writeJson(resp, R.ok(200, "用户数据删除成功"));
			}
			else {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp,R.error(0, "用户数据删除失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
 
		}
			return null;
	
	} 
js代码： 
	//在页面中的
 
 
 
 
中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});界面效果：
 5.完整代码 
userManage.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/common/header.jsp" %>






Insert title here

  


	
	  
	    用户名：

userManage.js

let layer,$,table;
var row;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
	
	//绑定新增按钮的点击事件
	$('#btn_add').click(function(){
		row=null;
		open('新增');
	});
});
 
 
//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器（推荐id选择器）
        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条（默认 true）
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
	
	//在页面中的中必须配置lay-filter="tb_goods"属性才能触发属性!!!
	table.on('tool(tb)', function (obj) {
		row = obj.data;
		if (obj.event == "edit") {
			open("编辑");
		}else if(obj.event == "del"){
			layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
			  $.post($("#ctx").val()+'/user.action',{
				  'methodName':'del',
				  'id':row.id
			  },function(rs){
				  if(rs.success){
	        		   //调用查询方法刷新数据
	        		   query();
	        	   }else{
	        		   layer.msg(rs.msg,function(){});
	        	   }
			  },'json');
			  layer.close(index);
			});
		}else{
 
		}
	});
	
}
//2.点击查询
function query(){
//	console.log($("#ctx").val());
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式，GET或者POST
        loading: true,                     //是否显示加载条（默认 true）
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数，任意设
        	'methodName':'list',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称，默认：page
            limitName: 'rows' //每页数据量的参数名，默认：limit
        }
   });
}
 
 
//3.对话框
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭','批量新增'],
       yes: function(index, layero){
    	   //jquery.find
    	   //调用子页面中提供的getData方法，快速获取子页面的form表单数据
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       },
       btn3: function(index, layero){
    	   layer.msg("批量新增");
    	   return false;
       },
       btn4: function(index, layero){
    	   layer.closeAll("批量新增碎冰冰");
       }
    });
 }userEdit.js 
let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
		 //table的数据在父页面userManager.js
		 //点击编辑按钮的时候，当前行赋值给子界面userEdit.jsp
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//
	//取 user from中的值
	return form.val('user');
} 
userEdit.jsp 
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>





用户新增




    
        
        
            用户名称
            
                
            
        
        
            用户角色
            
                
            
        
        
            登录账号
            
                
            
        
        
            登录密码
            
                
            
        
    


 




转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/1024930.html


   上一篇  0720作业
 
   下一篇  go语言-Channel(信道)
  






Java相关栏目本月热门文章

  1【Linux驱动开发】设备树详解（二）设备树语法详解
  2别跟客户扯细节
  3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  5【分页】常见两种SpringBoot项目中分页技巧
  6一文带你搞懂OAuth2.0
  7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  9JavaSE - 封装、static成员和内部类
  10树莓派mjpg-streamer实现监控及拍照功能调试
  11用c++写一个蓝屏代码
  12从JDK8源码中看ArrayList和LinkedList的区别
  13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  14在openwrt使用C语言增加ubus接口（包含C uci操作）
  15Spring 解决循环依赖
  16SpringMVC——基于MVC架构的Spring框架
  17Andy‘s First Dictionary C++ STL set应用
  18动态内存管理
  19我的创作纪念日
  20Docker自定义镜像-Dockerfile







热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名







学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 






关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号

LayUi之用户(URUD)

1.查询

2.增加

3修改

修改的dao方法： //修改 public int edit(User user) throws Exception{ String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?"; return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"}); } 修改dao测试类： 修改成功

4.删除

5.完整代码

userManage.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/header.jsp" %> Insert title here 用户名： 查询 新增

Java相关栏目本月热门文章

修改的dao方法：
//修改 public int edit(User user) throws Exception{ String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?"; return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"}); }

修改dao测试类：

修改成功

userManage.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/common/header.jsp" %> Insert title here 用户名：