【依葫芦画瓢】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
public Msg getEmpsWithJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
// 获取第pn页，5条内容
PageHelper.startPage(pn, 5);
List<Employee> emps = employeeService.getAll();
// 用PageInfo对结果进行包装,传入连续显示的页数
PageInfo page = new PageInfo(emps, 5);
return Msg.success().add("pageInfo", page);
}

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

<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.8.8</version>
</dependency>

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

// 100表示成功，200表示失败
private int code;

// 提示消息，如成功或失败提示
private String msg;

// 需要返回的数据封装
private Map<String, Object> extend = new HashMap<>();

// 设置成功消息
public static Msg success() {
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功");
return result;
}

// 设置失败消息
public static Msg fail() {
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理失败");
return result;
}

// 添加需要返回的信息
public Msg add(String key, Object value) {
this.getExtend().put(key, value);
return this;
}
....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_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$/
邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/

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

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

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

<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.4.1.Final</version>
</dependency>

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

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

@Pattern(regexp = "^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$", message = "邮箱格式不正确")
private String email;

c3、改造保存员工的方法

/**
* 保存员工信息
*
* @param employee
* @return
*/
@RequestMapping(value = "/emp", method = RequestMethod.POST)
@ResponseBody
public Msg saveEmp(@Valid Employee employee, BindingResult result) {
if (result.hasErrors()) {
// 校验失败，需要返回失败，在模态框中显示校验失败的错误信息，遍历错误信息
// 封装map，用于返回错误信息
Map<String, Object> map = new HashMap<>();
List<FieldError> fieldErrors = result.getFieldErrors();
for (FieldError fieldError : fieldErrors) {
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields", map);
}

employeeService.saveEmp(employee);
return Msg.success();
}

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

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

猜你喜欢