LayUI增删改查

Myth丶恋晨 2023-10-13 17:33 18阅读 0赞

**目录**

1.为什么软件需要增删改查？

2.CRUD

3.CRUD的作用

4.LayUI实现增删改查

后台编写

前台页面

--------------------

## 1.为什么软件需要增删改查？ ##

增删改查（**CRUD**）是软件开发中常见的操作，它们是对数据进行操作的基本操作。以下是几个原因说明为什么软件需要进行增删改查：

> 1. **数据管理**：软件通常需要存储和处理大量的数据。通过增删改查操作，可以有效地对数据进行管理和维护。添加（增加）数据使得系统能够接收新的信息，删除数据可使系统清理不必要或过期的数据，修改数据使系统能够更新或纠正错误的信息，查询数据则用于检索和获取所需的信息。
> 
> 2. **用户交互**：软件通常需要与用户进行交互，以便用户能够对数据进行操作和查看。通过增删改查操作，用户可以在界面上执行相应的操作，如添加新的记录、删除现有记录、修改记录的值，以及根据特定的条件查询数据。
> 
> 3. **数据完整性和一致性**：增删改查操作有助于维护数据的完整性和一致性。添加数据时，可以执行相应的验证和校验操作，以确保数据的准确性和一致性。删除数据时，可以处理相关的约束和关联关系，以避免数据的不一致。修改数据时，可以执行必要的更新和校验操作，以确保数据的有效性和一致性。
> 
> 4. **系统功能扩展**：增删改查操作可以作为系统功能扩展的基础。通过增删改查操作的灵活组合，可以实现各种高级功能，如数据筛选、排序、分组、聚合等。此外，增删改查操作也为其他高级功能，如导入导出、备份恢复、版本控制等提供了基础。

总之，增删改查是软件中常见的操作，它们对于数据管理、用户交互、数据完整性和一致性以及系统功能扩展都起着重要的作用。通过这些操作，软件能够高效地处理和管理数据，提供丰富的功能和良好的用户体验。

## **2.CRUD** ##

CRUD是一个常用的软件开发术语，它是指四种基本的数据操作：创建(Create)、读取(Read)、更新(Update)和删除(Delete)。这些操作对应了对存储在数据库或其他数据存储系统中的数据进行添加、获取、修改和删除的功能。

具体解释如下：

> 1. **创建（Create）**：指向数据库或其他数据存储系统添加新的记录或对象。通过创建操作，可以在数据存储中插入新的数据，每个新记录通常有一个唯一的标识符。
> 
> 2. **读取（Read）**：指从数据库或其他数据存储系统中检索或获取现有记录或对象。通过读取操作，可以按照需要获取特定的数据记录或对象，并在应用程序中使用这些数据。
> 
> 3. **更新（Update）**：指对数据库或其他数据存储系统中的现有记录或对象进行修改。通过更新操作，可以更改数据存储中现有记录或对象的属性或值，从而实现数据的更新和修正。
> 
> 4. 删除（Delete）：指从数据库或其他数据存储系统中移除现有的记录或对象。通过删除操作，可以从数据存储中永久删除某个特定的记录或对象，使其不再可用。

CRUD操作是软件开发中常见的数据处理操作，它们是对数据进行基本操作的核心功能。通过组合和使用这些操作，开发人员可以实现各种复杂的数据管理和处理功能，包括数据输入、输出、修改和删除等。

## 3.CRUD的作用 ##

CRUD操作在软件开发中具有重要的作用，以下是它们的主要作用：

> 1. **数据管理**：CRUD操作允许开发人员对数据进行全面的管理。通过创建操作，可以向数据库或其他数据存储系统添加新的记录或对象。读取操作使开发人员能够检索或获取现有的记录或对象。更新操作允许对现有的记录或对象进行修改。删除操作允许从数据存储中移除记录或对象。
> 
> 2. **用户交互**：CRUD操作提供了一种与用户进行交互的方式。用户可以通过执行这些操作来添加、查看、更新和删除数据。例如，用户可以使用创建操作添加新的内容，使用读取操作获取所需的信息，使用更新操作修改数据，使用删除操作删除不需要的数据。
> 
> 3. **数据完整性和一致性**：CRUD操作有助于维护数据的完整性和一致性。在创建操作中，可以进行数据验证和约束以确保数据的准确性。在更新操作中，可以执行必要的校验和约束操作，以防止数据的不一致。删除操作可以处理相关的约束和关联关系，避免数据的错误删除。
> 
> 4. **系统功能扩展**：CRUD操作是许多系统功能的基础。通过组合和使用这些操作，开发人员可以实现各种高级功能。例如，数据筛选、排序、分组和聚合可以通过读取操作的灵活组合实现。导入导出、备份恢复等其他功能也可以基于CRUD操作的基础构建。
> 
> 5. **数据安全性**：CRUD操作对于数据安全性至关重要。通过限制和验证用户对数据的访问权限，可以保护敏感数据的安全性。开发人员可以通过实施访问控制和数据验证来确保只有授权用户可以执行CRUD操作。

