​​Layui之用户管理实例(对数据的增删改查)

news/2024/2/28 9:53:49

目录

​编辑一、R工具介绍()

​编辑二、数据表的增删改查

​编辑2.1我们先得从查询数据库的语句入手

2.2优化dao类

2.4UserAction类

2.5前台的页面实现增删改查操作

2.6 userManage页面JS

         2.7user新增、修改iframe层js

前言
       上一篇我分享了使用layui菜单栏的动态添加选项卡,这次要分享的内容是基于上一次的选项卡,将数据表的数据显示出来,并且具有增删改查的功能。

先看效果:

 

一、R工具介绍()

1.1R工具是我们自己定义的工具类,                                                                                        1.2.data 方法 :用于向对象接受一个键和对应的值,并将其存储在R对象中。
1.3. R对象 受一个状态码`code`和 消息`msg` 作为参数,并通过`data`方法将相关数据(`success`、`code`、`msg`等)存储进去。
1.4. error 方法:创建一个错误的`R`对象,接受一个状态码`code`和消息`msg`作为参数,并通过`data`方法将相关数据(如`success`、`code`、`msg`等)存储进去。

1.5它的作用就是提供一组通用的功能方法,方便在项目中重复使用和调用。同时提高开发效率

1.6如何去写它:这里我们是让R工具类去代替Map集合去工作,那必须去实现Map的底层:去继承hashmap,通过this关键字引用当前对象添加指定的内容。

代码如下:

package com.zking.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.1我们先得从查询数据库的语句入手

通过查询user表数据,并且添加一个字段rname(因为方便与我们的页面显示)

先查看数据表:

通过sql查看(并且添加一个字段rname) 

SELECTu.*,(
CASEWHEN u.rid = '1' THEN'管理员' WHEN u.rid = '2' THEN'发起者' WHEN u.rid = '3' THEN'审批者' WHEN u.rid = '4' THEN'参与者' WHEN u.rid = '5' THEN'会议室管理员' ELSE '其他' 
END ) rname 
FROM
t_oa_user u

2.2优化dao类

        继上篇博客优化方法。这里我们要重新写4个方法,因为对要数据的增删改查!!!写完后可以使用Junit进行测试。如何使用Junit测试我已在以下文章中详细的说明了。http://t.csdn.cn/KoDcOicon-default.png?t=N6B9http://t.csdn.cn/KoDcO

