SpringBoot(25) —— 员工管理系统：修改员工信息

• 分析：和新增员工信息一样，当我点击修改员工信息的时候，页面应该跳转到一个新的修改信息的页面，这个页面也是提交一个表单信息

---

---

1.代码实现

• 首先，点击修改a标签，将向controller发送对应的视图跳转请求，但是注意，这里还需要传递当前这一行员工数据的id，否则在修改页面不能加载修改之前的数据供用户参考

  <a class="btn btn-primary" th:href="@{/employee/update/}+${emp.getId()}">修改</a> |
  

• 注意上面传递参数的方式，使用了+进行拼接，这显然使用的是restful风格进行参数的传递，因为url和参数之间使用的是"/"进行分割
  
• 去controller中创建对应的视图跳转方法，这个方法除了需要跳转视图，还应该按照传递的id查询出员工信息返回到前端，让前端的表单中有该员工原有信息的默认值，这样修改的时候只需要修改我们想要修改的部分即可

      @GetMapping("/update/{id}") //restful风格接收参数
      public String updateEmployeePage(@PathVariable("id") Integer id, Model model){  
          //对应的，使用注解@PathVariable 将接收的参数和参数列表中的参数一一对应，以防出错
          System.out.println("id========>"+id);
          
          //根据id把该员工原信息查询出来，并返回前端进行展示
          Employee emp = employeeDao.getEmployeeById(id);
          model.addAttribute("emp",emp);
          
          //注意：因为涉及到修改部门信息，所以我们还是需要把部门所有的信息都查询出来返回到前端，否则部门选择下拉框不能正常的显示和使用
          Collection<Department> departmentCollection = departmentDao.getDepartmentCollection();
          model.addAttribute("depts",departmentCollection);
          
          //让前端跳转到修改信息的视图
          return "Employee/update";
      }
  

• 创建update.html，这个页面上的表单形式和添加员工信息表达形式一致，并且都有默认值，默认值就是原来这个员工的信息，通过th:value="{emp.getXXX()}"即可实现

  <form th:action="@{/employee/update}" method="post">
  	<input type="hidden" name="id" th:value="${emp.getId()}">
  	<div class="form-group">
  		<label>LastName</label>
  		<input type="text" name="lastName" class="form-control" th:value="${emp.getLastName()}">
  	</div>
  	<div class="form-group">
  		<label>Email</label>
  		<input type="email" name="email" class="form-control" th:value="${emp.getEmail()}">
  	</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="0" th:checked="${emp.getGender()==0}">
  			<label class="form-check-label">男</label>
  		</div>
  	</div>
  	<div class="form-check form-check-inline">
  		<input class="form-check-input" type="radio" name="gender" value="1"  th:checked="${emp.getGender()==1}">
  		<label class="form-check-label">女</label>
  	</div>
  	<div class="form-group">
  		<label>Department</label>
  		<select class="form-control" name="department.id">
  			<option th:each="dept:${depts}" th:text="${dept.getDepartmentName()}"
  					th:value="${dept.getId()}" th:selected="${emp.getDepartment().getId()==dept.getId()}"></option>
  		</select>
  	</div>
  	<div class="form-group">
  		<label>Birth</label>
  		<input type="text" name="birth" class="form-control" th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}">
  	</div>
  	<button type="submit" class="btn btn-primary">修改</button>
  </form>
  

• 编写上面表单提交的url对应的方法

  @PostMapping("/update")
  public String updateEmployeeForm(Employee employee){
      System.err.println("debug=======>"+employee);//输出接收到的参数
      //添加操作
      employeeDao.updateEmployeeById(employee);//调用dao修改员工数据
      return "redirect:/employee/list";//返回员工信息页视图
  }
  

• 测试效果
  
  
  
  测试完成！

---

2.小结

从上面的例子可以看出我们的开发步骤

• 观察原前端素材，修改/创建前端素材，注意使用thymeleaf的语法取值和传递参数
• 去controller中创建对应响应的方法，注意调用对应的service层方法向前端返回数据 (由于这个例子中没有写数据库，所以也直接每写service层，直接通过了controller调用了dao层，这样做其实不好，因为controller层应该只是专注获取前端请求参数、调用service获取前端请求的数据、向前端返回数据并指定跳转的视图这4个功能，但是上面的例子中，每个方法中都混合了怎么实现获取请求数据的逻辑代码)
• 测试