LayUI之增删改查

目录

一、前言

1.1 前言

1.2 前端代码(数据表格组件)

1.3 封装JS

二、LayUI增删改查的后台代码

2.1 编写Dao方法

        2.1 增加

      2.2 删除

     2.3 修改

三、LayUI增删改查的前端代码

  3.1 增加


一、前言

1.1 前言

上一篇文章我们一起做了LayUI的动态添加选项卡,这一篇文章我们继续来进行对LayUI的学习,开始编写一下LayUI的增删改查吧!

1.2 前端代码(数据表格组件)

这里就先把从官网上演变过来的一些前端代码粘贴过来: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="${pageContext.request.contextPath }/static/js/system/userManage.js"></script>
<title>用户管理</title>
</head>
<body>
	<!-- 搜索栏 -->
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">用户名:</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" lay-filter="tb" class="layui-table" style="margin-top:-15px;" lay-filter="tb_goods">
		
	</table>
	<!-- 对话框(新增和编辑共用一个页面) -->
	
	<script type="text/html" id="toolbar">
 		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
 		<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
 		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码</button>
	</script>
</body>
</html>

1.3 封装JS

接着我们把我们需要的js全部封装好:userManage.js

let layer,$,table;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
});
 
 
//在页面中的<table>中必须配置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{
 
	}
});
 
//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'},
        ]]
    });
	
}
 
//2.点击查询
function query(){
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式,GET或者POST
        loading: true,                     //是否显示加载条(默认 true)
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数,任意设
        	'methodName':'listUserRole',
        	'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表单数据
    	   //jQuery.find
           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();
       }
    });
}

我们再放上引入的公共页面:header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
 
<!-- 指定整个项目的根路径 -->
<base href="${pageContext.request.contextPath }/" />
 
<!-- 隐藏域传值 -->
<input id="ctx" value="${pageContext.request.contextPath }" type="hidden"/>
 

前端建立好了后,我们看看运行效果

二、LayUI增删改查的后台代码

2.1 编写Dao方法