/*** */
package com.zking.dao;import java.util.List;
import java.util.Map;import com.zking.entity.User;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
import com.zking.util.StringUtils;/*** @author 李永安** @date:2023年7月10日 下午5:39:48* */
public class UserDao extends BaseDao<User>{public List<User> list(User user, PageBean pageBean) throws Exception {String sql = "select * from t_oa_user where 1=1";return super.executeQuery(sql, User.class, pageBean);}/*** 传账号密码,判断* @param user * @return* @throws Exception*/public User login(User user ) throws Exception {String sql = "select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd ='"+user.getPwd()+"' ";List<User> lis= super.executeQuery(sql, User.class, null);//账号密码只有1条System.out.println("Asf");if(lis!=null && lis.size()!=0) {return lis.get(0);//当前账号密码}return null;}/*** 查询用户id以及对应角色,角色通过case when得出* @param user* @param pageBean* @return* @throws Exception*/public List<Map<String,Object>> lst(User user,PageBean pageBean) throws Exception{String sql = "SELECT * \r\n" + ",( CASE rid \r\n" + "WHEN 1 THEN '管理员' \r\n" + "WHEN 2 THEN '发起者' \r\n" + "WHEN 3 THEN '审批者' \r\n" + "WHEN 4 THEN '参与者' \r\n" + "WHEN 5 THEN '会议室管理员' \r\n" + "ELSE '其他' END ) roleName \r\n" + "FROM \r\n" + "t_oa_user 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 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 where name=?,loginName=?,pwd=? where id=?";return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});}
}

测试拿到数据

 

2.4UserAction类

思路:继承ActionSupport,implements驱动接口然后实例对象User,这里我们在添加数据时,要按照json格式数据传递,就要使用到map集合,这里我们使用R工具类,简化了许多的重复代码。

/*** */
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 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;/*** @author 李永安** @date:2023年7月10日 下午6:04:14* */
public class UserAction extends ActionSupport implements ModelDriver<User>{private User user  = new User();private UserDao ud = new UserDao();//ActionSupport方法public void login(HttpServletRequest req, HttpServletResponse resp) throws Exception {User u = ud.login(user);ResponseUtil.writeJson(resp, u);//向前端发送数据  }//	用户查询public void userRole(HttpServletRequest req, HttpServletResponse resp) throws Exception {PageBean pageBean = new PageBean();pageBean.setRequest(req);List<Map<String,Object>> userRole = ud.userRole(user, pageBean);//我们不使用工具类:每次加一个
//			Map<String, Object> map = new HashMap<String, Object>();
//			map.put("code", 0);
//			map.put("msg", "数据查询成功");
//			map.put("count", pageBean.getTotal());
//			map.put("date", userRole);
//			遵循layui中的格式ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),userRole));ResponseUtil.writeJson(resp, R.error(0, "用户数据查询失败"));}public String add(HttpServletRequest req, HttpServletResponse resp) {try {int rs = ud.add(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(0, "用户数据新增成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户数据新增失败"));} catch (Exception e1) {// TODO Auto-generated catch blocke1.printStackTrace();}}return null;}public String del(HttpServletRequest req, HttpServletResponse resp) {try {int rs = ud.del(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(0, "用户数据删除成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户数据删除失败"));} catch (Exception e1) {// TODO Auto-generated catch blocke1.printStackTrace();}}return null;}public String edit(HttpServletRequest req, HttpServletResponse resp) {try {int rs = ud.add(user);if(rs>0) {ResponseUtil.writeJson(resp, R.ok(0, "用户数据修改成功"));}else {ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.error(0, "用户数据修改失败"));} catch (Exception e1) {// TODO Auto-generated catch blocke1.printStackTrace();}}return null;}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}

前台拿到数据

 

2.5前台的页面实现增删改查操作

通过官网导入对应的静态:

 copy对应的代码

<body><table class="layui-hide" id="test" 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><script src="//res/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 --> <script>
layui.use('table', function(){var table = layui.table;table.render({elem: '#test',url:'../../test/table/demo1.json.js',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:'username', title:'用户名', width:120, edit: 'text'},{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}},{field:'sex', title:'性别', width:80, edit: 'text', sort: true},{field:'city', title:'城市', width:100},{field:'sign', title:'签名'},{field:'experience', title:'积分', width:80, sort: true},{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次数', width:100, sort: true},{field:'joinTime', title:'加入时间', width:120},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}]],page: true});//头工具栏事件table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'getCheckData':var data = checkStatus.data;layer.alert(JSON.stringify(data));break;case 'getCheckLength':var data = checkStatus.data;layer.msg('选中了:'+ data.length + ' 个');break;case 'isAll':layer.msg(checkStatus.isAll ? '全选': '未全选');break;//自定义头工具栏右侧图标 - 提示case 'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});//监听行工具事件table.on('tool(test)', function(obj){var data = obj.data;//console.log(obj)if(obj.event === 'del'){layer.confirm('真的删除行么', function(index){obj.del();layer.close(index);});} else if(obj.event === 'edit'){layer.prompt({formType: 2,value: data.email}, function(value, index){obj.update({email: value});layer.close(index);});}});
});
</script></body>
</html>

         

2.6 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或者POSTloading : true, // 是否显示加载条(默认 true)page : true, // 是否分页where : { // 设定异步数据接口的额外参数,任意设'methodName' : 'userRole','name' : $('#name').val()},request : { // 自定义分页请求参数名pageName : 'page', // 页码的参数名称,默认:pagelimitName : '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();}});
}

2.7user新增、修改iframe层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');
}


http://www.ppmy.cn/news/881547.html

相关文章

e-cology我收藏的文档在哪看

