下载来添加编辑页面,我们给编辑按钮加上路径
利用拼串的形式来给编辑加上/emp/id的路径,这样我们启动服务器,就可以看到,把鼠标放到编辑按钮上边会出现路径就是emp+id
然后我们在EmployeeController里边写上跳转路径
@GetMapping("/emp/{id}") // @PathVariable表示的是路径中的变量 public String toEdgePage(@PathVariable("id") Integer id, Model model) { Employee employee = employeeDao.get(id); model.addAttribute("emp", employee); //查询得到id所表示的员工,传入model Collection<Department> departments = departmentDao.getDepartments(); //查出所有的部门,来实现列表的循环 model.addAttribute("deps", departments); return "emps/add"; //返回修改页面,这里我们把修改和添加写成一个页面,然后稍作修改 }
然后我们在add.html里边进行要编辑的员工的内容回显
后台取出emp,然后拿到各个内容
当然这样是有一定问题的,毕竟添加员工页面是不需要进行回显的,只有编辑才需要,所以我们要判断add页面是用于编辑了还是用于添加了
添加页面是没有emp这个传过来的参数的,而编辑 页面则是有的
所以我们可以在回调之前进行判断
同时我们也要对添加这个按钮做修改
如果是添加就显示添加,否则显示修改
<form th:action="@{/emp}" method="post"> <div class="form-group"> <label>LastName</label> <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null} ? ${emp.lastName}"> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" class="form-control" placeholder="zhangsan@example.com" th:value="${emp!=null} ? ${emp.email}"> </div> <div class="form-group"> <label>Gender</label> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null} ? ${emp.gender==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" th:checked="${emp!=null} ? ${emp.gender==0}"> <label class="form-check-label">女</label> </div> </div> <div class="form-group"> <label>Department</label> <select class="form-control" name="department.id"> <option th:value="${dep.id}" th:each="dep:${deps}" th:text="${dep.departmentName}" th:selected="${emp!=null} ? ${deps.id == emp.department.id}"></option> </select> </div> <div class="form-group"> <label>Birth</label> <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null} ? ${#dates.format(emp.birth, 'yyyy-MM-dd')}"> </div> <button type="submit" class="btn btn-primary" th:text="${emp != null} ? '修改' : '添加'">添加</button> </form>
重启服务器,然后我们点击编辑就可以完成
当然这样还不能修改,我们在添加的时候用的是/emp 请求是post
那么我们进行修改编辑的时候要用put请求
有一个方法可以给表单指定请求方式, 先在application.properties主配置文件里加上这句配置
spring.mvc.hiddenmethod.filter.enabled=true
然后我们在form表单里写上如下:
<input type="hidden" name="_method" value="put" th:if="${emp != null}" />
含义为:如果是修改页面,也就是emp不为空,那么就用put请求,否则就是表单的的post
当然如果是修改的话要根据id来修改,我们还需要在form表单里边提交id,所以我们再写一个框框来获得id
然后我们去EmployeeController里添加修改方法
@PutMapping("/emp") public String updateEmployee(Employee employee) { employeeDao.save(employee); return "redirect:/emps"; }
重启的服务器
