Layui实现CURD

最新推荐文章于 2023-07-15 00:25:38 发布
原创 最新推荐文章于 2023-07-15 00:25:38 发布 · 457 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Layui实现CURD

本文档详细介绍了如何利用Layui框架实现数据的增删改查（CURD）功能，包括Bookdao的方法实现，BookAction的业务逻辑处理，Struts2配置文件的配置，以及前端index.js和index.jsp页面的交互逻辑。

Layui实现CURD

Bookdao方法

package com.dao;

import java.sql.SQLException;
import java.util.List;

import com.entity.Book;
import com.sun.javafx.collections.MappingChange.Map;

import com.sun.xml.internal.ws.util.StringUtils;
import com.util.EntityBaseDao;
import com.util.JsonBaseDao;
import com.util.JsonUtils;
import com.util.PageBean;

public class BookDao extends JsonBaseDao {

	/**
	 * 书籍类别查询
	 * @param paMap
	 * @param pageBean
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws InstantiationException 
	 */
	public List<Map<String, Object>> list(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
		String sql=" select * from booktype where true";
		String bookid=JsonUtils.getParamVal(paMap, "booktypeid");
		String bookname=JsonUtils.getParamVal(paMap, "booktypename");
		if(StringUtils.isNotBlank(bookid)) {
			sql+=" and booktypeid ="+bookid+" ";
		}
		if(StringUtils.isNotBlank(bookname)) {
			/*ql+=" and booktypename  = '"+booktypename+"' ";*/
			sql+=" and booktypename like '%"+bookname+"%'";
		}
		sql += "  order by booktypeid desc ";
		return executeQuery(sql, pageBean);
	}
	/**
	 * 增加书本类
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws IllegalArgumentException 
	 * @throws SecurityException 
	 * @throws NoSuchFieldException 
	 */
	public int addBookType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="insert into bookid (bookname,typetime) values(?,?)";
		return executeUpdate(sql, new String[] {"bookname","typedescribe"}, paMap);
		
	}
	
	/**
	 * 删除书本类型
	 * @param paMap
	 * @return
	 * @throws SQLException 
	 * @throws IllegalAccessException 
	 * @throws IllegalArgumentException 
	 * @throws SecurityException 
	 * @throws NoSuchFieldException 
	 */
	public int deleteBookType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="delete from booktype where bookid=?";
		return executeUpdate(sql, new String[] {"bookid"}, paMap);
	}
	
	/**
	 * 修改书本类型信息
	 * @param paMap
	 * @return
	 * @throws NoSuchFieldException
	 * @throws SecurityException
	 * @throws IllegalArgumentException
	 * @throws IllegalAccessException
	 * @throws SQLException
	 */
	public int updateBookType(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="update  booktype set bookname=?,typetime=? where booktypeid=?";
		return executeUpdate(sql, new String[] {"bookname","typetime","bookid"}, paMap);
	}
}

BookAction


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

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

import com.dao.BookDao;
import com.util.PageBean;
import com.util.ResponseUtil;

public class BookAction extends ActionSupport  {

private BookDao bookDao=new BookDao();

/**
 * 查询书籍类别
 * @param req
 * @param resp
 * @return
 * @throws Exception
 */
public String list(HttpServletRequest req,HttpServletResponse resp) throws Exception {
	try {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(), pageBean);
		ObjectMapper om =new ObjectMapper();
		Map<String, Object> map=new HashMap<>();
		map.put("code", 0);
		map.put("count", pageBean.getTotal());
		map.put("data", list);
		ResponseUtil.write(resp, om.writeValueAsString(map));
	} catch (InstantiationException e) {
		e.printStackTrace();
	} 
	return null;
}


/**
 * 增加
 * @param req
 * @param resp
 * @return
 */
