CRUD-新增-保存

1、在index.jsp页面点击”新增”
2、弹出新增对话框
3、去数据库查询部门列表，显示在对话框中
4、用户输入数据，并进行校验
• jquery前端校验，ajax用户名重复校验，重要数据（后端校验(JSR303)，唯一约束）；
5、完成保存
• URI:
• /emp/{id} GET 查询员工
• /emp POST 保存员工
• /emp/{id} PUT 修改员工
• /emp/{id} DELETE 删除员工

去数据库查询部门列表,显示在对话框中

1.DepartmentService:

@Servicepublic class DepartmentService {    @Autowired    private DepartmentMapper departmentMapper;    public List<Department> getDepts() {        // TODO Auto-generated method stub        List<Department> list = departmentMapper.selectByExample(null);        return list;    }}

2.DepartmentController.java:

/** * 处理和部门有关的请求 * @author lfy * */@Controllerpublic class DepartmentController {    @Autowired    private DepartmentService departmentService;    /**     * 返回所有的部门信息     */    @RequestMapping("/depts")    @ResponseBody    public Msg getDepts(){        //查出的所有部门信息        List<Department> list = departmentService.getDepts();        return Msg.success().add("depts", list);    }}

3.index.jsp:

//清空表单样式及内容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");    //s$("")[0].reset();    //发送ajax请求，查出部门信息，显示在下拉列表中    getDepts("#empAddModal select");    //弹出模态框    $("#empAddModal").modal({        backdrop:"static"    });});//查出所有的部门信息并显示在下拉列表中function getDepts(ele){    //清空之前下拉列表的值    $(ele).empty();    $.ajax({        url:"${APP_PATH}/depts",        type:"GET",        success:function(result){            //{"code":100,"msg":"处理成功！",                //"extend":{"depts":[{"deptId":1,"deptName":"开发部"},{"deptId":2,"deptName":"测试部"}]}}            //console.log(result);            //显示部门信息在下拉列表中            //$("#empAddModal select").append("")            $.each(result.extend.depts,function(){                var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);                optionEle.appendTo(ele);            });        }    });}

index.jsp-jquery前端校验

//校验表单数据function validate_add_form(){    //1、拿到要校验的数据，使用正则表达式    var empName = $("#empName_add_input").val();    var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;    if(!regName.test(empName)){        //alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");        show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");        return false;    }else{        show_validate_msg("#empName_add_input", "success", "");    };    //2、校验邮箱信息    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", "");    }    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);    }}

index.jsp-ajax用户名重复校验

1.EmployeeService:

/** * 检验用户名是否可用 *  * @param empName * @return  true：代表当前姓名可用   fasle：不可用 */public boolean checkUser(String empName) {    // TODO Auto-generated method stub    EmployeeExample example = new EmployeeExample();    Criteria criteria = example.createCriteria();    criteria.andEmpNameEqualTo(empName);    long count = employeeMapper.countByExample(example);    return count == 0;}

2.EmployeeController.java:

/** * 检查用户名是否可用 * @param empName * @return */@ResponseBody@RequestMapping("/checkuser")public Msg checkuser(@RequestParam("empName")String empName){    //先判断用户名是否是合法的表达式;    String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";    if(!empName.matches(regx)){        return Msg.fail().add("va_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");    }    //数据库用户名重复校验    boolean b = employeeService.checkUser(empName);    if(b){        return Msg.success();    }else{        return Msg.fail().add("va_msg", "用户名不可用");    }}

3.index.jsp:

//校验用户名是否可用$("#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",result.extend.va_msg);                $("#emp_save_btn").attr("ajax-va","error");            }        }    });});

后端校验(JSR303)

1.Employee.java:

public class Employee {    private Integer empId;    @Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})"            ,message="用户名必须是2-5位中文或者6-16位英文和数字的组合")    private String empName;    private String gender;    //@Email    @Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",            message="邮箱格式不正确")    private String email;    private Integer dId;    //希望查询员工的同时部门信息也是查询好的    private Department department;    @Override    public String toString() {        return "Employee [empId=" + empId + ", empName=" + empName                + ", gender=" + gender + ", email=" + email + ", dId=" + dId                + "]";    }    public Employee() {        super();    }    public Employee(Integer empId, String empName, String gender, String email,            Integer dId) {        super();        this.empId = empId;        this.empName = empName;        this.gender = gender;        this.email = email;        this.dId = dId;    }    public Department getDepartment() {        return department;    }    public void setDepartment(Department department) {        this.department = department;    }    public Integer getEmpId() {        return empId;    }    public void setEmpId(Integer empId) {        this.empId = empId;    }    public String getEmpName() {        return empName;    }    public void setEmpName(String empName) {        this.empName = empName == null ? null : empName.trim();    }    public String getGender() {        return gender;    }    public void setGender(String gender) {        this.gender = gender == null ? null : gender.trim();    }    public String getEmail() {        return email;    }    public void setEmail(String email) {        this.email = email == null ? null : email.trim();    }    public Integer getdId() {        return dId;    }    public void setdId(Integer dId) {        this.dId = dId;    }}

2.EmployeeController.java:

/** * 员工保存 * 1、支持JSR303校验 * 2、导入Hibernate-Validator *  *  * @return */@RequestMapping(value="/emp",method=RequestMethod.POST)@ResponseBodypublic Msg saveEmp(@Valid Employee employee,BindingResult result){    if(result.hasErrors()){        //校验失败，应该返回失败，在模态框中显示校验失败的错误信息        Map<String, Object> map = new HashMap<String,Object>();        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{        //employeeService.saveEmp(employee);        return Msg.success();    }}

完成保存

1.EmployeeService.java:

/** * 员工保存 * @param employee */public void saveEmp(Employee employee) {    // TODO Auto-generated method stub    employeeMapper.insertSelective(employee);}

2.index.jsp:

//点击保存，保存员工。$("#emp_save_btn").click(function(){    //1、模态框中填写的表单数据提交给服务器进行保存    //1、先对要提交给服务器的数据进行校验    if(!validate_add_form()){        return false;    };    //1、判断之前的ajax用户名校验是否成功。如果成功。    if($(this).attr("ajax-va")=="error"){        return false;    }    //2、发送ajax请求保存员工    $.ajax({        url:"${APP_PATH}/emp",        type:"POST",        data:$("#empAddModal form").serialize(),        success:function(result){            //alert(result.msg);            if(result.code == 100){                //员工保存成功；                //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);                }            }        }    });});

3.EmployeeController.java:

/** * 员工保存 * 1、支持JSR303校验 * 2、导入Hibernate-Validator *  *  * @return */@RequestMapping(value="/emp",method=RequestMethod.POST)@ResponseBodypublic Msg saveEmp(@Valid Employee employee,BindingResult result){    if(result.hasErrors()){        //校验失败，应该返回失败，在模态框中显示校验失败的错误信息        Map<String, Object> map = new HashMap<String,Object>();        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{        employeeService.saveEmp(employee);//完成保存        return Msg.success();    }}