*新增逻辑
1、 index.jsp页面点击新增
2、 弹出对话框
3、 去数据库查询部门列表(因为部门列表是数据库里面的)
4、 用户输入数据,完成表格
我们首先写下部门的Controller和Service
1)DepartmentService.java
package com.atguigu.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.atguigu.crud.bean.Department;
import com.atguigu.crud.dao.DepartmentMapper;
@Service
public class DepartmentService {
@Autowired
private DepartmentMapper departmentMapper;
public List<Department> getDepts() {
// 返回所有查到的部门
List<Department> list=departmentMapper.selectByExample(null);
return list;
}
}
2)DepartmentController.java
package com.atguigu.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.atguigu.crud.bean.Department;
import com.atguigu.crud.bean.Msg;
import com.atguigu.crud.service.DepartmentService;
//处理和部门有关的请求
@Controller
public class DepartmentController {
@Autowired
private DepartmentService departmentService;
//返回所有部门的信息
@RequestMapping("/depts")
@ResponseBody
public Msg getDepts(){
//查出的所有部门信息
List<Department> list=departmentService.getDepts();
return Msg.success().add("depts", list);
}
}
3)EmployeeController.java添加内容
//用于保存员工
/*
* 1、要支持JSR303校验,需要导入Hibernate-Validator的依赖
* 2、要使用,需要添加@Valid表示要校验Employee(该类中已经添加要求)
* 还要添加BindingResult来封装校验结果
*/
@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> 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();
}
}
//检查是否员工重复,输入的用户名是否可用
@ResponseBody
@RequestMapping("/checkuser")
public Msg checkuser(@RequestParam("empName")String empName){
//先判断用户名是否合法的表达式
String regx="(^[a-zA-Z0-9_-]{4,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if(!empName.matches(regx)){
return Msg.fail().add("va_msg", "用户名必须是4-16数字字母组合,或者2-5位中文(后台校验)");
}
//数据库用户名重复校验
boolean b=employeeService.checkUser(empName);
if(b){
return Msg.success();
}else{
return Msg.fail().add("va_msg", "用户名已存在(后台校验)");
}
}
4)EmployeeService.java添加内容
//员工保存
public void saveEmp(Employee employee) {
// TODO Auto-generated method stub
employeeMapper.insertSelective(employee);
}
//检验用户名是否可用
//如果没有这条记录,则等于0,则返回true,即当前姓名可用
public boolean checkUser(String empName) {
// TODO Auto-generated method stub
EmployeeExample example=new EmployeeExample();
Criteria criteria= example.createCriteria();
criteria.andEmpNameEqualTo(empName);
//countByExample是自动生成的方法,如果有这条记录,就返回大于0,否则返回0
long count=employeeMapper.countByExample(example);
return count==0;
}
5)Employee.java中添加JSR303用于后台校验输入是否正确(如果还没引入所需jar包,请看第六步引入所依赖的包)
只需要在email上添加@Email(message="邮箱格式错误")
以及empName上添加
//Pattern表示自定义注解,regexp属性是正则表达式
@Pattern(regexp="(^[a-zA-Z0-9_-]{4,16}$)|(^[\u2E80-\u9FFF]{2,5})"
,message="用户名必须是4-16数字字母组合,或者2-5位中文(后台校验)")
如图:
6)pom中添加后台校验JSR303(Hibernate-Validator)
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.4.1.Final</version>
</dependency>
7)index2.jsp
说明下,form表单中的name属性,对应着bean的属性的话,项目会自动帮我们进行对应配置的,此处我们用bootstrap框架的表单,以及其检验表单数据,在<script>
中进行操作。
此处主要是各种校验功能,关键数据一定要放在后台中校验,毕竟前端校验可以通过浏览器改变来跳过校验。所以应该是(前端+后端+数据库信息)三者加起来进行校验。此处后端校验用JSR303
此处主要校验的内容是:姓名格式是否正确,邮件格式是否正确,新增时姓名是否已存在(可以后用于检验用户名不重复)。index.jsp代码特别乱,但是还在跟着学习就先不管那么多,等全部学完后把代码重新整理下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<%
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
src="${ APP_PATH }/static/js/jquery-1.11.1.min.js"></script>
<link rel="stylesheet"
href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 员工添加的模态框,bootstrap的JavaScript插件,在<script>里写上事件 -->
<!-- Modal -->
<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">
<!-- 从bootstrap上添加的表单模块 -->
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">empName</label>
<div class="col-sm-10">
<!-- name属性可以让spring自动配置,要求就是要对应bean的属性 -->
<input type="text" class="form-control" id="empName_add_input"
placeholder="empName" name="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" class="form-control" id="email_add_input"
placeholder="email@atguigu.com" name="email"> <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>department</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 totalRecord;
/*页面加载完成后,直接发送一个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_table(result);
//2、解析并显示分页信息
build_page_info(result);
build_page_nav(result);
}
});
}
/*=============解析员工数据,并添加到列表下面,形成完整列表模式框架==========*/
function build_emps_table(result) {
//在构建之前,先清空,不然数据会叠加
$("#emps_table tbody").empty();
//此处要对照JSON数据,获取到员工的list
var emps = result.extend.pageInfo.list;
//jquery的遍历,emps为要遍历的参数,后面的为每次遍历返回的内容;index为下标,item为当前的数据
$.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);
//编辑按钮,利用jquery添加bootstrap所依赖的class
var editBtn = $("<button></button>").addClass(
"btn btn-primary btn-sm").append(
$("<span></span>").addClass(
"glyphicon glyphicon-pencil")).append("编辑");
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方法执行完成后,还是返回原来的元素,所以可以不停使用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();
//找到id=page_info_area的div块 进行操作
$("#page_info_area").append(
"当前" + result.extend.pageInfo.pageNum + "页,总共"
+ result.extend.pageInfo.pages + "页,总共"
+ result.extend.pageInfo.total + "记录");
totalRecord = result.extend.pageInfo.total;
}
/*===========用于解析右下角的分页条,创建分页条,并实现跳转功能=========*/
function build_page_nav(result) {
$("#page_nav_area").empty();
//此处的建议对照之前的index.jsp的html部分的代码看,不如太作死
/*开始构建 首页 末页,第一页...等元素,最后一次性加进去下面 第一段代码就完成了
<li><a href="#">首页</a></li> 这段代码
*/
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)
//遍历页码号 第一页第二页。。。遍历给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();
//清空样式,找到该元素下的所有内容里包含这两个class的内容,清掉它们
$(ele).find("*").removeClass("has-error has-success");
//找到所有class为helt-block(提示框所在的一小块区域),清空内容
$(ele).find(".help-block").text("");
}
/*=============点击新增按钮弹出悬浮框,(在“新增”键处)============*/
$("#emp_add_modal_btn").click(function() {
//重置表单
reset_form("#empAddModal form");
//发送ajax请求,查出部门信息,显示在下拉列表中
getDepats();
//弹出框框
$("#empAddModal").modal({
//令悬浮框不会删除
backdrop : "static"
});
});
/*==============封装方法:查出总共有几个部门,然后添加到下拉表中======================*/
function getDepats() {
//每次请求前 先清空数据
$("#dept_add_select").empty();
$.ajax({
url : "${APP_PATH}/depts",
type : "GET",
success : function(result) {
//显示部门信息在下拉列表中
$.each(result.extend.depts, function() {
var optionEle = $("<option></option>").append(
this.deptName).attr("value", this.deptId);
optionEle.appendTo("#dept_add_select");
});
}
});
}
/* ===========前端检验数据是否合理,但是这样不保险,在下面还有后台检验====================*/
function validate_add_form() {
//1、拿到要校验的数据,使用正则表达式进行校验
var empName = $("#empName_add_input").val();
//bootstrap的内容,在input的父元素上添加如下class
var regName = /(^[a-zA-Z0-9_-]{4,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(empName)) {
show_validate_msg("#empName_add_input", "error",
"用户名格式错误(前端校验)");
return false;
} else {
show_validate_msg("#empName_add_input", "success", "");
}
//校验邮箱
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (!regEmail.test(email)) {
//bootstrap的内容,在input的父元素上添加如下class
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 ("success" == status) {
$(ele).parent().addClass("has-success");
$(ele).next("span").text("");
} else if ("error" == status) {
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
/*===========================检验员工是否重复,并进行提示========================*/
$("#empName_add_input").change(
function() {
var empName = this.value;
//发送ajax请求是否可用
$.ajax({
url : "${APP_PATH}/checkuser",
data : "empName=" + empName,
type : "POST",
success : function(result) {
//此处code是Msg.java中的属性
if (result.code == 100) {
show_validate_msg("#empName_add_input",
"success", "用户名可用");
//如果成功,给保存按钮的键添加个自定义的属性,用于判断能不能点下保存
$("#emp_save_btn").attr("ajax-va", "success");
} else {
//传出的错误信息,是在EmployeeController中自定义的va_msg
show_validate_msg("#empName_add_input",
"error", result.extend.va_msg);
$("#emp_save_btn").attr("ajax-va", "error");
}
}
});
});
/*======================点击按钮后,就会保存数据,并且实现在这实现后台检验=====================*/
$("#emp_save_btn")
.click(
function() {
//对提交的数据进行校验
if (!validate_add_form()) {
return false;
}
//1、判断之前的ajax用户名是否成功,如果成功,才发送ajax
if ($(this).attr("ajax-va") == "error") {
return false;
}
//2、ajax保存员工
$
.ajax({
url : "${APP_PATH}/emp",
type : "POST",
data : $("#empAddModal form")
.serialize(),
success : function(result) {
//员工保存成功后,判断返回后台返回的结果状态码(JSR303)
if (result.code == 100) {
//1、关闭模态框;就用bootstrap的方法
$("#empAddModal").modal('hide');
//2、来到最后一页,显示保存的数据
//发送ajax请求显示最后一页数据即可
//此处利用pagehelper中,如果跳转的页面数大,则自动访问最后一页
to_page(totalRecord);
} else {
//有哪个字段的错误信息就显示哪个字段的,undefined是没有错误下会自动带上的信息
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.errorFields.empName);
}
}
}
});
});
/* ============================以下是修改员工内容======================================== */
</script>
</body>
</html>