总的来说，CRUD操作在软件开发中扮演着重要角色，它们可以用于数据管理、用户交互、数据完整性和一致性维护、系统功能扩展以及数据安全性保护。通过合理使用和组合这些操作，可以构建出强大、灵活和安全的软件系统。

## 4.LayUI实现增删改查 ##

### 后台编写 ###

**编写UserDao类增删改查方法**

/**
    	 * 带模糊查询方法
    	 * @param user
    	 * @param pageBean
    	 * @return
    	 * @throws Exception
    	 */
    	public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
    		String sql = "SELECT\r\n" + 
    				"	u.*,\r\n" + 
    				"	(\r\n" + 
    				"CASE\r\n" + 
    				"	WHEN u.rid = '1' THEN\r\n" + 
    				"	'管理员' \r\n" + 
    				"	WHEN u.rid = '2' THEN\r\n" + 
    				"	'发起者' \r\n" + 
    				"	WHEN u.rid = '3' THEN\r\n" + 
    				"	'审批员' \r\n" + 
    				"	WHEN u.rid = '4' THEN\r\n" + 
    				"	'参与者' \r\n" + 
    				"	WHEN u.rid = '5' THEN\r\n" + 
    				"	'会议管理员' ELSE '其他' \r\n" + 
    				"END \r\n" + 
    				"	) rname \r\n" + 
    				"FROM\r\n" + 
    				"	`t_oa_user` u where 1=1";
    		String name = user.getName();
    		if (StringUtils.isNotBlank(name))
    			sql += " and name like '%" + name + "%'";
    		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 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"});
    	}
    	
    	public int del(User user) throws Exception {
    		String sql = "delete from t_oa_user where id = ?";
    		return super.executeUpdate(sql, user, new String[] {"id"});
    	}

**BaseDao数据库查询方法**

/**
    	 * 适合多表联查的数据返回
    	 * 
    	 * @param sql
    	 * @param pageBean
    	 * @return
    	 * @throws SQLException
    	 * @throws InstantiationException
    	 * @throws IllegalAccessException
    	 */
    	public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) throws Exception {
     
    		List<Map<String, Object>> list = new ArrayList<>();
    		Connection con = DBAccess.getConnection();
    		PreparedStatement pst = null;
    		ResultSet rs = null;
     
    		if (pageBean != null && pageBean.isPagination()) {
    			// 必须分页（列表需求）
    			String countSQL = getCountSQL(sql);
    			pst = con.prepareStatement(countSQL);
    			rs = pst.executeQuery();
    			if (rs.next()) {
    				pageBean.setTotal(String.valueOf(rs.getObject(1)));
    			}
     
    			// -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
    			// -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
    			// -- countSql=select count(1) from (sql) t 符合条件的总记录数
    			String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
    			pst = con.prepareStatement(pageSQL);
    			rs = pst.executeQuery();
    		} else {
    			// 不分页（select需求）
    			pst = con.prepareStatement(sql);// 符合条件的所有数据
    			rs = pst.executeQuery();
    		}
     
    		// 获取源数据
    		ResultSetMetaData md = rs.getMetaData();
    		int count = md.getColumnCount();
    		Map<String, Object> map = null;
    		while (rs.next()) {
    			map = new HashMap<>();
    			for (int i = 1; i <= count; i++) {
    				map.put(md.getColumnLabel(i), rs.getObject(i));
    			}
    			list.add(map);
    		}
    		return list;
     
    	}

**UserAction**

