目录

前言

 一、前端静态模板 

二、用户管理后台代码

查看表（MySQL数据库）

表结构：

 实体类

 Dao方法(UserDao)：

查询

增加

删除

修改

测试后台dao方法(Junit)

 UserDaoTest:

查询

增加

修改

删除

web

三、用户管理前台代码

UserManage.jsp页面

 userManage.js

 用户管理界面效果

增加

 编辑和修改

修改运行效果：

删除效果：

前言

本篇我们将使用LayUI界面实现用户的增删改查

 一、前端静态模板 

首先，我们进入LayUI官网找相对应的模板，点击查看代码

 新建一个 userManage.jsp ，把源代码直接copy到我们的项目界面中：

 

然后再找个表单复制源代码：

 接着增加一个提交按钮：

userManage.jsp 成效：

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







  
    
      用户名：
      
        
      
      查找
    
  

 

 

              
          


 
 

运行效果：

二、用户管理后台代码

查看表（MySQL数据库）

t_oa_user表：

有用户信息，就不给大家看他们的了，我就展示我的。

表结构：

 

要查询出用户信息及对应的角色

SQL语句：

select * 
,(case rid 
when 1 then '管理员'
when 2 then '发起者'
when 3 then '审批者'
when 4 then '参与者'
when 5 then '会议室管理员 '
else '其他' end
)roleName
from 
t_oa_user

查询结果：

 实体类

User：

package com.oyang.entity;

public class User {
    private Long id;

    private String name;

    private String loginName;

    private String pwd;

    private Long rid;

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getLoginName() {
		return loginName;
	}

	public void setLoginName(String loginName) {
		this.loginName = loginName;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

	public Long getRid() {
		return rid;
	}

	public void setRid(Long rid) {
		this.rid = rid;
	}

	public User() {
		super();
		// TODO Auto-generated constructor stub
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";
	}
    
    
}

 Dao方法(UserDao)：

查询

	//查询用户信息及对应的角色，角色是通过case when得来的
	public List> list(User user,PageBean pageBean) throws Exception{
		String sql="select * rn" + 
				",(case rid rn" + 
				"when 1 then '管理员' rn" + 
				"when 2 then '发起者' rn" + 
				"when 3 then '审批者' rn" + 
				"when 4 then '参与者' rn" + 
				"when 5 then '会议室管理员 ' rn" + 
				"else '其他' end rn" + 
				") roleName rn" + 
				"from rn" + 
				"t_oa_user where 1=1 ";
		String name = user.getName();
		if(StringUtils.isNotBlank(name)){
			sql += " and name like '%"+name+"'%";
		}
		
//		当实体类的属性完全包含数据库查询出来的列段的时候使用
//		super.executeQuery(sql, clz, pageBean);
//		返回List>,对应的是联表查询，单个实体类对象不完全包含查询的列段
		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[] {"i d"});
	}

修改

	//修改
	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方法(Junit)

 UserDaoTest: 查询

package com.oyang.dao;

import static org.junit.Assert.*;

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

import org.junit.After;
import org.junit.Before;
import org.junit.Test;

import com.oyang.entity.User;
import com.oyang.util.PageBean;

public class UserDaoTest {
	UserDao ud=new UserDao();
	@Before
	public void setUp() throws Exception {
	}

	@After
	public void tearDown() throws Exception {
	}

	@Test
	public void testList() {
		User user=new User();
		PageBean pageBean =new PageBean();
		try {
			List> list = ud.list(user, pageBean);
			for (Map map : list) {
				System.out.println(map);
			}
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
}

增加

	@Test
	public void testAdd() {
		User user=new User();
		user.setName("oy");
		user.setLoginName("oyx");
		user.setPwd("123");
		try {
			ud.add(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
}

修改

    @Test
	public void testEdit() {
		User user=new User();
		user.setName("欧阳");
		user.setLoginName("oyangx");
		user.setPwd("123");
		user.setId(14L);
		try {
			ud.edit(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

删除

    @Test
	public void testDel() {
		User user=new User();
		user.setId(14L);
		try {
			ud.del(user);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

web

UserAction：

package com.oyang.web;

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

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

import com.oyang.dao.UserDao;
import com.oyang.entity.User;
import com.oyang.framework.ActionSupport;
import com.oyang.framework.ModelDriver;
import com.oyang.util.PageBean;
import com.oyang.util.R;
import com.oyang.util.ResponseUtil;


public class UserAction extends ActionSupport implements ModelDriver{
	
	private User user=new User();
	private UserDao udao=new UserDao();

	//用户登录	
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		try {
			User u = udao.login(user);
			//通过账户名密码查到了用户记录
		if(u!=null) {
			
			ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
		}
		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 block
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	
	//用户查询
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean=new PageBean();
			pageBean.setRequest(req);
			List> users = udao.list(user, pageBean);
			//注意：LayUI中数据表格的格式
			ResponseUtil.writeJson(resp, R.ok(0, "用户数据查询成功",pageBean.getTotal(),user));
			
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.error(0, "用户查询失败"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	
	//用户增加
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是sql语句执行的影响行数
			int rs = udao.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.error(0, "用户数据新增失败"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
		}
		return null;
	}
		
	//用户删除
	public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是sql语句执行的影响行数
			int rs = udao.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.error(0, "用户数据删除失败"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
		}
		return null;
	}
		
	//用户修改
	public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是sql语句执行的影响行数
			int rs = udao.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.error(0, "用户修改新增失败"));
			} catch (Exception e1) {
				// TODO Auto-generated catch block
				e1.printStackTrace();
			}
		}
		return null;
	}
			
	
	
	@Override
	public User getModel() {
		// TODO Auto-generated method stub
		return user;
	}

}

三、用户管理前台代码

UserManage.jsp页面

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







	
	
	  
	    用户名：
	    
	      
	    
	  
	  
	  
	    
	      
	      	
	      	查询
	      
	      新增
	    
	  
	  
	
	
	
	
	
	

关于UserManage页面的js代码，小编把js代码封装成js文件，直接在页面中导入js文件即可

 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',         //指定原始表格元素选择器（推荐id选择器）
//        url: 'user.action?methodName=list',     //请求地址
        height:500,         //自定义高度
        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':'list',
        	'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表单数据
    	   //
           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();
       },
     
    });
}