public String addBookType(HttpServletRequest req,HttpServletResponse resp) {
	try {
		List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(), null);
		int val = 0;
		//如果集合不为空 或者长度等于 0  就把它增加进去 
		if(list==null || list.size() == 0) {
			val = this.bookDao.addBookType(req.getParameterMap());
		}
		/*if(list!=null && list.size() >0) {
			val = this.booktypeDao.addBookType(req.getParameterMap());
		}*/
		else {
			val= 2;
		}
		
		ResponseUtil.write(resp, val);
	} catch (Exception e) {
		e.printStackTrace();
	}
	return null;
}
/**
 * 删除书本类别
 * @throws Exception 
 * @throws JsonProcessingException 
 * 
 */
public String deleteBookType(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
	try {
		int deleteBookType=this.bookDao.deleteBookType(req.getParameterMap());
		ObjectMapper om=new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(deleteBookType));
	} catch (NoSuchFieldException e) {
		e.printStackTrace();
	}
	return null;
}

/**
 * 修改书籍类别
 * @param req
 * @param resp
 * @return
 * @throws JsonProcessingException
 * @throws Exception
 */

public String updateBookType(HttpServletRequest req,HttpServletResponse resp) throws JsonProcessingException, Exception {
	try {
		int updateBookType=this.bookDao.updateBookType(req.getParameterMap());
		ObjectMapper om=new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(updateBookType));
	} catch (NoSuchFieldException e) {
		e.printStackTrace();
	}
	return null;
}

/**
 * 下拉框
 */
public String listSelect(HttpServletRequest req,HttpServletResponse resp) throws Exception {
	try {
		PageBean pageBean=new PageBean();
		pageBean.setRequest(req);
		List<Map<String, Object>> list = this.bookDao.list(req.getParameterMap(), pageBean);
		ObjectMapper om =new ObjectMapper();
		ResponseUtil.write(resp, om.writeValueAsString(list));
	} catch (InstantiationException e) {
		e.printStackTrace();
	} 
	return null;
}
}

strust2的配置文件

	<package name="sy" extends="base" namespace="/sy">
		<action name="/strutsClassAction_*" class="com.cpc.web.StrutsClassAction" method="{1}">
		</action>
	</package>

index.js