package com.liao.layui;
     
    import java.util.List;
    import java.util.Map;
     
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    import com.liao.dao.UserDao;
    import com.liao.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<User> {
    	User u = new User();
    	UserDao dao = new UserDao();
     
    	public String userRole(HttpServletRequest req, HttpServletResponse resp) {
    		try {
    			PageBean pageBean = new PageBean();
    			pageBean.setRequest(req);
    			List<Map<String, Object>> users = dao.userRole(u, pageBean);
    			// layui 的code 返回一定要是 0，不能是200，否者返回不了数据
    			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;
    	}
     
    	public String add(HttpServletRequest req, HttpServletResponse resp) {
    		try {
    			int rs = dao.add(u);
    			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;
    	}
     
    	public String edit(HttpServletRequest req, HttpServletResponse resp) {
    		try {
    			int rs = dao.edit(u);
    			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;
    	}
     
    	public String del(HttpServletRequest req, HttpServletResponse resp) {
    		try {
    			int rs = dao.del(u);
    			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;
    	}
     
    	@Override
    	public User getModel() {
    		// TODO Auto-generated method stub
    		return u;
    	}
     
    }

**R工具类**

package com.zking.util;
     
    import java.util.HashMap;
     
    /**
     * R工具类
     *
     */
    public class R extends HashMap{
    	public R data(String key, Object value) {
    		this.put(key, value);
    		return this;
    	}
    	
    	public static R ok(int code, String msg) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg);
    		return r;
    	}
    	
    	public static R error(int code, String msg) {
    		R r = new R();
    		r.data("success", false).data("code", code).data("msg", msg);
    		return r;
    	}
    	
    	public static R ok(int code, String msg,Object data) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    		return r;
    	}
    	
    	public static R ok(int code, String msg, long count, Object data) {
    		R r = new R();
    		r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    		return r;
    	}
    }

### 前台页面 ###

**UserManage.jsp**

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
        <%@ include file="/common/header.jsp" %>
    <!DOCTYPE html >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
     <script type="text/javascript" src="static/js/UserManage.js"></script> 
    <title>Insert title here</title>
    </head>
    <body>
     
    	<div class="layui-form-item" style="padding-top: 20px">
    	  <div class="layui-inline">
    	    <label class="layui-form-label" style="padding: 0;padding-top: 10px">用户名：</label>
    	    <div class="layui-input-inline">
    	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    	    </div>
    	  </div>
    	  
    	  <div class="layui-inline">
    	    <div class="layui-input-inline">
    	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
    	      	<i class="layui-icon layui-icon-search"></i>
    	      	查询
    	      </button>
    	      <button id="btn_add" type="button" class="layui-btn">新增</button>
    	    </div>
    	  </div>
    	  
    	</div>
     
    <table id="tb" class="layui-hide"  lay-filter="test"></table>
     
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
      </div>
    </script>
     
    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
                  
     
    </body>
    </html>

**UserManage.jsp**

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',
    		url : 'user.action?methodName=userRole',
    		toolbar : '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    		,
    		defaultToolbar : [ 'filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    			title : '提示',
    			layEvent : 'LAYTABLE_TIPS',
    			icon : 'layui-icon-tips'
    		} ],
    		title : '用户数据表',
    		cols : [ [ {
    			type : 'checkbox',
    			fixed : 'left'
    		}, {
    			field : 'id',
    			title : 'ID',
    			width : 80,
    			fixed : 'left',
    			unresize : true,
    			sort : true
    		}, {
    			field : 'loginName',
    			title : '账户名',
    			width : 120,
    			edit : 'text'
    		}, {
    			field : 'name',
    			title : '用户名',
    			width : 150,
    			edit : 'text',
    			templet : function(res) {
    				return '<em>' + res.name + '</em>'
    			}
    		}, {
    			field : 'pwd',
    			title : '密码',
    			width : 80,
    			edit : 'text',
    			sort : true
    		}, {
    			field : 'rname',
    			title : '角色名称',
    			width : 100
    		}, {
    			fixed : 'right',
    			title : '操作',
    			toolbar : '#barDemo',
    			width : 150
    		} ] ],
    		page : true
    	});
     
    	// 表格监控
    	table.on('tool(tb)', function(obj) {
    		//给行数据赋值
    		row = obj.data;
    		if (obj.event == "edit") {
    			open("编辑");
    		} else if (obj.event == "del") {
    			layer.confirm('真的删除该行数据么/(ㄒoㄒ)/~~', {
    				icon : 3,
    				title : '提示'
    			}, function(index) {
    				$.post('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' : 'userRole',
    			'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) {
    			// 调用子页面中提供的getData方法，快速获取子页面的form表单数据 getData()子页面的方法
    			let data = $(layero).find("iframe")[0].contentWindow.getData();
    			console.log(data);
    			// 判断title标题
    			let methodName = "add";
    			if (title == "编辑")
    				methodName = "edit";
    			$.post('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();
    		}
    	});
    }