一、明确需求
保存 Employee对象 ：
需要 empName email gender dId Id(因为是自增的所以不需要)
明确使用 rest 风格的操作方式 ：
/depts 请求url
post 请求方式
数据存放在表单中，然后给springmvc pojo 赋值到bean中。
二、实现添加用户模态框
1、在原来的添加用户按钮上绑定事件
原来的按钮：
<!-- 按钮 --> <div class="row"> <div class="ml-auto mr-5"> <button class="btn btn-primary btn-sm" id="emp_add_modal_btn"> <i class="icon-file-alt icon-large"></i> 新增 </button> <button class="btn btn-danger btn-sm"> <i class="icon-trash icon-large"></i> 删除 </button> </div> </div>
js绑定事件：
//添加模态框的事件，一开始忘记添加#号了，emp_add_modal_btn
$("#emp_add_modal_btn").click(function(){
//发送ajax请求，弹出部门信息，显示在下拉列表中
getDepts();
//弹出模态框，static 代表 点击模态框 外面也不能关闭 模态框
$("#empAddModal").modal({
backdrop:"static"
});
});
getDepts()方法是为了从服务器端获取，部门以便在下拉框中填充。
function getDepts(){
$.ajax({
url:"${APP_PATH}/depts",
type:"GET",
success:function(result){
console.log(result);
//显示部门信息，在下拉列表中
// $("#dept_add_select") 换一种找法
//$("#empAddModal select")
//清除之前留下的 option 标签
$("#empAddModal select").empty();
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
optionEle.appendTo("#empAddModal select");
});
}
});
}
2、服务器返回部门信息
新建 DepartmentController.java
package com.ssm.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.ssm.crud.bean.Department;
import com.ssm.crud.service.DepartmentService;
import com.ssm.crud.util.Msg;
@Controller
public class DepartmentController {
@Autowired
DepartmentService departmentService;
@ResponseBody
@RequestMapping("/depts")
public Msg getDepts(){
return Msg.success().add("depts", departmentService.getAll()) ;
}
}
新建DepartmentService.java
package com.ssm.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.ssm.crud.bean.Department;
import com.ssm.crud.mapper.DepartmentMapper;
@Service
public class DepartmentService {
@Autowired
DepartmentMapper departmentMapper;
public List<Department> getAll(){
return departmentMapper.selectByExample(null);
}
}
Msg.java 之前已经提到过了
package com.ssm.crud.util;
import java.util.HashMap;
import java.util.Map;
/**
* 通用的返回的类
*
* @author lfy
*
*/
public class Msg {
//状态码 100-成功 200-失败
private int code;
//提示信息
private String msg;
//返回给浏览器的数据
private Map<String, Object> extend = new HashMap<String, Object>();
public static Msg success(){
Msg result = new Msg();
result.setCode(100);
result.setMsg("处理成功！");
return result;
}
public static Msg fail(){
Msg result = new Msg();
result.setCode(200);
result.setMsg("处理失败！");
return result;
}
public Msg add(String key,Object value){
this.getExtend().put(key, value);
return this;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public Map<String, Object> getExtend() {
return extend;
}
public void setExtend(Map<String, Object> extend) {
this.extend = extend;
}
}
3、新建模态框并整合部门信息
<!-- 员工添加的模态框 -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">员工添加</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group row">
<label class="col-sm-3 col-form-label">empName</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="empName_add_input" name="empName" value="empName">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">email</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="email_add_input" name="email" value="[email protected]">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">gender</label>
<div class="col-sm-9">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender1_add_input" checked value="M">
<label class="form-check-label" >男</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="gender2_add_input" value="F">
<label class="form-check-label" >女</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">departName</label>
<div class="col-sm-6">
<!-- 部门提交部门id即可 -->
<select class="custom-select my-1 mr-sm-2" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_add_save_btn">保存</button>
</div>
</div>
</div>
</div>
前面已经在js中 ，将ajax返回的结果填入到了select标签中了：如下
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").attr("value",this.deptId).append(this.deptName);
optionEle.appendTo("#empAddModal select");
});
三、实现保存员工功能
1、前端部分：用js给保存按钮添加ajax事件：
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//1.将模态框框中的数据提交给服务器进行保存
//方式ajax请求，保存员工
//alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
console.log(result);
//alert(result.msg);
//1、员工保存成功，需要关闭模态框。
$("#empAddModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(totalRecords);
}
});
});
特别提醒：js中 totalRecords 变量，是在 js代码一开始就有的
<script type="text/javascript">
//定义 全局变量，总记录数
var totalRecords ;
//1、页面加载完成以后，直接去发送ajax请求,要到分页数据
$(function(){
//去首页
to_page(1);
});
。。。
然后在 显示页面信息时，被赋值：
$("#page_info_area").append("当前第"+result.extend.pageInfo.pageNum+
"页，总共"+result.extend.pageInfo.pages+"页,总"+result.extend.pageInfo.total+"记录")
totalRecords = result.extend.pageInfo.total;
最后，在因为保存员工信息，跳转时，跳转到 最大记录数页：PageHelp 自动过滤最大页数
//添加模态框 保存事件
$("#emp_add_save_btn").click(function(){
//1.将模态框框中的数据提交给服务器进行保存
//方式ajax请求，保存员工
//alert($("#empAddModal form").serialize());
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//经过测试，服务器返回的是 json形式的 Msg对象， 到了浏览器中 变成了 result。所以: result.msg 相当于Msg对象里面的msg属性
console.log(result);
//alert(result.msg);
//1、员工保存成功，需要关闭模态框。
$("#empAddModal").modal("hide");
//2、来到最后一页，显示刚才的数据；发送ajax请求，显示最后一页数据即可(用总记录数请求，保证是请求足够大，mybatis 分页插件 已经在mybatis-config.xml中配置了数据合法性校验，只会返回最后一页数据)
to_page(totalRecords);
}
});
});
2、后端部分：
EmployeeController.java 【核心代码】
@Autowired
EmployeeService employeeService;
/**
* 员工保存
*
* @return
*/
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public Msg saveEmpWithJson(Employee employee){
System.out.println(employee);
employeeService.saveEmp(employee);
return Msg.success();
}
EmployeeService.java【核心代码】
@Autowired
EmployeeMapper employeeMapper;
public void saveEmp(Employee employee) {
//下面这个方法 是全部插入 ,包括 连自增的id 都是
//employeeMapper.insert(employee);
//下面这个方法是 有选择的插入，自增Id 被忽略 不会插入。
employeeMapper.insertSelective(employee);
}