重新启动应用，点击Add按钮
能正常跳转至页面
修改添加表单为如下：
<form> <div class="form-group"> <label>LastName</label> <input type="text" class="form-control" placeholder="loki"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" placeholder="loki@asgard.com"> </div> <div class="form-group"> <label>Gender</label><br/> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" value="1"> <label class="form-check-label">男</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" value="0"> <label class="form-check-label">女</label> </div> </div> <div class="form-group"> <label>Department</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <button type="submit" class="btn btn-primary">添加</button> </form> 复制代码
修改employee方法，在跳转至add.html页面前需要将部门信息查出来在下拉框中展示
@GetMapping("/employee") public String employee(Model model){ Collection<Department> departments = departmentMapper.getDepartments(); model.addAttribute("departments", departments); return "employee/add"; } 复制代码
在页面下拉框中取出部门信息
重启应用
执行 Add Employee
修改form表单提交地址为th:action="@{/add}"，提交方式post，并对每个input标签增加name属性
在EmployeeController中的add()方法中调用employeeMapper的save()方法，保存新增加的Employee对象
@PostMapping("/add") public String add(Employee employee){ System.out.println(employee); employeeMapper.save(employee); return "redirect:/list"; } 复制代码
重启应用，进入添加页面
点击添加按钮，员工添加成功
控制台打印出提交的员工信息
六、Edit Employee
来到信息修改页面
点编辑按钮来到添加表单，添加和修改都是用add.html，同时回显要修改的员工信息，对编辑按钮增加超链接
<a class="btn btn-sm btn-primary" th:href="@{/edit/}+${emp.id}">EDIT</a> 复制代码
在add.html的input标签中使用th:value="${emp.latName}"来回显数据，对于单选按钮回显数据使用th:checked="${emp.gender==1}"，表达式为True就选中，否则就不会选中
选中部门使用th:selected
如果循环到的部门的id与当前员工的部门id一致就显示该部门的name
重启应用，点击EDIT按钮
可以正常回显数据
但是在list.html页面点击添加按钮，服务端后台报错
这是应为点击添加来到页面时，并没有传递employee对象，空对象获取lastName属性值，所以会报错，因此需要区分是员工修改还是员工添加，只有在employee对象不为空的时候才是编辑页面，才会进行数据回显
重新启动，点击添加按钮
页面能正常显示。
执行修改操作
对员工信息修改需要发送PUT请求，需要在表单上对请求方式进行修改
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"> 复制代码
配置文件增加配置
spring.mvc.hiddenmethod.filter.enabled=true 复制代码
EmployeeController中增加方法
@PutMapping("/add") public String edit(Employee employee){ System.out.println(employee); employeeMapper.save(employee); return "redirect:/list"; } 复制代码
重启应用，进入编辑界面，编辑并提交数据
此时控制台打印出的employee对象中的id为空，因此需要在form添加中添加一个隐藏的input框，将id传递到服务端，如下图所示
重新启动应用，再次测试
修改成功
七、Delete Employee
在EmployeeController中增加删除方法方法
@DeleteMapping("/delete/{id}") public String delete(@PathVariable("id") Integer id){ employeeMapper.delete(id); return "redirect:/list"; } 复制代码
list.html页面需要通过js来提交Delete方式的请求，删除按钮修改为如下
<td> <a class="btn btn-sm btn-primary" th:href="@{/edit/}+${emp.id}">EDIT</a> <button th:attr="del_uri=@{/delete/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">DELETE</button> </td> 复制代码
在main标签同级下增加提交的表单
<form id="deleteEmpForm" method="post"> <input type="hidden" name="_method" value="delete"/> </form> 复制代码
增加js脚本，提价表单
<script> $(".deleteBtn").click(function(){ //删除当前员工的 $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit(); return false; }); </script> 复制代码
重新启动页面，点击删除按钮
成功删除
