Layui之CRUD(增删改查)

目录:

1.后台增删改查方法

2.R工具类的使用

3.前端代码的实现


为什么要用增删改查:

Layui是一个轻量级的前端UI库,被广泛应用于Web开发中。在开发过程中,经常需要对数据进行增删改查操作,这是因为数据是应用程序的核心内容,而增删改查是对数据进行基本的操作。

以下是几个原因解释为什么在Layui中使用增删改查操作:

  1. 数据管理和交互:对于大部分Web应用来说,用户需要与数据进行交互,包括增加新数据、删除不需要的数据、修改已有的数据以及查询获取所需的数据。增删改查操作是直接操作数据的方式,能够满足用户的需求。

  2. 数据展示与操作:Web应用通常需要以表格、列表等形式展示数据,而增删改查操作则是管理和操作这些数据的重要手段。通过增删改查操作,用户可以方便地管理和编辑数据,从而提升用户体验和操作效率。

  3. 安全性和数据完整性:通过对数据的增删改查操作,可以增强数据的安全性和完整性。例如,可以限制用户对数据的访问和操作权限,避免未经授权的人员对数据进行操作。

  4. 数据持久化:在Web开发中,数据通常需要永久保存并持久化到数据库,以便长期使用和管理。增删改查操作是对数据库中数据进行操作的方式,通过这些操作可以实现数据的持久化和管理。

  5. 总之,使用增删改查操作可以方便地管理、操作和展示数据,从而提供良好的用户体验和数据管理能力。Layui作为一个前端UI库,提供了方便易用的UI组件和交互方式,使得开发人员可以更快地实现增删改查功能。

1.后台增删改查方法:

查询语句:

SELECT u.*,
(CASE 
	WHEN 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

dao方法:

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;

public class UserDao extends BaseDao {

	public List list(User user, PageBean pageBean) throws Exception {
         String sql="select * from t_oa_user where 1=1";
		return super.executeQuery(sql, User.class, pageBean);
		
	}
	
	public User login(User user) throws Exception {
        String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"'  and pwd ='"+user.getPwd()+"'  ";
		 List l = super.executeQuery(sql, User.class, null);
		 if(l!=null && l.size()==1) {
			 return l.get(0);
		 }
		return user;
		
	}
	/**
	 * List与List都是转成一样的json数组
	 * 插叙吧结果溴代rname
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List> userRole(User user, PageBean pageBean) throws Exception {
        String sql="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\r\n" + 
        		"FROM  t_oa_user u 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) value(?,?,?)";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
		
	}
	public int del(User user) throws Exception {
		String sql="delete from t_oa_uesr where id=?";
		return super.executeUpdate(sql, user, new String[] {"id"});
		
	}
	public int edit(User user) throws Exception {
		String sql="update  t_oa_uesr set name=?,loginName=?,pwd=? where id=?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}
	
	
//	public static void main(String[] args) throws Exception {
//		User user = new User("kk","123","123123");
//		user.setName("朱");
//         int add = new UserDao().add(user);
//			System.out.println(add);
//	}
	
	
	
}

JUnit:

package com.zking.dao;

import static org.junit.Assert.*;

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

import org.junit.Test;

import com.zking.entity.User;

public class UserDaoTest {
	private UserDao userDao =new UserDao();

	@Test
	public void testUserRole() throws Exception {
		User user = new User();
		user.setName("朱");
        List> userRole = userDao.userRole(user, null);
		for (Map u : userRole) {
			System.out.println(u);
		}
	}

	@Test
	public void testAdd() throws Exception {
		User user =new User(88, "朱俊良", "zjl", "12345", 4);
		userDao.add(user);
	}

	@Test
	public void testDel() throws Exception {
		User user =new User(88, "朱俊良", "zjl", "12345", 4);
		userDao.del(user);
	}

	@Test
	public void testEdit() throws Exception {
		User user =new User(16, "小飞机来了", "zjl", "1234567", 4);
		userDao.edit(user);
	}

}

输出结果:

Layui之CRUD(增删改查)_第1张图片

 

2.R工具类的使用:

后台查询:以前的写法:userAction(弊端:代码比较多):

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.ResponseUtil;

public class UserAction extends ActionSupport implements ModelDriver {
    
	private User user=new User();
	private UserDao userDao=new UserDao();
	
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	public void userRole(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			 List> userRole = userDao.userRole(user, pageBean);
			 Map map=new HashMap();
			 map.put("code", 0);
			 map.put("msg", "查询成功");
			 map.put("count", pageBean.getTotal());
			 map.put("date", userRole);
			ResponseUtil.writeJson(resp, map);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	@Override
	public User getModel() {
		return user;
	}

}

输出结果:

Layui之CRUD(增删改查)_第2张图片 

后台查询:现在的方法:工具类(代码较少,比较容易动懂):

 

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

输出结果:

Layui之CRUD(增删改查)_第3张图片 增删改查方法:

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;

public class UserAction extends ActionSupport implements ModelDriver {
    
	private User user=new User();
	private UserDao userDao=new UserDao();
	
	public void login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = userDao.login(user);
			ResponseUtil.writeJson(resp, u);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	public void userRole(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			 List> userRole = userDao.userRole(user, pageBean);
//			 Map map=new HashMap();
//			 map.put("code", 0);
//			 map.put("msg", "查询成功");
//			 map.put("count", pageBean.getTotal());
//			 map.put("date", userRole);
			ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), userRole));
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	public void add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			  int add = userDao.add(user );
			ResponseUtil.writeJson(resp, R.ok(0, "新增成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	public void del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			  int del = userDao.del(user );
			ResponseUtil.writeJson(resp, R.ok(0, "删除成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	public void edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			  int edit = userDao.edit(user );
			ResponseUtil.writeJson(resp, R.ok(0, "修改成功"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		
	}
	
	
	@Override
	public User getModel() {
		return user;
	}

}

 

3.前端代码的实现:

编写UserManage界面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>

 



用户管理


	
	

实现所有方法:

Layui之CRUD(增删改查)_第4张图片 

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;
		edit('编辑');
	});
	
	
});
 
//打开增加界面
function edit(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content: '/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭'],
       yes: function(index, layero){
    	   //调用子页面中提供的getData方法,快速获取子页面的form表单数据
           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();
       }
    });
 }
 
//1.初始化数据表格
function initTable(){
	    	 table.render({
	    		    elem: '#test'
	    		    ,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
	    		  });
 
	    		//在页面中的中必须配置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('/user.action',{
	    					  'methodName':'del',
	    					  'id':row.id
	    				  },function(rs){
	    					  if(rs.success){
	    		        		   //调用查询方法刷新数据
	    		        		   query();
	    		        	   }else{
	    		        		   layer.msg(rs.msg,function(){});
	    		        	   }
	    				  },'json');
	    				  layer.close(index);
	    				});
	    			}else{
 
	    			}
	    		}) 
	    	 
	    	 
	    	 
	    	 
}
//查询   
function  query() {
		table.reload('test',{
			where :{
			name:$("name").val()	
			}
		,request:{
			pageName:'page'
				,limitName:'rows'
		}
		});
     } 

 增加:

删除:

Layui之CRUD(增删改查)_第5张图片 

修改:

Layui之CRUD(增删改查)_第6张图片 

查询:

Layui之CRUD(增删改查)_第7张图片 

 

     

你可能感兴趣的:(layui,前端,javascript)