 用户管理界面效果

增加

界面：

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










    

        
        
            用户名称
            
                
            
        
        
            用户角色
            
                
                    ---请选择---
                    管理员
                    发起者
                    审批者
                    参与者
                    会议管理员
                
            
        
        
            登录账号
            
                
            
        
        
            登录密码
            
                
            
        
    

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:zs} || null||{}
	     $('#name').attr('readonly','readonly');
	}
}

function getData(){
//	 

	//取user from中的值
    return form.val('user');
}

增加界面效果：

执行结果：

 编辑和修改

//在页面中的中必须配置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{

		}
	});
 
 
修改运行效果： 
 
修改前绑值：
 
 
 
 
 修改信息：
 
 
 
 
修改后：
 
 
 
 
删除效果： 
 
 
 
删除后：
 
 
 
 
可以看见，数据也变回了11条。
 
 
 
  OK，今日的分享就到此结束啦，如果对个位看官有帮助的话可以留下免费的赞哦(收藏或关注也行),如果文章中有什么问题或不足以及需要改正的地方可以私信博主，博主会做出改正的。个位看官，小陽在此跟大家说拜拜啦！
 

转载请注明：文章转载自 www.mshxw.com
本文地址：https://www.mshxw.com/it/1023272.html

   上一篇  Java基础-流
 
   下一篇  CMake指定OpenCV版本
  



Java相关栏目本月热门文章

  
1【Linux驱动开发】设备树详解（二）设备树语法详解
  
2别跟客户扯细节
  
3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
  
4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
  
5【分页】常见两种SpringBoot项目中分页技巧
  
6一文带你搞懂OAuth2.0
  
7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
  
8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
  
9JavaSE - 封装、static成员和内部类
  
10树莓派mjpg-streamer实现监控及拍照功能调试
  
11用c++写一个蓝屏代码
  
12从JDK8源码中看ArrayList和LinkedList的区别
  
13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
  
14在openwrt使用C语言增加ubus接口（包含C uci操作）
  
15Spring 解决循环依赖
  
16SpringMVC——基于MVC架构的Spring框架
  
17Andy‘s First Dictionary C++ STL set应用
  
18动态内存管理
  
19我的创作纪念日
  
20Docker自定义镜像-Dockerfile




热门相关搜索



路由器设置
木托盘
宝塔面板
儿童python教程
心情低落
朋友圈
vim
双一流学科
专升本
我的学校
日记学校
西点培训学校
汽修学校
情书
化妆学校
塔沟武校
异形模板
西南大学排名
最精辟人生短句
6步教你追回被骗的钱
南昌大学排名
清朝十二帝
北京印刷学院排名
北方工业大学排名
北京航空航天大学排名
首都经济贸易大学排名
中国传媒大学排名
首都师范大学排名
中国地质大学(北京)排名
北京信息科技大学排名
中央民族大学排名
北京舞蹈学院排名
北京电影学院排名
中国戏曲学院排名
河北政法职业学院排名
河北经贸大学排名
天津中德应用技术大学排名
天津医学高等专科学校排名
天津美术学院排名
天津音乐学院排名
天津工业大学排名
北京工业大学耿丹学院排名
北京警察学院排名
天津科技大学排名
北京邮电大学(宏福校区)排名
北京网络职业学院排名
北京大学医学部排名
河北科技大学排名
河北地质大学排名
河北体育学院排名






学习工具
代数计算器
三角函数
解析几何
立体几何


知识解答
教育知识
百科知识
生活知识
常识知识


写作必备
作文大全
作文素材
句子大全

实用范文


关于我们
关于我们
联系我们
网站地图


 
名师互学网交流群


名师互学网客服





名师互学网 版权所有 (c)2021-2022      ICP备案号：晋ICP备2021003244-6号
 




关于我们
文章归档
网站地图
联系我们
版权所有 (c)2021-2022 MSHXW.COM
ICP备案号：晋ICP备2021003244-6号