我们首先还是要写一个查询的方法:UserDao--->List

	/**
	 * 查询用户信息对应的角色,角色是通过case when得来的
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Map<String,Object>> list(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 \r\n" + 
				") 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);
	}

运行测试:

 

        2.1 增加

                我们继续编写增加的方法:Add      

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

      2.2 删除

    public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id = ?";
		return super.executeUpdate(sql, user, new String[] {"id"});
	}

     2.3 修改

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

 当我们写好了增删改查的Dao方法后,就可以开始编写UserAction啦~

package com.leaf.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.leaf.dao.UserDao;
import com.leaf.entity.User;
import com.leaf.mvc.ActionSupport;
import com.leaf.mvc.ModelDriven;
import com.leaf.util.PageBean;
import com.leaf.util.R;
import com.leaf.util.ResponseUtil;
 
public class UserAction extends ActionSupport implements ModelDriven<User> {
 
	private User user = new User();
	
	private UserDao ud = new UserDao();
	
	//写一个方法处理前台的请求
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String,Object>();
		try {
			//调用Dao方法
			User u = ud.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.ok(0, "用户名密码错误"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "登录失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//查询所有用户的方法
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			//初始化
			pageBean.setRequest(req);
			List<Map<String, Object>> list = ud.list(user, pageBean);
			ResponseUtil.writeJson(resp, R.ok(0, "查询成功" ,pageBean.getTotal() ,user));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "查询失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//增加的方法
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.add(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//删除的方法
	public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.del(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "删除成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "删除失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "删除失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//修改的方法
	public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.edit(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "修改成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "修改失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "修改失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	@Override
	public User getModel() {
		return user;
	}
	
}

三、LayUI增删改查的前端代码

  3.1 增加

                我们需要建立一个增加的页面:userEdit

                这个页面和编辑共用~

<%@ 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/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
	max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

封装对应的JS: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:表格行对象
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//取user from中的值
    return form.val('user');
}

OK,今天的学习笔记分享就到这里啦,我们呢下次再见!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/38953.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【天工Godwork精品教程】天工3.1.7安装教程(附Godwork完整版下载地址)

本文讲解天工3.1.7安装过程(附Godwork完整版网盘下载地址)。 文章目录 一、天工3.1.7安装教程1. 安装GodWork-AT 3.1.72. 安装GodWork-AT 3.1.7补丁3. 安装GodWork-EOS-Setup-2017B-12314. 安装GodWork-EOS补丁5. 运行godwokr软件6. 生成ZC码7. 输入ZC码8. eos插件调用二、天…

【大数据之Hadoop】三十七、Hadoop HA高可用

1、HA概述 实现高可用最关键的策略是消除单点故障。HA分成各个组件的HA机制&#xff1a;HDFS的HA和YARN的HA。   Hadoop2.0之前&#xff0c;在HDFS集群中NameNode存在单点故障&#xff08;SPOF&#xff09;。 NameNode主要在以下两个方面影响HDFS集群&#xff1a; &#xff…

07-尚硅谷大数据技术之Spark源码

1. 环境准备&#xff08;Yarn 集群&#xff09; 搭建Spark on Yarn集群 3.3 Yarn 模式 独立部署&#xff08;Standalone&#xff09;模式由 Spark 自身提供计算资源&#xff0c;无需其他框架提供资源。这种方式降低了和其他第三方资源框架的耦合性&#xff0c;独立性非常强。但…

PyTorch训练RNN, GRU, LSTM:手写数字识别

文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集&#xff1a;MNIST 该数据集的内容是手写数字识别&#xff0c;其分为两部分&#xff0c;分别含有60000张训练图片和10000张测试图片 图片来源&#xff1a;https://tensornews.cn/mnist_intr…

每日一题2023.7.19|ACM模式

文章目录 C的输入方式介绍cin>>cin.get(字符变量名)cin.get(数组名,接收字符数目)cin.get()cin.getline() getline()gets()getchar() AB问题|AB问题||AB问题|||ABⅣAB问题ⅤAB问题Ⅵ C的输入方式介绍 参考博客 cin>> 最基本&#xff0c;最常用的字符或者数字的输…

TMS FlexCel for VCL FMX Crack

TMS FlexCel for VCL & FMX Crack 强大、广泛和灵活的组件套件&#xff0c;用于VCL和FireMonkey的本地Excel报告、文件生成和操作。 FlexCel for VCL/FireMonkey是一套允许操作Excel文件的Delphi组件。它包括一个广泛的API&#xff0c;允许本地读/写Excel文件。如果您需要在…

c#调用cpp库,debug时不进入cpp函数

选中c#的项目&#xff0c;右击属性&#xff0c;进入属性页&#xff0c;点击调试&#xff0c;点击打开调试启动配置文件UI&#xff0c;打开启用本机代码调试。

uniapp 集成七牛云,上传图片

1 创建项目 我是可视化创建项目的 &#xff0c;cli创建的项目可以直接使用npm安装七牛云。 2 拷贝qiniuUploader.js到项目&#xff0c;下面的回复 放了qiniuUploader.js百度云链接。 3 在需要使用qiniuUploader的vue文件 引入。 4 相册选择照片&#xff0c;或者拍照后&#xff…

工欲善其事,必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展 1、React Developer Tools &#xff08;主要用于debug组件结构) 2、Redux DevTools &#xff08;主要用于debug redux store的数据&#xff09; 对于react native应用&#xff0c;我们一般就使用react-nativ…

vue 项目优化

去除冗余的css 消除框架中未使用的CSS,初步达到按需引入的效果 使用背景&#xff1a;vue2.x, webpack3.x 使用插件&#xff1a;purifycss-webpack 安装&#xff1a; npm i purifycss-webpack purify-css glob-all -D安装后各个插件的版本&#xff1a; “glob-all”: “^3.3.…

轻松实现数据一体化:轻易云数据集成平台全解析

在当今快速发展的商业环境中&#xff0c;企业面临着大量来自多样数据源的数据。如何将这些数据进行高效集成和利用&#xff0c;成为企业数字化转型的关键挑战。轻易云数据集成平台提供了一个一站式的解决方案&#xff0c;帮助企业实现数据的无缝集成和高效利用。下面我们将通过…

[java安全]URLDNS

文章目录 [java安全]URLDNS前言HashMapURLURLStreamHandler调用过程调用链流程图POC [java安全]URLDNS 前言 URLDNS利用链是一条很简单的链子&#xff0c;可以用来查看java反序列化是否存在反序列化漏洞&#xff0c;如果存在&#xff0c;就会触发dns查询请求 它有如下优点&a…

docker-compose搭建prometheus+grafana+钉钉告警

前言&#xff1a; 本文将介绍使用docker-compose部署搭建promtheus监控容器、主机、服务等相关状态&#xff1b; 配合granfana面板构建监控大屏&#xff1b; 由于grafana的报警不是很友好&#xff0c;使用dingtalk&#xff0c;配合altermanager&#xff0c;实现钉钉报警。 …

pico添加devmem2读写内存模块

devmem2读写内存 自定义msh命令devmem2验证msh命令devmem2读CPUID读写全局变量 devmem2模块可实现对设备寄存器的读写操作。在RT-Thread的命令行组件Fish中添加devmem2模块&#xff0c;用户可在终端输入devmem2相关命令&#xff0c;FinSH根据输入对指定寄存器进行读写&#xff…

提高LLaMA-7B的数学推理能力

概述 这篇文章探讨了利用多视角微调方法提高数学推理的泛化能力。数学推理在相对较小的语言模型中仍然是一个挑战&#xff0c;许多现有方法倾向于依赖庞大但效率低下的大语言模型进行知识蒸馏。研究人员提出了一种避免过度依赖大语言模型的新方法&#xff0c;该方法通过有效利…

JVM中类加载的过程

文章目录 一、类加载是什么二、类加载过程1.加载2.验证3.准备4.解析5.初始化 三、什么时候进行类加载四、双亲委派模型1.三大类加载器2.加载过程 总 一、类加载是什么 把.class文件加载到内存中&#xff0c;得到类对象的过程。 二、类加载过程 1.加载 找到.class文件&#xff…

QT Quick初学笔记---第一篇

链接: QML Book中文版(QML Book In Chinese) 1、对Qt Quick的初步认识 Qt Quick是Qt5界面开发技术的统称&#xff0c;是以下几种技术的集合&#xff1a; QML&#xff1a;界面标记语言JavaScript&#xff1a;动态脚本语言QT C&#xff1a;跨平台C封装库 QML是与HTML类似的一…

守护数智未来,开源网安受邀参加2023OWASP北京论坛

2023年7月14日&#xff0c;OWASP中国与网安加社区联合举办的“2023OWASP中国北京安全技术论坛”在北京圆满召开&#xff0c;开源网安受邀参加本次论坛并分享“软件供应链安全治理实践”。 本次“2023OWASP中国北京安全技术论坛”是OWASP中国北京地区年度重要活动之一&#xff…

数据库信息速递 MONGODB 6.0 的新特性,更多的查询函数,加密查询,与时序数据集合 (译)...

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到3群&#xff08;共…

ffmpeg学习之音频解码数据

音频数据经过解码后会被保存为&#xff0c;pcm数据格式。而对应的处理流程如下所示。 avcodec_find_encoder() /*** 查找具有匹配编解码器ID的已注册编码器.** param id AVCodecID of the requested encoder* return An encoder if one was found, NULL otherwise.*/ const A…