新增-員工的添加
新增-邏輯
- 在index.jsp頁面點擊“新增”
- 彈出新增對話框
- 去數據庫查詢部門列表，顯示在對話框中
- 用戶輸入數據，並進行校驗
jquery前端校驗，ajax用戶名重復校驗，重要數據（后端校驗(JSR303)，唯一約束） - 完成保存
URI:
- /emp/{id} GET 查詢員工
- /emp POST 保存員工
- /emp/{id} PUT 修改員工
- /emp/{id} DELETE 刪除員工
在controller新增DepartmentController.java
package com.liantao.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.liantao.crud.bean.Department;
import com.liantao.crud.bean.Msg;
import com.liantao.crud.service.DepartmentService;
/**
* 處理和部門有關的請求
* @author liantao.me
*
*/
@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);
}
}
在service 新增DepartmentService.java
package com.liantao.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.liantao.crud.bean.Department;
import com.liantao.crud.dao.DepartmentMapper;
@Service
public class DepartmentService {
@Autowired
private DepartmentMapper departmentMapper;
public List<Department> getDepts() {
// TODO Auto-generated method stub
List<Department> list = departmentMapper.selectByExample(null);
return list;
}
}
修改EmployeeController.java，（添加JSR303校驗，添加判斷新增的用戶名是否可用的方法）
pom.xml添加：
<!-- JSR303數據校驗支持 -->
<!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-validator -->
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.4.1.Final</version>
</dependency>
- EmployeeController.java 修改
package com.liantao.crud.controller;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.validation.Valid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.liantao.crud.bean.Employee;
import com.liantao.crud.bean.Msg;
import com.liantao.crud.service.EmployeeService;
/**
* 處理員工的crud請求
* @author liantao.me
*
*/
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/**
* 檢查用戶名是否可用
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/checkuser")
public Msg checkuser(@RequestParam("empName")String empName){
//先判斷用戶名是否是合法的表達式
String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if(!empName.matches(regx)){
return Msg.fail().add("va_msg", "java:用戶名為2-5位中文或者6-16位英文和數字的組合");
}
//數據庫用戶名重復校驗
boolean b = employeeService.checkUser(empName);
if(b){
return Msg.success(); //code 100
}else
{
return Msg.fail().add("va_msg", "用戶名不可用"); //code 200
}
}
/**
* 員工保存
* 1.支持JSR303校驗
* 2.導入Hibernate-Validator
*
*
* @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("errFields", map);
}else{
employeeService.saveEmp(employee);
return Msg.success();
}
}
/**
* 需導入jackson包
* @param pn
* @return
*/
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1")Integer pn){
//引入PageHelper分頁插件
//查詢之前需要調用,,傳入頁碼，以及每頁的大小
PageHelper.startPage(pn,5);
//startPage后面緊跟的是這個查詢就是一個分頁查詢
List<Employee> emps = employeeService.getAll();
//使用pageInfo包裝查詢后的結果，只需要將Pageinfo交給頁面就行了
//封裝了詳細的分頁信息，包括我們查出來的數據,傳入連續顯示的數據
PageInfo page = new PageInfo(emps,5);
return Msg.success().add("pageInfo",page);
}
/*
* 查詢員工數據（分頁查詢）
* @return
*/
//@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1")Integer pn,Model model){
//引入PageHelper分頁插件
//查詢之前需要調用,,傳入頁碼，以及每頁的大小
PageHelper.startPage(pn,5);
//startPage后面緊跟的是這個查詢就是一個分頁查詢
List<Employee> emps = employeeService.getAll();
//使用pageInfo包裝查詢后的結果，只需要將Pageinfo交給頁面就行了
//封裝了詳細的分頁信息，包括我們查出來的數據,傳入連續顯示的數據
PageInfo page = new PageInfo(emps,5);
model.addAttribute("pageInfo",page);
return "list";
}
}
EmployeeService的修改（添加了員工保存，和用戶名檢測的方法）：
package com.liantao.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RequestParam;
import com.github.pagehelper.PageHelper;
import com.liantao.crud.bean.Employee;
import com.liantao.crud.bean.EmployeeExample;
import com.liantao.crud.bean.EmployeeExample.Criteria;
import com.liantao.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper;
/**
* 查詢所有員工數據（分頁查詢）
* @return
*/
public List<Employee> getAll() {
// TODO Auto-generated method stub
return employeeMapper.selectByExampleWithDept(null);
}
/**
* 員工保存
* @param employee
*/
public void saveEmp(Employee employee) {
// TODO Auto-generated method stub
employeeMapper.insertSelective(employee);
}
/**
* 檢驗用戶名是否可用
* @param empName
* @return true.代表當前姓名可用，否則false 不可用
*/
public boolean checkUser(String empName) {
// TODO Auto-generated method stub
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
long count = employeeMapper.countByExample(example);
return count == 0;
}
}
修改Employee.java (給相關字段加了注解)
package com.liantao.crud.bean;
import javax.validation.constraints.Pattern;
import org.hibernate.validator.constraints.Email;
import org.hibernate.validator.constraints.Length;
public class Employee {
private Integer empId;
@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})"
,message="用戶名必須是2-5位中文或者6-16位英文和數字的組合")
private String empName;
private String gender;
//@Email
@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})"
,message="郵箱格式不正確")
private String email;
private Integer dId;
//希望查詢員工的同時部門信息也是查詢好的
private Department department;
public Employee() {
super();
// TODO Auto-generated constructor stub
}
public Employee(Integer empId, String empName, String gender, String email, Integer dId) {
super();
this.empId = empId;
this.empName = empName;
this.gender = gender;
this.email = email;
this.dId = dId;
}
public Department getDepartment() {
return department;
}
public void setDepartment(Department department) {
this.department = department;
}
public Integer getEmpId() {
return empId;
}
public void setEmpId(Integer empId) {
this.empId = empId;
}
public String getEmpName() {
return empName;
}
public void setEmpName(String empName) {
this.empName = empName == null ? null : empName.trim();
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender == null ? null : gender.trim();
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email == null ? null : email.trim();
}
public Integer getdId() {
return dId;
}
public void setdId(Integer dId) {
this.dId = dId;
}
}
完成index.jsp的jsp修改 (主要是jq，ajax對表單數據顯示、驗證的邏輯處理）
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>員工列表</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<!-- 引入jquery -->
<script type="text/javascript" src="${path}/ssm-crud/static/js/jquery-1.12.4.js"></script>
<!-- 引入css、js -->
<link href="${path}/ssm-crud/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${path}/ssm-crud/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="xanwidtf@foxmail.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="true"> 男
</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">
</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 totalRecord;
//1.頁面加載完成以后，直接去發送一個ajax請求，要到分頁數據
$(function(){
//去首頁
to_page(1);
});
function to_page(pn){
$.ajax({
url:"${path}/ssm-crud/emps",
data:"pn="+pn,
type:"GET",
success:function(result){
//console.log(result);
//1.解析並顯示員工數據
build_emps_table(result);
//2.解析並顯示分頁信息
build_page_info(result);
//3.解析顯示分頁數據
build_page_nav(result);
}
});
}
function build_emps_table(result){
//清空table表格
$("#emps_table tbody").empty();
var emps = result.extend.pageInfo.list;
$.each(emps,function(index,item){
//alert(item.empName);
var emIdTd = $("<td></td>").append(item.empId);
var empNameTd = $("<td></td>").append(item.empName);
var genderTd = $("<td></td>").append(item.gender=='M'?'男':'女');
var mailTd = $("<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("編輯");
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(emIdTd)
.append(empNameTd)
.append(genderTd)
.append(mailTd)
.append(deptNameTd)
.append(btnTd)
.appendTo("#emps_table tbody");
});
}
//解析顯示分頁信息
function build_page_info(result){
//清空table表格
$("#page_info_area").empty();
$("#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
$("#page_nav_area").empty();
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 laststPageLi = $("<li></li>").append($("<a></a>").append("末頁").attr("href","#"));
if(result.extend.pageInfo.hasNextPage == false){
nextPageLi.addClass("disabled");
laststPageLi.addClass("disabled");
}else{
//為元素添加點擊翻頁
nextPageLi.click(function(){
to_page(result.extend.pageInfo.pageNum+1);
})
laststPageLi.click(function(){
to_page(result.extend.pageInfo.pages);
})
}
//添加首頁和前一頁的顯示
ul.append(firstPageLi).append(prePageLi);
//1,2,..5遍歷給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(laststPageLi);
//把ul加入到nav
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
//清空表單樣式及內容
function reset_form(ele){
$(ele)[0].reset();
//清空表單樣式
$(ele).find("*").removeClass("has-error has-success");
$(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:"${path}/ssm-crud/depts",
type:"GET",
success:function(result){
//{"code":100,"msg":"處理成功",
//"extend":{"depts":[{"deptId":1,"deptName":"開發部"},{"deptId":2,"deptName":"測試部"}]}}
//console.log(result);
//顯示部門信息在下拉列表中
//$("#empAddModal select").append("");
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo("#empAddModal select");
});
}
});
}
//校驗表單數據
function validate_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 eamil = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(eamil)){
//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("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
//ajax校驗用戶名是否可用
$("#empName_add_input").change(function(){
//發送ajax請求校驗用戶名是否可用
var empName = this.value;
$.ajax({
url:"${path}/ssm-crud/checkuser",
data:"empName="+empName,
type:"POST",
success:function(result){
if(result.code=="100"){
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.模態框中填寫的表單數據提交給服務器進行保存
//先對要提交給服務器的數據進行校驗
if(!validate_add_form()){
return false;
}
//1.判斷之前的ajax用戶名是否成功,如果失敗，阻止保存操作
if($(this).attr("ajax-va")=="error"){
return false;
}
//2.發送ajax請求保存員工
$.ajax({
url:"${path}/ssm-crud/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//alert(result.msg); //彈出提示框
if(result.code == 100){
//員工保存成功，
//1.關閉模態框
$("#empAddModal").modal("hide")
//2.來到最后一頁,顯示剛才保存的數據
//發送ajax請求顯示最后一頁數據即可
to_page(totalRecord);
}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.errorFields.empName);
}
}
}
});
});
</script>
</body>
</html>
END