一.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<Map<String, Object>> userRole = ud.userRole(user, pageBean); Map<String, Object> maps = new HashMap<String, Object>(); ResponseUtil.writeJson(reps, R.ok(0, "查询成功",pageBean.getTotal(), userRole)); } catch (Exception e) { e.printStackTrace(); } }
2.2原始代码
对比后发现，在将数据加入map集合后可以将重复的代码进行封装到R工具类中，减少很多重复代码，只需实现方法进行调用
三.代码实现
1.Dao层代码
通过BaseDao实现模糊查询，增删改
public List<Map<String, Object>> 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<User>{ 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<Map<String, Object>> userRole = ud.userRole(user, pageBean); Map<String, Object> maps = new HashMap<String, Object>(); 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<String, Object> maps = new HashMap<String, Object>(); 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<String, Object> maps = new HashMap<String, Object>(); 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<String, Object> maps = new HashMap<String, Object>(); 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 '<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('确认删除吗?', { 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'); }
