整合SSM框架、快速开发CRUD项目

本文学习内容来自尚硅谷的视频 尚硅谷SSM实战演练丨ssm整合快速开发CRUD_哔哩哔哩_bilibili

新增

添加员工的前台页面是以下形式，要求点击add按钮，弹出模块框，这里可以直接使用bootstrap来进行页面布局

<!--添加员工模态框-->
<div class="modal fade" id="addEmpModal" 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">&times;</span></button><h4 class="modal-title" id="myModalLabel">添加员工</h4></div><div class="modal-body"><form class="form-horizontal"><div class="form-group" id="nameDiv"><label for="inputName" class="col-sm-2 control-label">姓名</label><div class="col-sm-10"><input type="text" class="form-control" id="inputName" name="name" placeholder="EmpName"><span class="help-block"></span></div></div><div class="form-group" id="emailDiv"><label for="inputEmail" class="col-sm-2 control-label">邮箱</label><div class="col-sm-10"><input type="text" class="form-control" id="inputEmail" name="email" placeholder="email@123.com"><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="inlineRadio1" checked="checked" value="M"> 男</label><label class="radio-inline"><input type="radio" name="gender" id="inlineRadio2" value="F"> 女</label></div></div><div class="form-group"><label class="col-sm-2 control-label">部门</label><div class="col-sm-4"><select class="form-control" id="depts_select" 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="save_emp">保存</button></div></div></div>
</div>

对数据库中的部门进行查询，并显示在前端模块中

$("#addEmpBtn").click(function (){//发送请求，查询部门信息$.ajax({url:"getDepts",type: "GET",success:function (result){build_depts_select(result);}})//显示模块$('#addEmpModal').modal('show');
});
//添加部门信息
function build_depts_select(result){//console.log(result);$("#depts_select").empty();$.each(result.extend.depts,function (){var option = $("<option></option>").append(this.deptName).attr("value",this.deptId);option.appendTo($("#depts_select"));})
}

后端处理

public List<Department> getDepts(){return departmentMapper.selectByExample(null);
}

初步实现保存员工信息

为保存按钮添加绑定事件，jQuery中提供serialize()方法，帮我们将表单中的所填写的数据整理成json格式

$("#save_emp").click(function (){// alert($("#addEmpModal form").serialize());$.ajax({url:"addEmp",data:$("#addEmpModal form").serialize(),type:"POST",success:function (result){//模态框关闭$('#addEmpModal').modal('hide');//跳转至最后一页to_page(currentPage+1);}})
})

服务器接收数据并处理数据

@RequestMapping(value="/addEmp",method=RequestMethod.POST)@ResponseBody
public Msg saveEmp(Employee employee){employeeSerivce.addEmp(employee);return Msg.success();
}

以上一个初步的保存员工信息就完成了，接下来我们需要对此进行优化

1. 前端验证（要求邮箱格式正确，用户名为2-5个中文或6-16个英文字母和数字、下划线）
2. 后端验证用户名是否重复
3. 后端验证

前端验证

            //检验表单信息function validate_add_form(){//校验姓名var nameRegular = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;var empName = $("#inputName").val();if(!nameRegular.test(empName)){show_validate_msg("#inputName", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");return false;}else {show_validate_msg("#inputName", "success", "");}//校验邮箱var emailRegular =  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;var empEmail = $("#inputEmail").val();if(!emailRegular.test(empEmail)){show_validate_msg("#inputEmail", "error", "邮箱格式不正确");return false;}else {show_validate_msg("#inputEmail", "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);}}

后端验证用户名是否存在

    @RequestMapping("/nameIsExist")@ResponseBodypublic Msg isExist(@RequestParam("name") String name){//先判断用户名是否是合法的表达式;String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";if(!name.matches(regx)){return Msg.fail().add("va_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");}return employeeSerivce.isExist(name)?Msg.fail().add("va_msg","用户名已存在"):Msg.success();}

后端验证

在后台我们需要对数据的格式进行验证，这里需要用到JSR303技术，先来导入相关jar包

    <!--JSR303校验--><!-- https://mvnrepository.com/artifact/org.hibernate.validator/hibernate-validator --><dependency><groupId>javax.validation</groupId><artifactId>validation-api</artifactId><version>1.1.0.Final</version></dependency><dependency><groupId>org.hibernate</groupId><artifactId>hibernate-validator</artifactId><version>5.1.0.Final</version></dependency>

对JavaBean进行修改，在需要验证的字段名上加上注解

    @Pattern(regexp = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})",message = "用户名必须是6-16位数字和字母的组合或者2-5位中文")private String name;@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",message = "邮箱格式不正确")private String email;

在controller类中加上注解，注意@Valid需要配合BindingResult对象来使用，BindingResult包装了所有关于验证的信息

    @RequestMapping(value="/addEmp",method=RequestMethod.POST)@ResponseBodypublic Msg saveEmp(@Valid Employee employee, BindingResult result){if(result.hasErrors()){//校验失败，应该返回失败，在模态框中显示校验失败的错误信息Map<String, Object> map = new HashMap<>();List<FieldError> errors = result.getFieldErrors();for (FieldError fieldError : errors) {System.out.println("错误的字段名："+fieldError.getField());System.out.println("错误信息："+fieldError.getDefaultMessage());map.put(fieldError.getField(), fieldError.getDefaultMessage());}return Msg.fail().add("errorFields", map);}else{employeeSerivce.addEmp(employee);return Msg.success();}}