E9 前端-右上角收藏夹&#xff1a;

计算机专业一般怎么看文献,在哪看?

最近大家都开始写毕业设计啦&#xff0c;很多同学最近在问“计算机文献资料”去哪下载呀&#xff1f;这里是一份不完全的计算机相关的外文文献寻找攻略~途径一&#xff1a;学术搜索引擎可以通过学术搜索引擎&#xff0c;如百度学术、掌桥科研、谷歌学术&#xff08;需要科学上网…

哔哩哔哩番剧列表获取

网页接口请求 在bilibili网连载动画里右键检查&#xff0c;查看network里 js 选项下&#xff0c; 在进行翻页操作时的动态变量。如图&#xff1a; 获取到url后就可以通过代码进行操作了 &#xff08;复制到 &#xff1f;前&#xff0c;作为url&#xff09; import requests im…

自己看看看

python程序如下&#xff1a; import re,urllib strTxt"" x1 ffopen("wangzhi.txt","r") for line in ff.readlines(): fopen(str(x)".txt","w") print line nre.findall(r" (.*?)<\/p>",urllib.u…

程序员入门教程【非常详细】从零基础入门到精通,看完这一篇就够了 !

零基础编程入门先学什么&#xff1f;编程语言有几百种&#xff0c;我们应该怎么选择。想学习编程&#xff0c;加入互联网行业&#xff0c;哪一个更有前途&#xff1f;在小白学习编程会有各种各样的问题&#xff0c;今天小编我就来为你解答。 一、怎么选择编程语言 编程语言有很…

picacg本地缓存目录_picacg隐藏模式在哪?picacg怎么进隐藏?

picacg&#xff0c;每日更新超快&#xff0c;各类漫画看不停&#xff0c;让你可以在这里以最高权限观看喜欢的漫画资源&#xff0c;非常便捷&#xff0c;非常高效。南无picacg隐藏模式在哪&#xff1f;picacg怎么进隐藏&#xff1f;小编在这里为大家带来介绍。 ​ 软件介绍 pic…

冯诺依曼体系结构以及回答操作系统(是什么,为什么,怎么办)问题

目录 一、硬件冯诺依曼体系结构 二、软件2.1 计算机的层状结构2.2 操作系统的概念2.3 操作系统是什么&#xff1f;2.4 为什么要有操作系统&#xff1f;2.5 操作系统是怎么管理底层的软硬件资源的呢&#xff1f; 一、硬件 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记…

PCM音频混合的方法

音频混音算法的实现 1、线性叠加后求平均 优点&#xff1a;不会产生溢出&#xff0c;噪音较小&#xff1b; 缺点&#xff1a;衰减过大&#xff0c;影响通话质量&#xff1b; short remix(short buffer1,short buffer2) { int value buffer1 buffer2; return (short)(v…

极兔68亿收购百世快递

近日&#xff0c;极兔速递&#xff08;下称极兔&#xff09;与百世集团&#xff08;NYSE&#xff1a;BEST&#xff09;签订收购协议&#xff0c;极兔以68亿元的价格收购了百世集团国内快递业务。完成收购后&#xff0c;极兔在国内快递市场份额将从6%上升至14%&#xff0c;仅次于…

通达系虽然与极兔产生纠葛,不过它们与拼多多依然紧密合作

通达系与极兔产生纠葛&#xff0c;一度让人觉得这是它们身后的阿里和拼多多的较量&#xff0c;不过日前笔者从拼多多选购商品的时候却发现拼多多与通达系的合作依然紧密。 通达系的成长离不开阿里巴巴的支持&#xff0c;早几年通达系成长的时候正是伴随阿里巴巴在电商行业的快速…

逛飙极兔牵手百世,快递行业三分江湖

本文概要&#xff1a;双十一大战已经落下帷幕&#xff0c;和往年不同的是&#xff0c;今年的电商平台们纷纷对GMV保持缄默&#xff0c;但在双十一的下游&#xff0c;快递行业却难掩战火。就在刚过去的十月里百世快递宣布将国内的快递业务全部易主极兔。这场价值65亿的交易被外界…

