Layui框架实现用户系统-----增删改查

前言

在我前几篇的文章中，已经如何实现属性菜单及选项卡的使用，接下来就带大家去实现在layui框架界面实现增删改查(针对用户进行)

一，相关的配置准备

了解layui官网的框架，方便在后面使用并提高效率， 在Laui旧官网的复制相对应的展示的后台界面 

1.1 在页面前端显示的总的数据 ,需要更加规范，所以我们在数据库中就已经编写相对应的字段名转文字显示，也就是将表中的name字段内容显示为中文

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

 如上图所示在数据展示的时候，就知道它所的职位与权限是什么。

1.1，编写Userdao，来进行具体数据需要什么操作，到时在servlet调用相对应的方法即可，

会发现在查询语句中正是我们在数据库编译的sql语句

/**
  		 * 带模糊查询方法
  		 *
  		 **/
  		public List> userRole(User user, PageBean pageBean) throws Exception {
  			String sql = "SELECT\r\n" + 
  					"	u.*,\r\n" + 
  					"	(\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" + 
  					"	'会议管理员' ELSE '其他' \r\n" + 
  					"END \r\n" + 
  					"	) rname \r\n" + 
  					"FROM\r\n" + 
  					"	`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) 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.1 后端servlet编写，这时候要用到一个R工具类，要用Layui框架就必须遵循它的回显数据原则，R这个工具类包含了显现数据格式化，这样在后端就不要参数要赋值的情况

R工具类：

package com.zking.util;
 
import java.util.HashMap;
 
/**
 * 
 * @author 兵
 *
 */
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;
	}
}

servlet代码：

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);
			 //继承中ModelDriver已经封装依懒mvc中req接受前端传来的值，当前结果保存到该方法中
			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);
				   
				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();
			}
			
			}
	//注册
		public void register(HttpServletRequest req, HttpServletResponse resp) {
			try {
				int register = userdao.register(user);
				//判断前端的值大于0 证明有值
				if (register > 0) {
					//回显ok 代表成功
					ResponseUtil.writeJson(resp, "OK");
				} else {
					//回显失败 代表失败
					ResponseUtil.writeJson(resp, "NO");
				}
	 
			} catch (Exception e) {
				e.printStackTrace();
			}
			
		}

	
	
	@Override
	public User getModel() {
		return user;
	}

}

显然代码发现，在实现后端servlet的时候，我们使用R工具类，来帮助我们来回显前端需要的数据

前端jsp代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<%@include file="/common/header.jsp"%>








	

		

			
layout
				demo
			
			

				

		
					 操作
				
					

						

							${user.name }
						
				
						

									退出
						
 
				
					
				
			
		




		

			

				


				
			
		

		

			

				

					
网站设置
				
				

					
内容1
				
			
		

		

			
		
	

2.2 我们已经将jsp界面代码与实现的代码实现分离封装js这样我们在jsp引入即可(是Layui的官网copy相对应的代码)需要根据自身代码修改一点内容

封装的js代码：

//将所需要的模块定义在此  用的时候赋值即可
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;

 $.ajax({
	 url:"permission.action?methodName=menus",
	dataType:'json',	
	success:function(data){
		console.log(data);
		var htmlStr='';
		$.each(data,function(i,n){
			//拼接一级菜单 开始标签
			htmlStr +='
';
			htmlStr +=' '+n.text+'';
			if(n.hasChildren){//判断是否有子标签
				var children=n.children//得到子标签的列表
				 htmlStr +='
';//拼接子标签 开始标签
		     
				$.each(children,function(index,nodel){//遍历子标签 
					 htmlStr += '
'+nodel.text+'
'
					 	console.log(nodel.attributes.self.url)
				})
				     htmlStr +='
';//拼接子标签 结束标签
			}
			
			htmlStr +='
';	//拼接一级菜单 结束标签
		})
		$("#menu").html(htmlStr);
		element.render('menu');//渲染
		

	}
 })
  
});

//给子菜单添加函数接口  点击菜单生成相对应的选项卡
function opentab(title,content,id){//参数是二级菜单
   var $nodel=$('li[lay-id="'+id+'"]')
	
	if($nodel.length==0){//当选项卡的长度为0时，不再打开重复的选项卡
		element.tabAdd('demo', {
	        title: title//在选项卡展示的标题
	        ,content: " " //二级菜单text内容
	        ,id: id //二级菜单id
	      })
  }
  element.tabChange("demo",id);//点击左侧二级菜单右侧选项卡同步选上
	
}

2.3 在我们实现增加与修改，需要弹出一个页面来实现将数据显示前端(共用一个页面)，所以我们来编写这个页面

增加修改jsp页面代码:

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










    

        
        

            用户名称
            

                
            
        
        

            用户角色
            

                
                    ---请选择---
                    管理员
                    发起者
                    审批者
                    参与者
                    会议管理员
                
            
        
        

            登录账号
            

                
            
        
        

            登录密码
            

                
            
        
    

在进行修改的时候我们需要赋值给修改页面赋值内容，所以再编写一个Edit修改js来进行页面赋值内容，在jsp引入Edit引入。

Edit 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(){
    return form.val('user');
}

最后增删改查运行结果：