前端主要使用jQuery，Bootstrap以及Ajax，使用了Bootstrap的模态框弹框显示新增及修改页面
代码：
后端校验：
private Integer empId; //@Pattern 自定义表达式规则 @Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5}$)" ,message="用户名格式错误") private String empName; private String gender; //@Email @Pattern(regexp="(^[a-z\\d]+(\\.[a-z\\d]+)*@([\\da-z](-[\\da-z])?)+(\\.{1,2}[a-z]+)+$)" ,message="邮箱格式错误") private String email; private Integer dId;
1.外部文件的导入：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>列表显示</title> <% //key=APP_PATH value=request.getContextPath()拿到当前项目路径 pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <!-- web路径，不以/开始的相对路径找资源，以当前资源的路径为基准，经常容易出问题 以/开始的相对路径，找资源，以服务器的路径为标准（http://localhost:3306/ssm）需要加上项目名 --> <script type="text/javascript" src="${APP_PATH}/static/js/jquery-3.2.1.min.js"></script> <link rel="stylesheet" type="text/css" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script type="text/javascript" src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head>
2.新增模态框
<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">员工姓名</label> <div class="col-sm-10"> <input type="text" name="empName" class="form-control" id="empName_add_input"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="email_add_input"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_add_input" value="1" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_add_input" value="0"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">部门名</label> <div class="col-sm-4"> <!-- 部门提交部门id即可 --> <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>
3.员工编辑模态框
<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">员工姓名</label> <div class="col-sm-10"> <p class="form-control-static" id="empName_update_static"></p> </div> <div class="form-group"> <label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="text" name="email" class="form-control" id="email_update_input"> <span class="help-block"></span> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class="col-sm-10"> <label class="radio-inline"> <input type="radio" name="gender" id="gender1_update_input" value="1" checked="checked"> 男 </label> <label class="radio-inline"> <input type="radio" name="gender" id="gender2_update_input" value="0"> 女 </label> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">部门名</label> <div class="col-sm-4"> <!-- 部门提交部门id即可 --> <select class="form-control" name="dId" id="dept_update_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_update_btn">修改</button> </div> </div> </div> </div>
4.页面主体
<div class="container"> <!-- 分四行 --> <!-- 标题 --> <div class="row"> <div class="col-md-12"> <h1>SSH-CURD</h1> </div> </div> <!-- 按钮 --> <div class="row"> <!-- 占4列，偏移8列 --> <div class="col-md-4 col-md-offset-8"> <button class="btn btn-primary" id="emp_add_modal_btn">新增</button> <button class="btn btn-danger" 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>deptName</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <!-- 显示分页信息 --> <div class="row"> <!-- 分页文字信息 --> <div class="col-md-6" id="page_info_area"></div> <!-- 分页条 信息--> <div class="col-md-6" id="page_nav_area"></div> </div> </div> </body>
5.通过ajax显示页面信息
<script type="text/javascript"> var totalRecord;//总记录数 var currentPage;//当前页 //1.页面加载完成后，直接去发送一个ajax请求要到分页数据 $(function() { //加载直接进入第一页 to_page(1); }); function to_page(pn) { $.ajax({ url : "${APP_PATH}/emps", data : "pn=" + pn, type : "get", success : function(result) { console.log(result); //1.解析并显示员工数据 build_emps_table(result); //2.解析分页信息 build_page_info(result); //3.解析显示分页条数据 build_page_nav(result); } }); }
6.构建员工表格
function build_emps_table(result) { //构建前table表格，不然点击下一页前一页信息会重叠在第二页 $("#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); 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("删除")); //为删除按钮添加一个自定义属性表示当前员工id 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"); }); }
7.分页信息显示
function build_page_info(result) { $("#page_info_area").empty(); $("#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; }
8.显示分页条
function build_page_nav(result) { $("#page_nav_area").empty(); var ul = $("<ul></ul>").addClass("pagination"); var firstPageLi = $("<li></li>").append($("<a></a>").append("首页")); var prePageLi = $("<li></li>").append($("<a></a>").append("«")); //判断是否有前一页 if (result.extend.pageInfo.hasPreviousPage == false) { //firstPageLi.addClass("disabled"); //prePageLi.addClass("disabled"); firstPageLi.hide(); prePageLi.hide(); } //为元素添加翻页事件 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("末页")); //判断是否有后一页 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); //index:当前索引，item：当前元素,遍历添加页码 $.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 nav = $("<nav></nav>").append(ul); nav.appendTo("#page_nav_area"); }
9.新增
//表单清除方法 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"); //打开模态框前发送请求所有部门的信息 getDepts("#dept_add_select"); //模态框的js弹出方法,bootstrap $("#empAddModal").modal({ backdrop : "static"//点击背景不关闭 }); //查出部门信息显示在下拉列表中 function getDepts(ele) { //清空之前下拉列表的值 $(ele).empty(); $.ajax({ url : "${APP_PATH}/depts", type : "GET", success : function(result) { console.log(result); //$("#dept_add_select").append("") $.each(result.extend.depts, function() { var optionEle = $("<option></option>").append( this.deptName).attr("value", this.deptId); optionEle.appendTo(ele); }); } }); } });
10.表单的校验
function validate_add_form() { //拿到校验数据后使用正则表达式 var empName = $("#empName_add_input").val(); // 小/大写的a-z，0-9，下划线或者横杠，要求6-16位,中文字符要求只要2-5个，两者用或连接的 var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/; if (!regName.test(empName)) { show_validate_msg("#empName_add_input", "error", "用户名格式不正确"); return false; } else { show_validate_msg("#empName_add_input", "success", "用户名格式正确"); } ; //邮箱验证 var email = $("#email_add_input").val(); var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; if (!regEmail.test(email)) { show_validate_msg("#email_add_input", "error", "邮箱输入格式不正确"); return false; } else { show_validate_msg("#email_add_input", "success", "邮箱输入正确"); } 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) { $(ele).parent().addClass("has-error"); $(ele).next("span").text(msg); } }
11.判断信息与数据库是否重复
$("#empName_add_input").change( function() { //发送ajax请求校验用户名是否可用 var empName = this.value; $.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", "用户名被占用"); $("#emp_save_btn").attr("ajax-va", "error"); } } }); });
12.新增的保存功能
$("#emp_save_btn") .click( function() { //对提交的数据进行验证 if (!validate_add_form()) { return false; } //判断用户名与数据库校验是否成功 if ($(this).attr("ajax-va") == "error") { return false; } /*serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。 可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中*/ console.log("获取到的表单数据：" + $("#empAddModal form").serialize()); $ .ajax({ url : "${APP_PATH}/emp", type : "POST", data : $("#empAddModal form").serialize(), success : function(result) { console.log(result.msg); if (result.code == 100) { //保存后关闭模态框 $("#empAddModal").modal(‘hide‘); //跳转到最后一页显示新增的数据，发送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); } } } }); });
13.编辑按钮
//因为新增按钮创建之前就绑定了click，所以要用如下方法才能绑定成功 $(document).on("click",".edit_btn",function(){ //查出部门信息，显示部门列表 getDepts("empUpdateModal select"); //查出员工信息，显示员工信息 getEmp($(this).attr("edit-id")); //把员工id传递给更新按钮 $("#emp_update_btn").attr("edit-id",$(this).attr("edit-id")); //模态框弹出 $("empUpdateModal").modal({ backdrop:"static" }); });
14.根据id查询需要编辑的信息
function getEmp(id){ $.ajax({ url:"${APP_PATH}/emp/"+id, type:"GET", success:function(result){ console.log(result); //员工数据 var empdata = result.extend.emp; $("#empName_update_static").text(empdata.empName); //给input框赋值直接用val() $("#email_update_input").val(empdata.email); //单选框的赋值 $("empUpdateModal input[name=gender]").val([empdata.gender]); //下拉列表的赋值 $("#empUpdateModal select").val([empdata.dId]); } }); }
15.更新按钮
$("#emp_update_btn").click(function(){ // 先验证后发送请求，验证邮箱是否合法 var email = $("#email_update_input").val(); var regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/; 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){ console.log(result.msg); $("#empUpdateModal").modal("hide"); to_page(currentPage); } }); });
16.删除
//======================单个删除按钮======================== $(document).on("click",".delete_btn",function(){ //弹出确认删除对话框 //找到当前元素的父节点tr下的第二个子元素td的值 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(){ console.log(result.msg); to_page(currentPage); } }); } }); //======================批量删除按钮======================== //完成全选/全不选 //prop正确获取属性的值，attr获取自定义属性的值 //prop修改和读取dom原生属性的值 $("#check_all").click(function(){ $(this).prop("checked"); $(".check_item").prop("checked",$(this).prop("checked")); }); //后来动态添加的元素绑定单击事件 $(document).on("click",".check_item",function(){ //判断是否选满 .check_item:checked==被选中的 var flag = $(".check_item:checked").length==$(".check_item").length; //选满后head处的框就勾上 $("#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多余的逗号，用substring截取 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", succcess:function(result){ alert(result.msg); to_page(currentPage); } }) } }); </script> </html>