赞
踩
继续上一篇的讲解【依葫芦画瓢】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格式的支持
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
<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包
<!--JSR303数据校验支持;tomcat7及以上的服务器, tomcat7以下的服务器:el表达式。额外给服务器的lib包中替换新的标准的el -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<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、在页面上将失败或者成功消息输出
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。