承接:springboot-專案實戰:增加員工

1 修改編輯員工的按鈕

將按鈕button改為 a連結,編寫跳轉地址為修改頁面的請求並攜帶要修改的員工id作為引數

list.html

<a class="btn btn-sm btn-primary" th:href="@{/employeeUpdate/}+${employee.getId()}">編輯</a>

點選編輯按鈕後應跳轉到編輯員工的頁面

2 在員工控制器中新增跳轉到修改員工頁面的方法

通過引數id查詢出要修改的員工的資料,作為員工資訊的回顯,和所有部門的資料,作為員工部門屬性的選項

EmployeeController.java

//去修改員工的頁面
@GetMapping("/employeeUpdate/{id}")
public String employeeUpdate(@PathVariable("id")Integer id,Model model){
    //查出原來的資料
    Employee employee = employeeDao.getEmployeeById(id);
    Collection<Department> allDepartment = departmentDao.getAllDepartment();
    model.addAttribute("employee",employee);
    model.addAttribute("allDepartment",allDepartment);
    return "emp/update";
}
 

3 編寫修改員工的頁面

複製 add.html 到 emp 資料夾下並修改名稱為 update.html, 然後對裡面的表單部分進行修改,將後臺傳遞的資料顯示出來

update.html

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
   <form th:action="@{/employeeUpdate}" method="post">
      <input type="hidden" name="id" th:value="${employee.getId()}">
      <div class="form-group">
         <label>LastName</label>
         <input type="text" th:value="${employee.getLastName()}" class="form-control" name="lastName" placeholder="kuangshen">
      </div>
      <div class="form-group">
         <label>Email</label>
         <input type="email" th:value="${employee.getEmail()}" class="form-control" name="email" placeholder="[email protected]">
      </div>
      <div class="form-group">
         <label>Gender</label><br/>
         <div class="form-check form-check-inline">
            <input th:checked="${employee.getGender()==1}" 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 th:checked="${employee.getGender()==0}" 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>
         <!--我們在controller  接收的是一個Employee,所以我們需要提交的是其中的一個屬性!-->
         <select class="form-control" name="department.id">
            <option th:selected="${department.getId()==employee.department.getId()}" th:each="department:${allDepartment}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}"></option>
         </select>
      </div>
      <div class="form-group">
         <label>Date</label>
         <input type="text" th:value="${#dates.format(employee.getDate(),'yyyy-MM-dd HH:mm:ss')}" class="form-control" name="date" placeholder="kuangstudy">
      </div>
      <button type="submit" class="btn btn-primary">修改</button>
   </form>
</main>
 

需要注意的是: id要寫成隱藏域,性別單選框和部門下拉框顯示後臺資料的方式

4 在員工控制器中新增修改員工的方法

//修改員工
@PostMapping("/employeeUpdate")
public String employeeUpdate(Employee employee){
    employeeDao.employeeAdd(employee);
    return "redirect:/getAllEmployee";
}

5 啟動程式,測試

登入成功後,切換到員工列表,然後點選編輯按鈕

成功跳轉到,編輯員工頁面,並且要修改員工的資料都顯示正確

將員工的每一條資料都進行修改後,點選修改按鈕

頁面跳轉到員工列表

確認資料資料與我們剛才輸入的一致,修改員工資料成功

6 總結

• 相同的請求可以通過是否攜帶引數跳轉到不同的方法
• thymeleaf語法連結攜帶引數的方式,使用restFull風格: th:href="@{/employeeUpdate/}+${employee.getId()}"
• thymeleaf語法單選框設定值: th:checked="${employee.getGender()==1}"
• thymeleaf語法下拉框設定值: th:selected="${department.getId()==employee.department.getId()}"
• thymeleaf語法日期格式化顯示: th:value="${#dates.format(employee.getDate(),'yyyy-MM-dd HH:mm:ss')}"