ssm crud

落日映苍穹つ 2022-02-28 14:16 509阅读 0赞

阅读前提：有一定的基础，这篇提供给新手人员学习参考，希望对你有帮助。

ssm的crud,最终结果如下，虽然结果对于外行人看起来很简单，但实际对于内行人却需要写大量的代码。这里博主不详细的说明步骤了。步骤太长...如看不懂，请再自行学习研究...

### csdn代码下载链接：[https://download.csdn.net/download/qq\_30764991/11061001][https_download.csdn.net_download_qq_30764991_11061001] ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70][]

整个项目结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 1][]

具体代码量太多太多，博主这里不一一写出来了。

复制粘贴前端代码提供参考：index.jsp中的代码提供参考。代码上传到csdn中，请参考下载，如有问题的请留言博主。

<%@ page language="java" contentType="text/html; charset=utf-8"
        pageEncoding="utf-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <!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">
    <title>员工列表</title>
    <%
    	pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    
    
    <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script>
    
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    	
    	
    	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    	  <div class="modal-dialog" role="document">
    	    <div class="modal-content">
    	      <div class="modal-header">
    	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    	        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
    	      </div>
    	      <div class="modal-body">
    	        <form class="form-horizontal">
    			  <div class="form-group">
    			    <label class="col-sm-2 control-label">empName</label>
    			    <div class="col-sm-10">
    			      <input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
    			      <span class="help-block"></span>
    			    </div>
    			  </div>
    			 <div class="form-group">
    			    <label class="col-sm-2 control-label">email</label>
    			    <div class="col-sm-10">
    			      <input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
    			      <span class="help-block"></span>
    			    </div>
    			  </div>
    			 <div class="form-group">
    			    <label class="col-sm-2 control-label">gender</label>
    			    <div class="col-sm-10">
    			      <label class="radio-inline">
    					  <input type="radio" name="gender" id="gender1_add_input" value="M" checked> 男
    				  </label>
    				  <label class="radio-inline">
    					  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
    			      </label>
    			    </div>
    			  </div>
    
    			   <div class="form-group">
    			   	 <label class="col-sm-2 control-label">deptName</label>
    			   	 <div class="col-sm-4">
    			    	<select class="form-control" name="dId" id="dept_add_select">
    
    					</select>
    			   	 </div>
    			  </div>
    			</form>
    	      </div>
    	      <div class="modal-footer">
    	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    	        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
    	      </div>
    	    </div>
    	  </div>
    	</div>
    	
    	
    	
    	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    	  <div class="modal-dialog" role="document">
    	    <div class="modal-content">
    	      <div class="modal-header">
    	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    	        <h4 class="modal-title">员工修改</h4>
    	      </div>
    	      <div class="modal-body">
    	        <form class="form-horizontal">
    			  <div class="form-group">
    			    <label class="col-sm-2 control-label">empName</label>
    			    <div class="col-sm-10">
    			        <p class="form-control-static" id="empName_update_static"></p>
    			    </div>
    			  </div>
    			 <div class="form-group">
    			    <label class="col-sm-2 control-label">email</label>
    			    <div class="col-sm-10">
    			      <input type="text" name="email" class="form-control" id="email_update_input" placeholder="email@atguigu.com">
    			      <span class="help-block"></span>
    			    </div>
    			  </div>
    			 <div class="form-group">
    			    <label class="col-sm-2 control-label">gender</label>
    			    <div class="col-sm-10">
    			      <label class="radio-inline">
    					  <input type="radio" name="gender" id="gender1_update_input" value="M" checked> 男
    				  </label>
    				  <label class="radio-inline">
    					  <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
    			      </label>
    			    </div>
    			  </div>
    
    			   <div class="form-group">
    			   	 <label class="col-sm-2 control-label">deptName</label>
    			   	 <div class="col-sm-4">
    			    	<select class="form-control" name="dId">
    
    					</select>
    			   	 </div>
    			  </div>
    			</form>
    	      </div>
    	      <div class="modal-footer">
    	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    	        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
    	      </div>
    	    </div>
    	  </div>
    	</div>
    	
    	
    	<div class="container">
    		
    		<div class="row">
    			<div class="col-md-12">
    				<h1>从放弃到开始-CRUD简单管理系统，加油，相信自己！</h1>
    			</div>
    		</div>
    		
    		<div class="row">
    			<div class="col-md-4 col-md-offset-8">
    				<button type="button" class="btn btn-primary btn-sm" id="emp_add_modal_btn">新增</button>
    				<button type="button" class="btn btn-danger btn-sm" id="emp_delete_all_btn">删除</button>
    			</div>
    		</div>
    		
    		<div class="row">
    			<div class=col-md-12>
    				<table class="table table-hover" id="emps_table">
    					<thead>
    						<tr>
    							<th>
    								<input type="checkbox" id="check_all" />
    							</th>
    							<th>#</th>
    							<th>empName</th>
    							<th>gender</th>
    							<th>email</th>
    							<th>department</th>
    							<th>操作</th>
    						</tr>
    					</thead>
    					<tbody>
    
    					</tbody>
    				</table>
    			</div>
    		</div>
    		
    		<div class="row">
    			
    			<div id="page_info_area" class="col-md-6">
    
    			</div>
    
    			
    			<div id="page_nav_area" class="col-md-6">
    
    			</div>
    		</div>
    	</div>
    	<script type="text/javascript">
    
    	var totalRecord, currentPage;
    	//1、页面加载完成以后，直接去发送一个 ajax 请求，要到分页数据,$表示页面加载完再执行这个函数
    	$(function(){
    		to_page(1);
    	});
    
    	function to_page(pn) {
    		$.ajax({
    			url:"${APP_PATH}/emps",
    			data:"pn="+pn,
    			type:"GET",
    			success:function(result){
    				//解析数据并显示员工数据
    				build_emps_table(result);
    				//显示分页信息
    				build_page_info(result);
    				//显示分页条数据
    				build_page_nav(result);
    			}
    		});
    	}
    
    	//显示员工信息
    	function build_emps_table(result) {
    		//清空数据
    		$("#emps_table tbody").empty();
    
    		var emps = result.extend.pageInfo.list;
    
    		$.each(emps, function(index, item) {
    			var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
    			var empIdTd = $("<td></td>").append(item.empId);
    			var empNameTd = $("<td></td>").append(item.empName);
    
    			var genderTd = $("<td></td>").append(item.gender=='M'?'男':'女');
    			var emailTd = $("<td></td>").append(item.email);
    			var deptNameTd = $("<td></td>").append(item.department.deptName);
    			/*
    			<button type="button" class="">新增</button>
    			<button type="button" class="btn btn-danger btn-sm">删除</button>
    			<span class="" aria-hidden="true"></span>
    			*/
    			var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn").append($("<span></span>"))
    			.addClass("glyphicon glyphicon-pencil").append("编辑");
    			//为编辑按钮添加自定义属性，来表示当前员工id
    			editBtn.attr("edit-id", item.empId);
    
    
    			var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn").append($("<span></span>"))
    			.addClass("glyphicon glyphicon-trash").append("删除");
    			delBtn.attr("del-id", item.empId);
    
    			var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
    
    			$("<tr></tr>").append(checkBoxTd)
    			.append(empIdTd)
    			.append(empNameTd)
    			.append(genderTd)
    			.append(emailTd)
    			.append(deptNameTd)
    			.append(btnTd)
    			.appendTo("#emps_table tbody");
    
    		});
    	}
    
    	//显示分页信息
    	function build_page_info(result) {
    		//清空数据
    		$("#page_info_area").empty();
    		//alert("hello");
    		$("#page_info_area").append("当前 " +
    				result.extend.pageInfo.pageNum + " 页，总 " +
    				result.extend.pageInfo.pages + " 页，总 " + 	
    				result.extend.pageInfo.total + " 条记录");
    		totalRecord = result.extend.pageInfo.total;
    		currentPage = result.extend.pageInfo.pageNum;
    	}
    
    	//显示分页条，点击分页要有动作
    	function build_page_nav(result) {
    		//清空数据
    		$("#page_nav_area").empty();
    		//page_nav_area
    		var ul = $("<ul></ul>").addClass("pagination");
    		var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    		var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
    		if(result.extend.pageInfo.hasPreviousPage == false) {
    			firstPageLi.addClass("disabled");
    			prePageLi.addClass("disabled");
    		} else {
    			//为元素添加点击翻页事件
    			//添加首页、前一页的点击
    			firstPageLi.click(function() {
    				to_page(1);
    			});
    
    			prePageLi.click(function() {
    				to_page(result.extend.pageInfo.pageNum - 1);
    			});
    		}
    
    
    		var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
    		var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
    
    		if(result.extend.pageInfo.hasNextPage == false) {
    			nextPageLi.addClass("disabled");
    			lastPageLi.addClass("disabled");
    		} else {
    			//添加末页、下一页的点击
    			nextPageLi.click(function() {
    				to_page(result.extend.pageInfo.pageNum + 1);
    			});
    
    			lastPageLi.click(function() {
    				to_page(result.extend.pageInfo.pages);
    			});
    		}
    
    
    		
    		ul.append(firstPageLi).append(prePageLi);
    
    		$.each(result.extend.pageInfo.navigatepageNums,function(index, item){
    			var numLi = $("<li></li>").append($("<a></a>").append(item));
    			if(result.extend.pageInfo.pageNum == item) {
    				numLi.addClass("active");
    			}
    
    			numLi.click(function(){
    				to_page(item);
    			});
    
    			ul.append(numLi);
    		});
    		ul.append(nextPageLi).append(lastPageLi);
    
    		var navEle = $("<nav></nav>").append(ul);
    		navEle.appendTo("#page_nav_area");
    	}
    	//清空
    	function reset_form(ele) {
    		$(ele)[0].reset();
    		$(ele).find("*").removeClass("has-error has-success");
    		$(ele).find(".help-block").text("");
    	}
    	//点击新增按钮弹出模态框
    	$("#emp_add_modal_btn").click(function() {
    		//清除表单数据（表单完整重置（表单数据，表单样式））
    		reset_form("#empAddModal form");
    
    		//发送 ajax 请求， 查出部门信息，显示在下拉框中
    		getDepts("#empAddModal select");
    
    		//弹出模态框
    		$("#empAddModal").modal({
    			backdrop:"static"
    		});
    	});
    	//查出所有部门信息
    	function getDepts(ele) {
    		$(ele).empty();
    		$.ajax({
    			url:"${APP_PATH}/depts",
    			type:"GET",
    			success:function(result) {
    				//console.log(result);
    				//{"code":100,"msg":"处理成功!","extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}
    				//$("#dept_add_select")
    				//$("#empAddModal select").append("")
    				//显示部门到下拉列表中
    				$.each(result.extend.depts,function() {
    					var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
    					optionEle.appendTo(ele);
    				});
    			}
    		});
    	}
    	//校验表单数据
    	function validate_add_form() {
    		//拿到要校验的数据，使用正则表达式
    		var empName = $("#empName_add_input").val();
    		var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
    		if(!regName.test(empName)) {
    			show_validate_msg("#empName_add_input", "error", "用户名可以是 2-5 位中文或者6-16位英文和数字、-、_、的组合");
    			return false;
    		}else {
    			show_validate_msg("#empName_add_input", "success", "");
    		}
    
    		var email = $("#email_add_input").val();
    		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    		if(!regEmail.test(email)) {
    			//alert("邮箱格式不正确");
    			show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
    		/* 	$("#email_add_input").parent().addClass("has-error");
    			$("#email_add_input").next("span").text("邮箱格式不正确"); */
    			return false;
    		} else {
    			show_validate_msg("#email_add_input", "success", "");
    			/* $("#email_add_input").parent().addClass("has-success");
    			$("#email_add_input").next("span").text(""); */
    		}
    
    		return true;
    	}
    
    	function show_validate_msg(ele, status, msg) {
    		//清除状态
    		$(ele).parent().removeClass("has-success has-error");
    		$(ele).next("span").text("");
    		if("success"==status) {
    			$(ele).parent().addClass("has-success");
    			$(ele).next("span").text(msg);
    		}else if("error"==status){
    			//alert("用户名可以是 2-5 位中文或者6-16位英文和数字、-、_、的组合");
    			$(ele).parent().addClass("has-error");
    			$(ele).next("span").text(msg);
    		}
    	}
    	//校验用户名是否可用
    	$("#empName_add_input").change(function() {
    		var empName = this.value;
    		//发送ajax请求校验用户名是否可用
    		$.ajax({
    			url:"${APP_PATH}/checkuser",
    			data:"empName="+empName,
    			type:"POST",
    			success:function(result) {
    				if(result.code==100) {
    					show_validate_msg("#empName_add_input","success",
    							"用户名可用");
    					$("#emp_save_btn").attr("ajax-va", "success");
    				}else {
    					show_validate_msg("#empName_add_input","error",
    							result.extend.va_msg);
    					$("#emp_save_btn").attr("ajax-va", "error");
    				}
    			}
    		});
    	});
    
    	
    	//点击保存，保存员工
    	$("#emp_save_btn").click(function(){
    		//1、先对要提交给服务器的数据进行校验
    		 /*if(!validate_add_form()) {
    			return false;
    		} */
    		//判断之前的ajax请求是否成功
    		 if($(this).attr("ajax-va") == "error") {
    				return false;
    		}
    
    		//1、模态框中填写的表单数据提交给服务器进行保存
    		//2、发送 Ajax 请求保存员工
    
    		 $.ajax({
    			url:"${APP_PATH}/emp",
    			type:"POST",
    			data:$("#empAddModal form").serialize(),
    			success:function(result) {
    				if(result.code == 100) {
    					//alert(result.msg);
    					//1. 关闭模态框
    					$("#empAddModal").modal("hide");
    					//2.来到最后一页
    					//发送 ajax 显示最后一页的数据
    					to_page(totalRecord);
    				} 
    				else {
    					//显示失败信息
    					//console.log(result);
    
    					//有哪个字段错误信息就返回哪一个
    					if(undefined != result.extend.errorFields.email) {
    						show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
    					}
    					if(undefined != result.extend.errorFields.empName) {
    						show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
    					}
    				}
    
    			}
    		});
    	});
    
    	//jquery新版没有live。使用on进行替代
    	$(document).on("click", ".edit_btn",function() {
    		//alert("edit");
    		//弹出模态框
    		//查询部门信息
    		 getDepts("#empUpdateModal select");
    		//alert($(this).attr("edit-id"));
    		//查处员工信息。
    		getEmp($(this).attr("edit-id"));
    
    		//把员工 的 id 传递给模态框的更新按钮
    		$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
    		$("#empUpdateModal").modal({
    			backdrop:"static"
    		}); 
    
    	});
    	//获取员工
    	function getEmp(id) {
    		$.ajax({
    			url:"${APP_PATH}/emp/"+id,
    			type: "GET",
    			success: function(result) {
    				var empData = result.extend.emp;
    				$("#empName_update_static").text(empData.empName);
    				$("#email_update_input").val(empData.email);
    				$("#empUpdateModal input[name=gender]").val([empData.gender]);
    				$("#empUpdateModal select").val([empData.dId]);
    			}
    		});
    	}
    	
    	//点击更新，更新员工信息
    	$("#emp_update_btn").click(function() {
    		//验证邮箱是否合法
    		//1、校验邮箱信息
    		var email = $("#email_update_input").val();
    		var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
    		if(!regEmail.test(email)) {
    			show_validate_msg("#email_update_input", "error", "邮箱格式不正确");
    			return false;
    		} else {
    			show_validate_msg("#email_update_input", "success", "");
    		}
    
    		//发送 ajax 请求保存更新员工数据
    		$.ajax({
    			url:"${APP_PATH}/emp/" + $(this).attr("edit-id"),
    			type: "PUT",
    			data:$("#empUpdateModal form").serialize(),
    			success:function(result) {
    				//alert(result.msg);
    				$("#empUpdateModal").modal("hide");
    				to_page(currentPage);
    			}
    		});
    	});
    	
    	//单个删除
    	$(document).on("click",".delete_btn", function(){
    		//1、弹出确认删除对话框
    		var empName = $(this).parents("tr").find("td:eq(2)").text();
    		var empId = $(this).attr("del-id");
    		if(confirm("确认删除【" + empName + "】吗?")) {
    			//确认，发送 Ajax
    			$.ajax({
    				url: "${APP_PATH}/emp/" + empId,
    				type: "DELETE",
    				success: function(result) {
    					alert(result.msg);
    					//回到本页
    					to_page(currentPage);
    				}
    			});
    		}
    	});
    	//完成全选全不选
    	$("#check_all").click(function() {
    		//prop修改和读取原生dom属性的值
    		$(".check_item").prop("checked", $(this).prop("checked"));
    	});
    
    	$(document).on("click",".check_item", function() {
    		var flag = $(".check_item:checked").length == $(".check_item").length;
    		$("#check_all").prop("checked", flag);
    	});
    	
    	//点击全部删除，就批量删除
    	$("#emp_delete_all_btn").click(function() {
    		var empNames = "";
    		var del_idstr = "";
    		$.each($(".check_item:checked"), function() {
    			empNames += $(this).parents("tr").find("td:eq(2)").text() + ",";
    			del_idstr += $(this).parents("tr").find("td:eq(1)").text() + "-";
    		});
    		empNames = empNames.substring(0, empNames.length - 1);
    		del_idstr = del_idstr.substring(0, del_idstr.length - 1);
    		if(confirm("确认删除【" + empNames + "】吗?")) {
    			$.ajax({
    				url:"${APP_PATH}/emp/" + del_idstr,
    				type:"DELETE",
    				success:function(result) {
    					alert(result.msg);
    					to_page(currentPage);
    				}
    			});
    		}
    	});
    	</script>
    </body>
    </html>

[https_download.csdn.net_download_qq_30764991_11061001]: https://download.csdn.net/download/qq_30764991/11061001
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70]: /images/20220228/35c06f8b050d47149807c22cdea53d43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70 1]: /images/20220228/8d302e4225874aa1adc0bedc9221f91b.png