【依葫芦画瓢】SSM-CRUD-3

继续上一篇的讲解【依葫芦画瓢】SSM-CRUD --- 2

概要：

服务端返回json数据，构建员工列表

完成员工新增功能

增加表单前后端校验（jQuery+JSR303）

注：index文件太长，可访问https://gitee.com/tyronchen/ssm-crud/blob/master/ssm-crud/src/main/webapp/index-1228.jsp 查看，下文中不再添加代码，主要是讲述思路。

效果图：

一、服务端返回json数据，构建员工列表

服务端返回json数据，可以实现客户端的无关性，思路及实现过程：

a、修改获取员工列表的方法，增加@ResponseBody注释，修改方法返回值。

@RequestMapping("/emps")

@ResponseBody

publicMsggetEmpsWithJson(@RequestParam(value="pn", defaultValue ="1") Integer pn){

// 获取第pn页，5条内容

PageHelper.startPage(pn,5);

List emps = employeeService.getAll();

// 用PageInfo对结果进行包装,传入连续显示的页数

PageInfo page =newPageInfo(emps,5);

returnMsg.success().add("pageInfo", page);

}

b、pom.xml文件中导入jackson的jar，提供对json格式的支持

com.fasterxml.jackson.core

jackson-databind

2.8.8

c、设置返回信息类（Msg），对返回信息统一处理

// 100表示成功，200表示失败

privateintcode;

// 提示消息，如成功或失败提示

privateString msg;

// 需要返回的数据封装

privateMap extend =newHashMap();

// 设置成功消息

publicstaticMsgsuccess(){

Msg result =newMsg();

result.setCode(100);

result.setMsg("处理成功");

returnresult;

}

// 设置失败消息

publicstaticMsgfail(){

Msg result =newMsg();

result.setCode(200);

result.setMsg("处理失败");

returnresult;

}

// 添加需要返回的信息

publicMsgadd(String key, Objectvalue){

this.getExtend().put(key,value);

returnthis;

}

....get/set方法略

d、index页面通过ajax请求将获取到的json数据处理，员工列表信息展示；

二、完成员工新增功能

点击“新增”按钮，弹出“员工添加”模态框，用户数据录入，页面显示新增员工。

a、绑定“新增”按钮的点击事件

b、页面中增加模态框，参考文档：https://v3.bootcss.com/javascript/#modals

c、模态框中的部门列表，在模态框弹出前通过ajax请求服务器获取

d、填写新增人员信息，进行前后端校验，检验环节会在下文中详细说明

e、点击“保存”按钮，ajax发起请求，将表单数据序列化（serialize()）后提交

f、保存失败，输出错误提示；保存成功，关闭模态框，显示最后一页。

三、表单校验

用户名和邮箱格式校验 + 用户名重复性校验 + 后端JSR303校验

a、用户名和邮箱格式校验。首先是通过前端jQuery在输入数据后进行校验，然后在保存的动作上再校验一次（可选），校验的正则：

用户名：/^[a-zA-Z0-9_-]$)(^[\u2E80-\u9FFF]$/

邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.])$/

b、用户名重复性校验。在输入用户名后触发change事件，发送ajax请求，服务器端返回结果，在用户名不可用的情况下，设置“保存”按钮不可用。

c、后端JSR303校验，为了防止“小人”绕过前端校验，在重要数据的提交上需要增加后端代码校验。

c1、在pom.xml文件中导入JSR303依赖的jar包

org.hibernate

hibernate-validator

5.4.1.Final

c2、Employee实体中增加校验条件

@Pattern(regexp ="(^[a-zA-Z0-9_-]$)(^[\u2E80-\u9FFF])", message ="用户名必须是2-5位中文或者6-16位英文和数字的组合")

privateStringempName;

@Pattern(regexp ="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.])$", message ="邮箱格式不正确")

privateStringemail;

c3、改造保存员工的方法

/**

* 保存员工信息

*

* @param employee

* @return

*/

@RequestMapping(value ="/emp", method = RequestMethod.POST)

@ResponseBody

publicMsg saveEmp(@ValidEmployee employee,BindingResult result) {

if(result.hasErrors()) {

// 校验失败，需要返回失败，在模态框中显示校验失败的错误信息，遍历错误信息

// 封装map，用于返回错误信息

Map map =newHashMap();

List fieldErrors = result.getFieldErrors();

for(FieldError fieldError : fieldErrors) {

map.put(fieldError.getField(), fieldError.getDefaultMessage());

}

returnMsg.fail().add("errorFields", map);

}

employeeService.saveEmp(employee);

returnMsg.success();

}

c4、在页面上将失败或者成功消息输出

物以类聚，人以群分

出自《战国策·齐策三》《周易·系辞上》方以类聚，物以群分。西汉末刘向编定。比喻同类的东西常聚在一起，志同道合的人相聚成群，反之就分开。

-------摘自百度百科

多和优秀的人在一起，我们也会变得优秀。在上进的环境中，我们也会更加努力。前几天看到文章写道如何成为一个“自燃”的人，或许你我都是“可燃”的人，从“可燃”到“自燃”，我们需要有强烈的责任性和主人翁意识，会迎接挑战，时刻提高自身的素质和技能，不甘于现状，有强烈的上进心，而不需要督促。

成为一个“自燃”的人，我一直在路上。。。