LayUI之CRUD

一、用户管理后台代码

二、用户新增

三、编辑和删除

一、用户管理后台代码

了解一下数据库中的用户表t_oa_user

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

结果：

写UserDao

package com.zking.dao;

import java.sql.SQLException;
import java.util.List;
import java.util.Map;

import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;

public  class UserDao extends BaseDao {
	
	
	public User login(User user) throws Exception {
		String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"' ";
//		return super.executeQuery(sql, clz, pageBean);
		//根据sql查询符合条件的用户，通常只会返回一条数据
		List users = super.executeQuery(sql, User.class,null);
		return users == null || users.size() == 0 ? null : users.get(0);
	}
	
//	查询用户信息及对应的角色 角色是通过case when得到的
	public List> list(User user,PageBean pageBean) throws Exception{
		String sql = "select * rn " + 
				", 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 ) roleName rn" + 
				"FROM t_oa_user where 1 = 1";
		String name = user.getName();
		if(com.zking.util.StringUtils.isNotBlank(name)) {
			sql += " and name like '%"+name+"%'";
		}
		//当实体类的属性完全包含数据库查询出来的列段的时候使用
//		super.executeQuery(sql, User.class, pageBean) 返回List>,对应的是联表查询，单个实体类对象，不完全包含查询的列段
		return super.executeQuery(sql, pageBean);
	}
	
	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"});
	}
	
	public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id=?";
		return super.executeUpdate(sql,user,new String[] {"id"});
	}
	
	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"});
	}
	
}

测试：

package com.zking.dao;

import static org.junit.Assert.*;

import java.util.List;
import java.util.Map;

import org.junit.Test;

import com.zking.entity.User;
import com.zking.util.PageBean;

public class UserDaoTest {
	
	private UserDao userDao = new UserDao();

	@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();
		}
	}

	@Test
	public void testAdd() {
		User user = new User();
		user.setName("111");
		user.setLoginName("aaa");
		user.setPwd("123456");
		try {
			userDao.add(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	@Test
	public void testDel() {
		User user = new User();
		user.setId(14L);
		try {
			userDao.del(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	@Test
	public void testEdit() {
		User user = new User();
		user.setName("abc");
		user.setPwd("666");
		user.setId(13L);
		try {
			userDao.edit(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

}

测试查询所有的方法

测试增加的方法，再从数据库中查询

测试修改

测试删除

再写UserAction

package com.zking.web;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.catalina.util.RequestUtil;

import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver{

	private User user = new User();
	
	private UserDao userDao = new UserDao();
	
	
//	写一个方法处理前台的请求
//	public String login(HttpServletRequest req, HttpServletResponse resp) {
//		Map map = new HashMap();
//		if("zhangsan".equals(user.getUsername()) && "123456".equals(user.getPassword())) {
			登录成功
//			map.put("code", 200);
//			map.put("msg", "成功");
//			
//		}
//		else {
			登录失败
//			map.put("code", 0);
//			map.put("msg", "账户或者密码错误");
//		}
//		try {
//			ResponseUtil.writeJson(resp, map);
//		} catch (Exception e) {
//			// TODO Auto-generated catch block
//			e.printStackTrace();
//		}
//		return null;
//	}
	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
			//通过账户名密码查到了用户记录
			if(u != null) {
//				登录成功
				//ResponseUtil.writeJson(resp, new R().data("code", 200).data("msg","成功"));
				ResponseUtil.writeJson(resp, R.ok(200, "成功"));
			}
			else {
//				登录失败
				//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","账户或密码错误"));
				ResponseUtil.writeJson(resp, R.error(0, "账户或密码错误"));
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
		return null;
	}
	
	//用户查询
	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) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}
	
	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) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}
	
	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) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}
	
	
	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) {
			// TODO: handle exception
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));
			} catch (Exception e2) {
				// TODO: handle exception
				e2.printStackTrace();
			}
		}
		return null;
	}
	
	
	
	
	@Override
	public User getModel() {
		return user;
	}

}

二、用户新增

userManage.jsp

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






 
用户管理


	
	
	  
	    用户名：

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(){
	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();
       },
    });
 }
从main.jsp运行点击用户管理再点击查询
 
 这时候的新增还没有生效
header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



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





用户新增




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



 点击新增
 可以看到已经成功了
三、编辑和删除 
 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
		 //点击编辑按钮的时候，当前
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//
	//取 user from中的值
	return form.val('user');
}
 
点击编辑 
 
  
 
 点击删除 
 
 可以看到用户编号为16的没有了



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


   上一篇  实操演练 | 使用 Navicat 对 MySQL 表进行分区
 
   下一篇  java华氏温度与摄氏温度的对照组，摄氏温度转华氏温度
  






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号