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

物以类聚,人以群分

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

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

本文来自企鹅号 - 小天成猿路媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

2018最新款渗透测试框架 | Fsociety搞定各种姿势脚本

Fsociety是一款最新的渗透测试框架,可以帮助各位兄弟在安全测试过程中拥有变身成黑客所需要的各种姿势脚本。 这个工具刚刚出现,目前大概分为以下9类,后续还会...

3098
来自专栏SpringBoot 核心技术

第三十九章:基于SpringBoot & Quartz完成定时任务分布式单节点持久化

59510
来自专栏Java架构解析

微服务网关Zuul迁移到Spring Cloud Gateway

本文将会介绍将微服务网关由Zuul迁移到Spring Cloud Gateway。

3.5K0
来自专栏雨过天晴

原 Nginx 开启 status 状态功

1001
来自专栏FreeBuf

新手指南:DVWA-1.9全级别教程(完结篇,附实例)之XSS

* 本文原创作者:lonehand,转载请注明来自FreeBuf.COM 目前,最新的DVWA已经更新到1.9版本(http://www.dvwa.co.uk...

1K5
来自专栏用户2442861的专栏

使用IntelliJ IDEA开发SpringMVC网站(四)用户管理

转载请注明出处:Gaussic(一个致力于AI研究却不得不兼顾项目的研究生) 。

2101
来自专栏程序猿DD

Spring Cloud构建微服务架构:Hystrix监控面板【Dalston版】

前言 在上一篇《服务容错保护(hystrix断路器)》的介绍中,我们提到断路器是根据一段时间窗内的请求情况来判断并操作断路器的打开和关闭状态的。而这些请求情况的...

2067
来自专栏PhpZendo

什么是依赖注入

本文是依赖注入(Depeendency Injection)系列教程的第一篇文章,本系列教程主要讲解如何使用 PHP 实现一个轻量级服务容器,教程包括:

2731
来自专栏程序猿DD

Spring Boot中使用LDAP来统一管理用户信息

很多时候,我们在构建系统的时候都会自己创建用户管理体系,这对于开发人员来说并不是什么难事,但是当我们需要维护多个不同系统并且相同用户跨系统使用的情况下,如果每个...

6856
来自专栏kangvcar

Cobbler 快速入门指南

1543

扫码关注云+社区