【依葫芦画瓢】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、在页面上将失败或者成功消息输出

物以类聚,人以群分

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

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

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171230G0G60200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券