申通快递在双11的云原生应用实践

溪恒、遥方 阿里巴巴云原生 读完需要 20分钟 速读仅需 5 分钟 一年一度的 “双11” 大促中&#xff0c;交易额每年都在刷新&#xff0c;承接这些交易商品的快递包裹的数量也在成倍增长。这些快速的增长对物流系统带来了巨大的挑战&#xff0c;让物流管理更加敏捷来应对 “双11”…

三一重工首家海外灯塔工厂建成投产;极兔速递扩建印尼转运中心 | 美通企业日报...

美通社要闻摘要&#xff1a; 三一重工首家海外灯塔工厂建成投产。通用汽车在两年多后恢复季度派息。极兔速递扩建印尼转运中心。美的工业技术低碳智能微电网解决方案发布。数数科技完成1亿元C轮融资。博腾生物获数亿元B轮融资。美国FDA授权对青少年扩展紧急使用新冠疫苗。中国哮…

天载股票开户芯片业布局升级 难解汽车缺芯“近渴”

近年来&#xff0c;在新一轮科技革命和产业变革的大背景下&#xff0c;我国以网络购物、移动支付、线上线下融合等新业态新模式为特征的新型消费快速发展&#xff0c;对满足居民生活需要、释放国内消费潜力、促进经济平稳健康发展发挥了重要作用。狭义讲&#xff0c;新型消费是…

申通单号如何批量跟踪已揽收单号

一般商家下午会发货&#xff0c;到第二天就会去跟踪下物流信息&#xff0c;看下有没有揽收呢&#xff0c;大量单号要如何去跟踪呢&#xff0c;大家都说跟踪方法很多种&#xff0c;比如一个一个单号复制到百度上去查询&#xff0c;或一次复制10个或20个单号到快递官网上也可以跟…

国内快递或没有永久第一,但“印尼极兔”却试图搅局?

双十一将至&#xff0c;快递企业们正磨刀霍霍向更大的电商节订单量“蛋糕”而去。 但有一只来自印尼的快递“兔子”却正被同行围剿&#xff0c;这是为什么呢&#xff1f; 这只兔子正是极兔速递&#xff0c;其靠着烧钱打法又如何化险为夷&#xff1f;真能搅动中国快递市场吗&a…

极兔快递备胎转正,通达系快递将被彻底碾压

近期通达系快递企业与极兔快递产生纠纷&#xff0c;为了扶持极兔快递的发展&#xff0c;OPPO在各地的渠道商被鼓励加盟极兔快递&#xff0c;由此将形成通达系快递企业与极兔快递的竞争。 通达系快递企业都已由阿里巴巴入股&#xff0c;再加上阿里巴巴的电商包裹占了通达系快递业…

百世退场,极兔加速,快递行业“内卷”何时休?

又是一年多事之秋&#xff0c;或许也没有人会想到&#xff0c;一只从海外回来的“极兔”&#xff0c;将国内快递行业掀得天翻地覆。 近期&#xff0c;百世集团宣布&#xff0c;旗下百世快递业务将以约68亿元人民币交易给极兔速递&#xff0c;该笔交易预计将于2022年上半年完成…

极兔收购百世快递,谁是赢家?

燃次元&#xff08;ID:chaintruth&#xff09;原创 10月29日&#xff0c;百世集团宣布&#xff0c;作价68亿元人民币将旗下百世快递出售给极兔&#xff0c;交易预计在2022年上半年完成。 百世集团创始人、董事长兼CEO周韶宁发内部信称&#xff0c;根据协议&#xff0c;集团将把…

极兔收购百世加速网络融合,中国快递行业将拐向何方?

请永远相信&#xff0c;这个世界没有什么不可能。 据松果财经获悉&#xff0c;12月10日&#xff0c;百世快递发生工商变更&#xff0c;由极兔速递100%控股。 平地惊雷&#xff0c;过去多年由“四通一达”默契建构、相对平稳的国内快递市场格局终于被打破&#xff0c;行业不再…
最新文章