整合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">×</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();
}
以上一个初步的保存员工信息就完成了，接下来我们需要对此进行优化
- 前端验证（要求邮箱格式正确，用户名为2-5个中文或6-16个英文字母和数字、下划线）
- 后端验证用户名是否重复
- 后端验证
前端验证
//检验表单信息
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")
@ResponseBody
public 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)
@ResponseBody
public 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();
}
}
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
