保存
校验
之前完成了前端，合法性和重复性的检验，但是由于添加了一个自定义的ajax-va，所以还是会出现一个错误，就是ajax-va的存在导致了数据无法提交，但是将其改为success时，又可以成功提交并绕过重复性的检验，这是不期望看到的
所以还需要一个后端校验以及数据库约束等
已完成的校验：
jquery前端校验
ajax用户名重复校验
合法性校验
后端校验(JSR303)
这是为了防止用户提交非法数据，添加唯一约束，尤其是对于重要数据，必须要添加后端校验
需要导入Hibernate-Validator包，依旧是添加maven依赖1
2
3
4
5
6<!-- JSR303校验 数据校验支持-->
<dependency>
<groupId>org.hibernate.validator</groupId>
<artifactId>hibernate-validator</artifactId>
<version>6.1.6.Final</version>
</dependency>
在Employee.java中给empName和email添加上JSR303检验标准1
2
3@Pattern(regexp = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})"
,message = "用户名必须是2-5位中文或6-16位英文和数字的组合")
private String empName;
1 |
|
Email可以直接写@Email或自定义
要想校验实现，只需要在Controller的对应方法中的封装对象添加上@Valid 就可以代表封装对象之后，封装的数据要进行校验，还可以定义一个BindingResult对象来封装校验的结果1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25/**
* 员工保存
* 1.支持JSR303校验
* 2. 导入Hibernate-validator
* @param employee
* @return
*/
@RequestMapping(value = "/emp",method = RequestMethod.POST)
@ResponseBody
public Msg saveEmp(@Valid Employee employee, BindingResult result){
if(result.hasErrors()){
//校验失败应该返回失败，在模态框中显示校验失败的错误信息
Map<String,Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for(FieldError fieldError : errors){
System.out.println("错误的字段名："+fieldError.getField());
System.out.println("错误信息："+fieldError.getDefaultMessage());
map.put(fieldError.getField(),fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields",map);
}else{
employeeService.saveEmp(employee);
return Msg.success();
}
}
还需要修改一下index.jsp，让他点击完保存之后，有进一步的校验和提示信息1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43//点击保存，保存员工
$("#emp_save_btn").click(function () {
//1.模态框中填写的表单数据提交给服务器进行保存
//2.先对要提交给服务器的数据进行校验
if(!validata_add_form()){
return false;
};
//3.判断之前的ajax用户名校验是否成功
if($(this).attr("ajax-va")=="error"){
return false;
};
//4.发送ajax请求保存员工
// alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function (result) {
//alert(result.msg);
if(result.code == 200){
//员工保存成功：
//1. 关闭模态框
$("#empAddModal").modal('hide');
//2. 来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可
//可以将总记录数当作页码
to_page(totalRecords);
}else{
//显示失败信息
// console.log(result);
//有哪个字段的错误信息，就显示哪个字段
if(undefined != result.extend.errorFields.email){
//显示邮箱错误信息
show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
}
if(undefined != result.extend.errorFields.empName){
//显示员工错误信息
show_validate_msg("#empName_add_input","error",result.extend.result.extend.errorFields.empName);
}
}
}
});
});
显示即使注释掉了前端的校验代码，依然会提示错误信息，并且后端的控制台中也会看到对应的信息1
2错误的字段名：email
错误信息：邮箱格式不正确
这里就完成了最终的校验
当然数据在创建的时候可以给用户名和邮箱等信息添加不可重复的依赖，那就又添加了一次保障
当前的index.jsp1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415<%--
web路径：
不以/开始的相对路径，找资源，以当前资源的路径为基准，经常容易出现问题
以/开始的相对路径，找资源，以服务器的路径为标准（http://localhost:3306）需要加上项目名
http://localhost:3306/crud
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${APP_PATH}/static/js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<input type="text" name="empName" class="form-control" id="empName_add_input" placeholder="empName">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@qq.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_input" value="F"> 女
</label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<%-- 部门提交部门id即可--%>
<select class="form-control" name="dId" id="dept_add_select">
<%-- 部门名称--%>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<%--标题--%>
<div class="row">
<div class="col-md-12">
<h1>SSM-CRUD</h1>
</div>
</div>
<%--按钮--%>
<div class="row">
<div class="col-md-4 col-md-offset-8">
<button class="btn btn-primary" id="emp_add_modal_btn">新增</button>
<button class="btn btn-danger">删除</button>
</div>
</div>
<%--显示表格数据--%>
<div class="row">
<div class="col-md-12">
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th>#</th>
<th>empName</th>
<th>gender</th>
<th>email</th>
<th>deptName</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<%-- 员工数据等--%>
</tbody>
</table>
</div>
</div>
<%--显示分页信息--%>
<div class="row">
<%-- 分页文字信息--%>
<div class="col-md-6" id="page_info_area">
<%-- 显示页码等信息--%>
</div>
<%-- 分页条信息--%>
<div class="col-md-6" id="page_nav_area">
<%-- 显示分页条信息--%>
</div>
</div>
</div>
<script type="text/javascript">
var totalRecords;
//1.页面加载完成以后，直接去发送一个ajax请求，要到分页数据
$(function (){
//去首页
to_page(1);
});
function to_page(pn) {
$.ajax({
url:"${APP_PATH}/emps",
data:"pn="+pn,
type:"GET",
success:function (result){
// console.log(result);
//1.解析并显示员工数据
build_emps_tables(result);
//2.解析并显示分页信息
build_page_info(result);
//3.解析并显示分页条数据
build_page_nav(result);
}
});
}
function build_emps_tables(result) {
//清空table
$("#emps_table tbody").empty();
var emps=result.extend.pageInfo.list;
$.each(emps,function (index,item) {
var empIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
var emailTd = $("<td></td>").append(item.email);
var deptNameTd = $("<td></td>").append(item.department.deptName);
/**
* <button class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
编辑
</button>
*/
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
/**
* <button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true" /></span>
删除
</button>
*/
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
//append方法执行完成之后还是返回原来的元素
$("<tr></tr>").append(empIdTd)
.append(empNameTd)
.append(genderTd)
.append(emailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody")
});
}
//解析显示分页信息
function build_page_info(result){
//清空分页信息
$("#page_info_area").empty();
$("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"
+result.extend.pageInfo.pages+"页,总"
+result.extend.pageInfo.total+"条记录");
totalRecords = result.extend.pageInfo.total;
}
//解析显示分页条,点击分页要能去下一页等等....
function build_page_nav(result) {
//清空
$("#page_nav_area").empty();
//page_nav_area
var ul = $("<ul></ul>").addClass("pagination");
//构建元素
var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
var prePageLi = $("<li></li>").append($("<a></a>").append("«"));
if(result.extend.pageInfo.hasPreviousPage == false){
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
firstPageLi.click(function () {
to_page(1);
});
prePageLi.click(function () {
to_page(result.extend.pageInfo.pageNum-1);
});
}
//构建元素
var nextPageLi = $("<li></li>").append($("<a></a>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
}else{
//为元素添加点击翻页的事件
nextPageLi.click(function () {
to_page(result.extend.pageInfo.pageNum+1);
});
lastPageLi.click(function () {
to_page(result.extend.pageInfo.pages);
});
}
//添加首页和前一页的提示
ul.append(firstPageLi).append(prePageLi);
//1,2,3....遍历给ul中添加页码提示
$.each(result.extend.pageInfo.navigatepageNums,function (index,item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
if(result.extend.pageInfo.pageNum == item){
numLi.addClass("active");
}
numLi.click(function () {
to_page(item);
});
ul.append(numLi);
});
//添加后一页和末页的提示
ul.append(nextPageLi).append(lastPageLi);
//把ul加入到nav元素中
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//清空表单样式及内容
function reset_form(ele){
$(ele)[0].reset();
//清空样式
$(ele).find("*").removeClass("has-success has-error");
$(ele).find(".help-block").text("");
}
//点击新增按钮弹出模态框
$("#emp_add_modal_btn").click(function () {
//清除数据，表单重置
reset_form($("#empAddModal form"));
//发送ajax请求，查出部门信息，显示在下拉列表
getDepts();
//弹出模态框
$("#empAddModal").modal({
backdrop:"static"
});
});
//查出所有的部门信息并显示在下拉列表中
function getDepts() {
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function (result) {
// console.log(result)
//显示部门信息在下拉列表中
// $("#dept_add_select").append("")
$.each(result.extend.depts,function () {
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo("#dept_add_select")
});
}
});
};
//校验表单数据
function validata_add_form(){
//1. 拿到要检验的数据，使用正则表达式
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
// alert("用户名可以是2-5位中文或6-16位英文和数字的组合");
//清空这个元素之前的样式
show_validate_msg("#empName_add_input","error","用户名可以是2-5位中文或6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#empName_add_input","success","");
};
//2. 校验邮箱信息
var email = $("#email_add_input").val();
var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
if(!regEmaill.test(email)){
// alert("邮箱格式不正确");
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
};
return true;
}
//显示校验信息
function show_validate_msg(ele,status,msg){
//清空这个元素之前的样式
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if(status == "success"){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if(status == "error"){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//校验用户名是否可用
$("#empName_add_input").change(function () {
//发送ajax请求校验用户名是否可用
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkUser",
data:"empName="+empName,
type:"POST",
success:function (result) {
if(result.code == 200){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_save_btn").attr("ajax-va","success");
}else{
show_validate_msg("#empName_add_input","error",result.extend.va_msg);
$("#emp_save_btn").attr("ajax-va","error");
}
}
});
});
//点击保存，保存员工
$("#emp_save_btn").click(function () {
//1.模态框中填写的表单数据提交给服务器进行保存
//2.先对要提交给服务器的数据进行校验
if(!validata_add_form()){
return false;
};
//3.判断之前的ajax用户名校验是否成功
if($(this).attr("ajax-va")=="error"){
return false;
};
//4.发送ajax请求保存员工
// alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function (result) {
//alert(result.msg);
if(result.code == 200){
//员工保存成功：
//1. 关闭模态框
$("#empAddModal").modal('hide');
//2. 来到最后一页，显示刚才保存的数据
//发送ajax请求显示最后一页数据即可
//可以将总记录数当作页码
to_page(totalRecords);
}else{
//显示失败信息
// console.log(result);
//有哪个字段的错误信息，就显示哪个字段
if(undefined != result.extend.errorFields.email){
//显示邮箱错误信息
show_validate_msg("#email_add_input","error",result.extend.errorFields.email);
}
if(undefined != result.extend.errorFields.empName){
//显示员工错误信息
show_validate_msg("#empName_add_input","error",result.extend.result.extend.errorFields.empName);
}
}
}
});
});
</script>
</body>
</html>
员工修改
效果图：
当点击编辑按钮时就会弹出这样一个模态框
点击编辑
弹出用户修改的模态框（显示用户信息）
点击更新，完成用户修改
由于很相似，所以就复制进行一点修改就好了
1 | <%--员工修改的模态框--%> |
然后给按钮加上标识1
2
3
4
5
6
7
8
9
10var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
/**
* <button class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-trash" aria-hidden="true" /></span>
删除
</button>
*/
var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
别忘了还有绑定点击事件1
2
3
4
5
6
7
8
9
10
11
12
13
14//1.按钮创建之前就绑定了click，所以绑定不上
//1).可以在创建按钮的时候绑定事件 2).live()
//jquery新版没有live，使用on方法进行替代
$(document).on("click",".edit_btn",function () {
//alert("edit")
//0.查出员工信息，显示员工信息
//1.查出部门信息，并显示部门列表
getDepts("#empUpdateModal select")
$("#empUpdateModal").modal({
backdrop:"static"
});
});
现在的模态框和添加的模态框是一样的，所以我们还需要做一些修改
显示信息
效果图中，用户名是不能变得，所以从bootstrap全局样式中找到表单的静态控件
实际上就加了一个p标签1
<p class="form-control-static">email.com</p>
想要更新时保持不变并与其对应，那还是发送ajax请求，传到这个静态控件中1
<p class="form-control-static" id="empName_update_static"></p>
在EmployeeController中添加1
2
3
4
5
6
7
8
9
10
11/**
* 按照员工id查询员工
* @param id
* @return
*/
public Msg getEmp( Integer id){
Employee employee = employeeService.getEmp(id);
return Msg.success().add("emp",employee);
}
对应的Service中也添加上1
2
3
4public Employee getEmp(Integer id) {
Employee employee = employeeMapper.selectByPrimaryKey(id);
return employee;
}
给编辑按钮添加一个自定义属性1
2
3
4var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
//为编辑按钮添加一个自定义的属性，来表示当前员工id
editBtn.attr("edit-id",item.empId);
1 | //1.按钮创建之前就绑定了click，所以绑定不上 |
这里基本的显示就完成了
更新信息
在EmployeeController中添加上1
2
3
4
5
6
7
8
9
10
11/**
* 员工更新方法
* @param employee
* @return
*/
@ResponseBody
@RequestMapping(value = "/emp/{empId}",method = RequestMethod.PUT)
public Msg saveEmp(Employee employee){
employeeService.updateEmp(employee);
return Msg.success();
}
Service中也对应添加1
2
3
4
5
6
7
8/**
* 员工更新
* @param employee
* @return
*/
public void updateEmp(Employee employee){
employeeMapper.updateByPrimaryKeySelective(employee);
}
在index.jsp中添加上点击事件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22//点击更新，更新员工信息
$("#emp_update_btn").click(function () {
//1.验证邮箱是否合法
var email = $("#email_update_input").val();
var regEmaill = /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ ;
if(!regEmaill.test(email)){
// alert("邮箱格式不正确");
show_validate_msg("#email_update_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_update_input","success","");
}
//2.发送ajax请求，保存更新的员工数据
$.ajax({
url:"${APP_PATH}/emp/"+$(this).attr("edit-id"),
type:"POST",
data:$("#empUpdateModal form").serialize()+"&_method=PUT",
success:function (result) {
alert(result.msg);
}
});
});
这样就完成了更新的基本操作
