<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
/*引用jsp-api*/
pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>员工列表</title>
<script src="${APP_PATH}/resources/js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="${APP_PATH}/resources/bootstrap/css/bootstrap.min.css">
<%--link rel="stylesheet" href="${APP_PATH}/resources/bootstrap/css/bootstrap-theme.min.css">--%>
<script src="${APP_PATH}/resources/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<%--搭建显示页面--%>
<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 id="table_add" type="button" class="btn btn-primary btn" data-target="#myModal">
新增
</button>
<button id="table_del" class="btn btn-danger">删除</button>
</div>
</div>
<%--显示表格数据--%>
<div class="row">
<div class="col-md-12">
<%--设置表的网格状:table-bordered--%>
<table class="table table-hover" id="emps_table">
<thead>
<tr>
<th checkbox="true">ID</th>
<th>Name</th>
<th>Email</th>
<th>Gender</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">
<nav aria-label="Page navigation">
</nav>
</div>
</div>
</div>
<%--员工修改的模态框--%>
<div class="modal fade" id="updateModal" 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">员工修改</h4>
</div>
<div class="modal-body">
<p>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">EmpName</label>
<div class="col-sm-10">
<%-- 只读:Readonly--%>
<input type="text" name="empName" class="form-control" id="empName_update" Readonly
placeholder="请输入员工用户名">
<input type="hidden" name="empId" id="empId_update"/>
<%-- 静态实列--%>
<%--<p id="empName_update" class="form-control-static"></p>--%>
<%--添加校验信息--%>
<span></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_update"
placeholder="请输入合法邮箱">
<%--添加校验信息--%>
<span></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_update" value="1" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_update" value="2"> 女
</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="deptId"></select>
</div>
</div>
</form>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btn_update">更新</button>
</div>
</div>
</div>
</div>
<%--员工添加的模态框--%>
<div class="modal fade" id="myModal" 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">员工添加</h4>
</div>
<div class="modal-body">
<p>
<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"
placeholder="请输入员工用户名">
<%--添加校验信息--%>
<span></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="empEmail_add"
placeholder="请输入合法邮箱">
<%--添加校验信息--%>
<span></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" value="1" checked> 男
</label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add" value="2"> 女
</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="deptId"></select>
</div>
</div>
</form>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="model_save">保存</button>
</div>
</div>
</div>
</div>
</body>
<script type="application/javascript">
var totalRecord;
$(window).on('load', function () {
$("input[name='checkbox']").prop("checked", true);
});
window.onload = function () {
$("tr:checkbox").prop("checked", this.checked);
to_page(1);
};
function to_page(page) {
$.ajax({
url: '/emps',
dataType: 'json',
data: "page=" + page,
type: 'get',
success: function (result) {
if (result.code === 0) {
build_emps_table(result);
totalRecord = result.pageInfo.total;
build_page_info(result);
build_page_nav(result);
}
}
})
}
function build_emps_table(result) {
var emps = result.pageInfo.list;
$("#emps_table tbody").empty();
$.each(emps, function (index, item) {
var empId = $("<td></td>").append(item.empId);
var empName = $("<td></td>").append(item.empName);
var gender = $("<td></td>").append(item.gender ? '男' : '女');
var email = $("<td></td>").append(item.email);
var deptName = $("<td></td>").append(item.department.deptName);
var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
.append("<span style='padding-right: 3px;'></span>").addClass("glyphicon glyphicon-paperclip")
.append("编辑");
editBtn.attr("edit-id", item.empId);
var delBtn = $("<button></button>").addClass("btn btn-primary btn-sm delete_btn")
.append("<span style='padding-right: 3px;'></span>").addClass("glyphicon glyphicon-trash")
.append("删除");
var btnOperation = $("<td></td>").append(editBtn).append(delBtn);
$("<tr></tr>").append(empId)
.append(empName)
.append(email)
.append(gender)
.append(deptName)
.append(btnOperation)
.appendTo("#emps_table tbody");
})
}
function build_page_info(result) {
$("#page_info_area").empty();
$("#page_info_area").append("当前" + result.pageInfo.pageNum + "页,总" + result.pageInfo.pages + "页,总记录数" + result.pageInfo.total);
}
function build_page_nav(result) {
$("#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("<span></span>").append("«"));
if (result.pageInfo.hasPreviousPage == false) {
firstPageLi.addClass("disabled");
prePageLi.addClass("disabled");
} else {
firstPageLi.click(function () {
to_page(1)
});
prePageLi.click(function () {
to_page(result.pageInfo.pageNum - 1);
});
}
var nextPageLi = $("<li></li>").append($("<a></a>").append("<span></span>").append("»"));
var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr('href', '#'));
if (result.pageInfo.hasNextPage == false) {
nextPageLi.addClass("disabled");
lastPageLi.addClass("disabled");
} else {
nextPageLi.click(function () {
to_page(result.pageInfo.pageNum + 1);
});
lastPageLi.click(function () {
to_page(result.pageInfo.pages);
});
}
ul.append(firstPageLi).append(prePageLi);
$.each(result.pageInfo.navigatepageNums, function (index, item) {
var numLi = $("<li></li>").append($("<a></a>").append(item));
if (result.pageInfo.pageNum == item) {
numLi.addClass("active");
}
numLi.click(function () {
to_page(item);
});
ul.append(numLi);
});
ul.append(nextPageLi).append(lastPageLi);
var navEle = $("<nav></nav>").append(ul);
navEle.appendTo("#page_nav_area");
}
</script>
<script type="text/javascript">
$("#table_add").click(function () {
$("#myModal form")[0].reset();
show_validate_msg("#empName_add", null, null);
show_validate_msg("#empEmail_add", null, null);
getDepts("#myModal select");
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
});
function validate_add_form() {
var empName = $("#empName_add").val();
var regName = /(^[a-z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if (!regName.test(empName)) {
show_validate_msg("#empName_add", "error", "需要输入6-16位字母和数字或者2-5位中文的组合");
return false;
} else {
show_validate_msg("#empName_add", "success", "");
}
var email = $("#empEmail_add").val();
var regEmail = /^([a-z0-9_-]+)@([\da-z.-]+)\.([a-z.]{2,6})$/;
if (!regEmail.test(email)) {
show_validate_msg("#empEmail_add", "error", "邮箱格式不合法");
return false;
} else {
show_validate_msg("#empEmail_add", "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);
} else {
$(ele).next("span").text(msg);
}
}
$("#empName_add").change(function () {
var empName = this.value;
$.ajax({
url: '/checkName',
data: 'empName=' + empName,
type: 'post',
dataType: 'json',
success: function (rs) {
if (rs.code === 0) {
show_validate_msg("#empName_add", "success", rs.msg);
$("#model_save").attr("is_save", "success");
} else {
show_validate_msg("#empName_add", "error", rs.msg);
$("#model_save").attr("is_save", "error");
}
}
})
});
$("#model_save").click(function () {
var data = $("#myModal form").serialize();
if (!validate_add_form()) {
return false;
}
if ($(this).attr("is_save") == "error") {
return false;
}
$.ajax({
url: '/save',
type: 'post',
dataType: 'json',
data: data,
success: function (rs) {
if (rs.code === 0) {
$('#myModal').modal('hide');
to_page(totalRecord);
} else {
console.log(rs);
if (rs.error.empName != undefined) {
console.log(rs.error.empName);
show_validate_msg("#empName_add", "error", rs.error.empName);
}
if (rs.error.email != undefined) {
show_validate_msg("#email_add", "error", rs.error.email);
}
}
}
})
});
function getDepts(ele) {
$(ele).empty();
$.ajax({
url: '/depts',
type: 'get',
dataType: 'json',
success: function (rs) {
if (rs.code === 0) {
$.each(rs.depts, function () {
var optionEle = $("<option></option>").append(this.deptName).attr("value", this.deptId);
optionEle.appendTo(ele)
})
}
}
})
}
</script>
<script type="text/javascript">
$(document).on("click", ".edit_btn", function () {
getEmp($(this).attr('edit-id'));
getDepts("#updateModal select");
$("#updateModal").modal({
backdrop: 'static'
})
});
function getEmp(empId) {
$.ajax({
url: '/emp/' + empId,
dataType: 'json',
type: 'get',
success: function (rs) {
show_validate_msg("#email_update", null, null);
if (rs.code === 0) {
var empData = rs.emp;
$("#empName_update").val(empData.empName);
$("#email_update").val(empData.email);
$("#updateModal input[name=gender]").val([empData.gender]);
$("#updateModal select").val([empData.deptId]);
$("#empId_update").val(empData.empId);
}
}
})
}
$("#btn_update").click(function () {
var data = $("#updateModal form").serialize();
$.ajax({
url: '/update',
type: 'post',
dataType: 'json',
data: data + "&_method=PUT",
success: function (rs) {
if (rs.code !== 0) {
console.log(rs);
if (rs.error.email != undefined) {
show_validate_msg("#email_update", "error", rs.error.email);
}
} else {
$('#updateModal').modal('hide');
to_page(totalRecord);
}
}
})
})
</script>
</html>
package cn.blue.controller;
import java.util.HashMap;
import java.util.Map;
import cn.blue.bean.Employee;
import cn.blue.service.EmployeeService;
import cn.blue.utils.Result;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.validation.FieldError;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import javax.validation.Valid;
import javax.validation.constraints.Pattern;
import java.util.List;
@Controller
public class EmployeeController {
@Resource
EmployeeService employeeService;
@RequestMapping("/list")
public String home() {
return "emps";
}
@ResponseBody
@RequestMapping("/emps")
public Result getEmpsWithJson(@RequestParam(value = "page", defaultValue = "1") Integer page) {
PageHelper.startPage(page, 5);
List<Employee> emps = employeeService.getAll();
PageInfo pageInfo = new PageInfo(emps, 5);
return Result.success().add("pageInfo", pageInfo).setMsg("查询成功");
}
@ResponseBody
@GetMapping("/emp/{empId}")
public Result getEmp(@PathVariable("empId") Integer empId){
try {
Employee emp = employeeService.getEmp(empId);
return Result.success().setMsg("查询成功").add("emp",emp);
} catch (Exception e) {
e.printStackTrace();
return Result.error(500).setMsg("查询失败").add("error",e.getMessage());
}
}
@PutMapping("/update")
@ResponseBody
public Result updateEmp(@Valid Employee employee, BindingResult result) {
if (result.hasErrors()) {
Map<String, Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for (FieldError fieldError : errors
) {
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Result.error(500).setMsg("保存失败").add("error", map);
} else {
try {
employeeService.updateEmp(employee);
return Result.success().setMsg("保存成功");
} catch (Exception e) {
e.printStackTrace();
return Result.error(500).setMsg("保存失败").add("error", e.getMessage());
}
}
}
@RequestMapping("/find")
public String getEmps(@RequestParam(value = "page", defaultValue = "1") Integer page, ModelMap map) {
PageHelper.startPage(page, 5);
List<Employee> emps = employeeService.getAll();
PageInfo pageInfo = new PageInfo(emps, 5);
map.put("pageInfo", pageInfo);
return "list";
}
@PostMapping("/save")
@ResponseBody
public Result saveEmp(@Valid Employee employee, BindingResult result) {
if (result.hasErrors()) {
Map<String, Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for (FieldError fieldError : errors
) {
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Result.error(500).setMsg("保存失败").add("error", map);
} else {
employeeService.saveEmp(employee);
return Result.success().setMsg("保存成功");
}
}
@PostMapping("/checkName")
@ResponseBody
public Result checkName(@RequestParam("empName") String empName) {
String regx = "(^[a-z0-9_-]{6,16}$)|(^[\\u2E80-\\u9FFF]{2,5})$";
if(!empName.matches(regx)){
return Result.error(500).setMsg("需要输入6-16位字母和数字或者2-5位中文的组合");
}
boolean b = employeeService.checkName(empName);
if (b) {
return Result.success().setMsg("此用户名可用");
}
return Result.error(500).setMsg("此用户名重复");
}
}
package cn.blue.controller;
import cn.blue.bean.Department;
import cn.blue.service.DepartmentService;
import cn.blue.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.List;
@Controller
@RequestMapping("/depts")
public class DepartmentController {
@Autowired
private DepartmentService departmentService;
@GetMapping
@ResponseBody
public Result getDepts(){
List<Department> list = departmentService.getDepts();
return Result.success().add("depts",list).setMsg("查询成功");
}
}