Layui之CRUD(增删改查)

一.Layui的简介

Layui是一款基于jQuery的前端UI框架，它提供了一套简洁、易用且功能丰富的界面元素和组件，帮助开发者快速构建现代化的Web界面。Layui的设计理念是"经典即时"，主张简化繁琐的HTML结构和CSS样式，提供一种更加直观、高效的开发方式。

Layui提供了丰富的模块化组件，包括表单、表格、按钮、导航、弹窗等等，同时也支持响应式布局，适配不同大小的设备屏幕。它还提供了灵活的定制和扩展机制，开发者可以根据自己的需求进行样式定制、组件扩展和插件开发。

Layui的文档详细清晰，对于初学者来说很友好，它提供了大量的示例代码和使用说明，帮助开发者快速上手。同时，它也秉持着开源的精神，用户可以免费使用并进行二次开发。

总的来说，Layui是一个功能强大、易用性好的前端UI框架，适用于各种规模的Web开发项目。无论是个人开发者还是企业团队，都可以通过Layui提高开发效率，实现优秀的用户界面。

二.R工具类介绍

代码部分

1.R工具类代码

package com.YU.util;

import java.util.HashMap;

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;
	}
}

 2.R工具类的使用

2.1 使用R工具后的代码

public void userRole(HttpServletRequest req,HttpServletResponse reps) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List> userRole = ud.userRole(user, pageBean);
			Map maps = new HashMap();
			ResponseUtil.writeJson(reps, R.ok(0, "查询成功",pageBean.getTotal(), userRole));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

2.2原始代码

 对比后发现，在将数据加入map集合后可以将重复的代码进行封装到R工具类中，减少很多重复代码，只需实现方法进行调用

三.代码实现

1.Dao层代码

通过BaseDao实现模糊查询，增删改

public List> userRole(User user,PageBean pageBean) throws Exception {
		// sql语句编写
		String sql = "\r\n" + 
				"select u.*,\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" + 
				"		'会议室管理员'\r\n" + 
				"	else\r\n" + 
				"		'其他'\r\n" + 
				"END\r\n" + 
				") rname FROM t_oa_user u";
		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 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"});
	}

2.后台Action控制器

package com.YU.web;

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

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

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

public class UserAction extends ActionSupport implements ModelDriver{

	private User user = new User();
	private UserDao ud = new UserDao();
	
	public void Register(HttpServletRequest req,HttpServletResponse reps) {
		try {
			//先获取最大的id数
			int maxId = ud.getMaxId();
			user = new User(maxId+1, req.getParameter("name"), req.getParameter("loginname"),
					req.getParameter("password"), Long.parseLong(req.getParameter("rid")));
			int register = ud.register(user);
			ResponseUtil.writeJson(reps, register);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void Login(HttpServletRequest req,HttpServletResponse reps) {
		try {
			User u = ud.login(user);
			ResponseUtil.writeJson(reps, u);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void userRole(HttpServletRequest req,HttpServletResponse reps) {
		try {
			PageBean pageBean = new PageBean();
			pageBean.setRequest(req);
			List> userRole = ud.userRole(user, pageBean);
			Map maps = new HashMap();
			ResponseUtil.writeJson(reps, R.ok(0, "查询成功",pageBean.getTotal(), userRole));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void add(HttpServletRequest req,HttpServletResponse reps) {
		try {
			int add = ud.add(user);
			Map maps = new HashMap();
			ResponseUtil.writeJson(reps, R.ok(0, "查询成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void del(HttpServletRequest req,HttpServletResponse reps) {
		try {
			int del = ud.del(user);
			Map maps = new HashMap();
			ResponseUtil.writeJson(reps, R.ok(0, "删除成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	public void edit(HttpServletRequest req,HttpServletResponse reps) {
		try {
			PageBean pageBean = new PageBean();
			int edit = ud.edit(user);
			Map maps = new HashMap();
			ResponseUtil.writeJson(reps, R.ok(0, "修改成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	@Override
	public User getModel() {
		return user;
	}
	
}

利用上面的R工具类配合dao方法实现数据库增删改查

3.前端代码

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',
		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 '' + res.name + ''
			}
		}, {
			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('确认删除吗?', {
				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();
		}
	});
}

 新增界面中的JS代码

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row：表格行对象
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
    return form.val('user');
}