layui.use(['table','layer','form'],function(){
 	var data=document.getElementById("sj").value;
 	var table =layui.table;
 	var layer=layui.layer;
 	var form = layui.form;
      /*展示数据表格  */
 	table.render({
 		  elem:'#test'//表格id
 		,url:data+'/booktypeAction.action?methodName=list'//所对应调用的接口
 		,method:'post'		//提交方式
 	    ,cols:[[
 	    	/*根据数据库的表格所对应的名称  */
 	         {field:'booktypeid',height:80, width:300, title: '书籍类别序号', sort: true}
 	         ,{field:'booktypename', height:80,width:300, title: '书籍类别名称'}
 	         ,{field:'createtime',height:80, width:300, title: '当前时间',templet:"<div>{{layui.util.toDateString(d.createtime, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
 	         ,{field:'right',height:80, width:300, title: '操作', toolbar:'#lineBtns'}//操作栏 
 	    ]]
 	         ,page:'true'//分页
 	         , id: 'testReload'
 	});
 	
 	//上方菜单操作栏(查询、以及  增加  按钮  )
     var $ = layui.$, active = {
             //查询
             reload: function () {
                 var booktypename = $('#booktypename');//书籍类别名称 根据 id来取值
                 console.log(booktypename.val());
                 // 执行重载
                 table.reload('testReload', {
                     page: {
                         curr: 1
                         // 重新从第 1 页开始
                     },
                     where: {
                         key: 'booktypename',
                         booktypename: booktypename.val(),
                     }
                 });
             }, add: function () { //添加
                 layer.open({//弹出框
                     type: 1,
                     title: '添加书本类别',
                     maxmin: true,
                     shadeClose: true, //点击遮罩关闭层
                     area: ['80%', '80%'],
                     content: $('#box1'),
                     btn: ['确定', '取消'],
                     yes: function (index, layero) {//确定执行函数
                     	console.log(layero);
                         //执行添加方法
                         $.getJSON(data+"/booktypeAction.action?methodName=addBookType", {
                         	 booktypename: $("#booktypename1").val(), ///角色名
                         	/* booktypename: $("input[ name='booktypename1']").val(), *///角色名
                         }, function (data) {
                         	/*根据后台返回的参数来进行判断  */
                             if (data==1) {
                                 layer.alert('添加成功', {icon: 1, title: '提示'}, function (i) {
                                     layer.close(i);
                                     layer.close(index);//关闭弹出层
                                     $("#booktype")[0].reset()//重置form
                                 })
                                 table.reload('testReload', {//重载表格
                                     page: {
                                         curr: 1
                                         // 重新从第 1 页开始
                                     }
                                 })
                             } else if(data==2){
                                 layer.msg('添加失败,请勿重复添加书本类别名称')
                             }
                         })

                     }, cancel: function (index, layero) {//取消
                         $("#booktype")[0].reset()//重置form  根据id
                         layer.close(index)
                     }
                 });
             }
     }
     $('.layui-form .layui-btn').on('click', function () {
         var type = $(this).data('type');
         active[type] ? active[type].call(this) : '';
     });
 	
 	
 	
 	/*表格 行内操作(编辑  以及  删除 按钮操作)  */
 	    table.on('tool(test)', function(obj){
          var data = obj.data; //获得当前行数据
          var urlex=document.getElementById("sj").value;
          var tr=obj.tr//活动当前行tr 的  DOM对象
          console.log(data);
          var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
          if(layEvent === 'del'){ //删除
              layer.confirm('确定删除吗？',{title:'删除'}, function(index){
                  //向服务端发送删除指令og
                  $.getJSON(urlex+'/booktypeAction.action?methodName=deleteBookType',{booktypeid:data.booktypeid}, function(ret){
                          layer.close(index);//关闭弹窗
                          table.reload('testReload', {//重载表格
                              page: {
                                  curr: 1
                                  // 重新从第 1 页开始
                              }
                          })
                  });
                  layer.close(index);
              });
          } else if(layEvent === 'edit'){ //编辑
              layer.open({
                  type: 1 //Page层类型
                  ,skin: 'layui-layer-molv'
                  ,area: ['380px', '270px']
                  ,title: ['编辑书本类别信息','font-size:18px']
                  ,btn: ['确定', '取消'] 
                  ,shadeClose: true
                  ,shade: 0 //遮罩透明度
                  ,maxmin: true //允许全屏最小化
                  ,content:$('#box1')  //弹窗id
                  ,success:function(layero,index){
 	                 $('#booktypeid').val(data.booktypeid);
 	                 $('#booktypename1').val(data.booktypename);  
                  },yes:function(index,layero){
                 	/*  $.ajaxSettings.async = false; */
                 	  $.getJSON(urlex+'/booktypeAction.action?methodName=updateBookType',{
                 		  booktypeid: $('#booktypeid').val(),
                 		  booktypename: $('#booktypename1').val(), 
                           booktypeid: data.booktypeid,
                 	  },function(data){
                 	  //根据后台返回的参数，来进行判断
                 		  if(data>0){
                 			  layer.alert('编辑成功',{icon:1,title:'提示'},function(i){
                 				  layer.close(i);
                                   layer.close(index);//关闭弹出层
                                   $("#booktype")[0].reset()//重置form
                 			  })
                 			  table.reload('testReload',{//重载表格
                 				  page:{
                 					  curr:1
                 				  }
                 			  })
                 		  }
                 	  });
                  }
                
              
              });
          }
       
 	    });
 	  
 });

index.jsp


<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link  rel="stylesheet" href="layui/css/layui.css" >
<script src="${pageContext.request.contextPath }/layui/layui.js"></script>
<script type="text/javascript" src="layui/lay/modules/jquery.js"></script>

<title>Insert title here</title>



</head>
<body>
<div class="child-nav">
    <span class="layui-breadcrumb">
         <a>书籍类别管理</a>
         <a><cite>分类列表</cite></a>
    </span>
</div>
<blockquote class="layui-elem-quote">

<!--搜索维度  -->
 <div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">书籍名称</label>
        <div class="layui-input-inline">
            <input type="text" id='booktypename' name="booktypename" lay-verify="required" placeholder="请输入书籍名" autocomplete="true" class="layui-input">
        </div>
        <button class="layui-btn layui-btn-normal layui-btn-radius" data-type="reload"><i class="layui-icon">&#xe615;</i>查询</button>
        <button class="layui-btn layui-btn-normal"   data-type="add">新建</button>
    </div>
</div>   
</blockquote>

<!--隐藏域传值  -->
<input type="hidden"  id="sj" value="${pageContext.request.contextPath}" >
<!--根据table id 来展示表格数据  -->
<!-- 我们在写展示表格的时候，一定要给它写上其lay-filter渲染表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--行内样式按钮   -->
<script type="text/html" id="lineBtns">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--弹出层  -->
	 <div class="site-text" style="margin: 5%; display: none" id="box1"  target="test123">
	    <form class="layui-form layui-form-pane" onsubmit="return false" id="booktype">
	        <div class="layui-form-item">
	           <label class="layui-form-label">类型编号</label>
	            <div class="layui-input-block">
	                <input type="text" class="layui-input layui-disabled text_add "  id="booktypeid" name=booktypeid  disabled="disabled">
	            </div>
	            <br>
	            <label class="layui-form-label"> 书本类别名</label>
	            <div class="layui-input-block">
	                <input type="text" class="layui-input"  id="booktypename1"  name=booktypename1><br>
	            </div>
	        </div>
	    </form>
	</div> 
</body>



<script type="text/javascript" src="${pageContext.request.contextPath }/public/Layui/js/booktype.js"></script>

</html>



</body>
</html>
layui，用layui+ajax完成crud
张子又
02-26 8877
1.layui学习 layui是前端框架，用来做前端界面，在项目中集成layui的步骤： 1）解压layui-v2.2.5.zip 2).在web项目WebRoot下创建layui文件夹，把css,lay两个文件夹及layui.js文件拷贝到layui文件夹中即可。如下所示: 然后在要使用弹出层的页面上引入layui.css和layui.js文件 &lt;!-- 引入layui的资源文件 --...
LayUI之CRUD
qq_63531917的博客
07-20 200
表t_oa_user 实体类 ②数据库访问层(Dao方法) UserDao.java 测试类UserDaoTest.java 结果 查询全部 增加 修改 删除 UserAction.java 二、前端搭建 ①html界面代码 main.jsp 界面效果 userEdit.jsp userManage.jsp 界面效果 userEdit.js userManage.js main.js ③公共jsp header.jsp 三、目录结构...
boot-layui-curd-master.zip
03-14
boot-layui-curd-master.zip
学生信息管理系统-CRUD例子-layui增删查改
05-31
包含sql文件，使用MySQL数据库 后端使用Servlet开发，数据交互使用json格式，前端主要使用Layui开发UI界面，使用ajax实现数据传输和交互。 系统实现了登录，登录验证，数据显示，分页显示，查找，模糊查找，删除，批量删除等功能。具体可以查看项目演示或者跑起来试试。
一键生成CURD、在线表单设计、基于PHP MySQL Layui 完美契合，自研Layui高颜值UI设计
最新发布
06-03
该资源名为"swiftadmin-master"，它是一款基于PHP和MySQL的后台管理框架，结合了流行的Layui前端框架，提供了一键生成CURD（Create、Read、Update、Delete）功能和在线表单设计能力，旨在简化中后台系统的开发流程，...
使用BootStrap和Layui框架实现CRUD操作
而boot-layui-curd-master这个项目可能是指集成了Bootstrap样式的Layui框架用于实现数据库数据的增删改查操作。" 知识点一：前端开发框架Layui Layui是一个成熟的前端UI框架，它提供了一系列基于JavaScript的Web...
Node.js v18.18.0 + Layui 2.8.17 + Mysql 作数据库 商品管理 CURD 增删改查
10-13
在本项目中，我们结合了Node.js v18.18.0、Layui 2.8.17和Mysql数据库来实现一个商品管理系统的CRUD（创建、读取、更新、删除）功能。这是一个典型的前后端分离的Web应用架构，下面将详细介绍每个组成部分及其相关...
Layui的CRUD(增删改查)数据连接的使用&实例
SAME_LOVE的博客
07-14 812
InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。不论你是初级软件工程师，还是AI大模型爱好者，InsCode都能帮助你快速编写代码，运行项目。甚至在这里你还可以一键购买算力，训练大模型，开发自己的AI应用程序。总的来说，InsCode 是一个功能强大、易于使用的条码识别解决方案，可以满足用户在各种场景中对条码数据处理的需求。不论是在线营销、零售业、物流还是其他行业，InsCode 都能提供准确、高效的条码识别服务。
利用layui框架实现数据的显示，增删改查等一系列操作.zip
11-10
根据利用layui的框架原理实现数据表格与数据库的显示、导入、导出、增删改查等一系列操作，从而实现最终的目的需求。
LayUI框架示例整合
06-21
自己写的前端LayUI框架示例整合，适合小白学习（大神勿喷。谢谢）
layui的CRUD案例
a747096314的博客
07-27 847
用layui来实现一个简单的二级权限和增删改查案列 利用layui提供的组件（table , layer , form，tree）来进行开发 写一个简单的登录界面 根据用户的ID来 获取用户所对应的权限 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodin...
使用layui前端框架注意事项（对数据进行CRUD操作）
LIHUI_A的博客
07-17 686
使用layui前端框架注意事项（对数据进行CRUD操作） 导入相应的依赖包，初始化layui容器 <script> //一般直接写在一个js文件中,使用时加载相应的模块即可， //值得注意的是若你已经导入了引入好layer.js后，可以不用再容器中去加载layer模块。 layui.use(['layer', 'form', 'table'], function () { //加载模块 var form = layui.form;
Strust2 + Layui 实现CURD
qq_43059674的博客
06-29 1063
数据库 Dao类 /** *StrutsClassDao * @author 20190313 * */ public class StrutsClassDao extends JsonBaseDao{ /** *查询 * @param paMap * @param pageBean * @return * @throws Exception */ pub...
tp5&&layui
Cym_summer的博客
09-08 2503
 写这篇文章就是想记录近一周学习的结果！希望对刚入门的php爱好者有帮助！ 1、tp5.0安装去官网就好了！ 2、layui，我不知道各位有没有接触过，但是我感觉这是一个非常棒的ui框架！链接地址： 点击打开链接 ------------------------------------------------------------------------------------------...
layui增删改查
weixin_44212808的博客
09-21 1727
增加 编辑 删除 搜索 引入css样式和js <link rel="stylesheet" href="css/layui.css" media="all"> <script src="layui.js"></script> <div class="layui-btn-group demoTable"> <button t...
Layui(4) 增删改查 完整案例
热门推荐
郑清
12-24 3万+
分享一下最近花了2天时间来做的一个layui前端的CURD，先来看看效果是不是自己想要的吧... 【代码放最后了】 因为每天还要上课，所以虽然花了2天时间来弄，但实际上写的时间比较少，有些功能做的不是很好，还请大佬见谅 可参考layui官方开发文档：https://www.layui.com/doc/ 以及在线示例：https://www.layui.com/demo/ lay...
LayUI增删改查
liaozhixiangjava的博客
07-15 414
添加（增加）数据使得系统能够接收新的信息，删除数据可使系统清理不必要或过期的数据，修改数据使系统能够更新或纠正错误的信息，查询数据则用于检索和获取所需的信息。例如，用户可以使用创建操作添加新的内容，使用读取操作获取所需的信息，使用更新操作修改数据，使用删除操作删除不需要的数据。通过增删改查操作，用户可以在界面上执行相应的操作，如添加新的记录、删除现有记录、修改记录的值，以及根据特定的条件查询数据。通过更新操作，可以更改数据存储中现有记录或对象的属性或值，从而实现数据的更新和修正。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值