承接springboot-專案實戰:展示員工列表

1 增加新增員工的按鈕

在員工列表的上面增加一個新增員工的按鈕

list.html

<h2><a class="btn btn-sm btn-success" th:href="@{/employeeAdd}">新增員工</a></h2>

2 在員工控制器中編寫處理跳轉到員工新增頁面請求的方法

package com.lv.controller;

import com.lv.dao.DepartmentDao;
import com.lv.dao.EmployeeDao;
import com.lv.pojo.Department;
import com.lv.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;

@Controller
public class EmployeeController {
    @Autowired
    EmployeeDao employeeDao;
    @Autowired
    DepartmentDao departmentDao;
    @RequestMapping("/getAllEmployee")
    public String getAllEmployee(Model model){
        Collection<Employee> allEmployee = employeeDao.getAllEmployee();
        model.addAttribute("allEmployee",allEmployee);
        return "/emp/list";
    }
    @GetMapping("/employeeAdd")
    public String toAddEmployee(Model model){
        Collection<Department> allDepartment = departmentDao.getAllDepartment();
        model.addAttribute("allDepartment",allDepartment);
        return "emp/add";
    }
}
 

填寫員工的部門欄位時,需要查詢出部門表,將部門表的資料,作為員工的部門欄位的選項

3 編寫新增員工頁面

在emp資料夾下建立一個add.html 然後將 list.html的內容複製到裡面,將展示員工的表格部分,修改為增加員工資料的表單,側邊欄和導航欄內容完全一致,不要修改.

add.html

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
   <form th:action="@{/employeeAdd}" method="post">
      <div class="form-group">
         <label>LastName</label>
         <input type="text" class="form-control" name="lastName" placeholder="kuangshen">
      </div>
      <div class="form-group">
         <label>Email</label>
         <input type="email" 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 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>
         <!--我們在controller  接收的是一個Employee,所以我們需要提交的是其中的一個屬性!-->
         <select class="form-control" name="department.id">
            <option 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" class="form-control" name="date" placeholder="kuangstudy">
      </div>
      <button type="submit" class="btn btn-primary">新增</button>
   </form>
</main>
 

add.html 是通過 list.html 複製修改而成的,將list.html中展示員工資料的表格替換為以上的程式碼,其它的程式碼沒有修改.

4 在員工控制器中編寫增加員工的方法

EmployeeController.java

@PostMapping("/employeeAdd")
public String AddEmployee (Employee employee){
    employeeDao.employeeAdd(employee);
    return "redirect:/getAllEmployee";
}

5 對日期格式處理

springboot預設的日期格式是 yyyy/MM/dd 將這個格式修改為我們自己定義的方式,在springboot配置檔案中指定日期格式

application.properties

#時間日期格式化
spring.mvc.format.date-time=yyyy-MM-dd HH:mm:ss

在員工實體類的日期欄位上加入格式化註解

Employee.java

@DateTimeFormat(fallbackPatterns = "yyyy-MM-dd HH:mm:ss")
private Date date;

6 啟動專案測試

登入成功後,訪問員工列表,點選新增員工按鈕

成功跳轉到新增員工頁面,輸入增加的員工資訊,注意:部門資訊,是從已有部門中選擇,日期要按照我們設定的格式填寫,填寫完成後點選新增按鈕

跳轉到員工列表,確認新增成功

7 總結

• 相同的請求,通過不同的請求方式(post,get) 可以請求到不同的方法處理
• 員工物件的部門屬性是一個部門物件型別,我們在前端提交時,只需要提交一個部門物件的一個屬性比如:id.如果要提交一個物件,需要再寫一個form表達,十分麻煩不推薦
• 日期處理:前端展示使用thymeleaf的日期格式化,接收日期型別資料要在springboot配置檔案中配置日期格式,也可以使用預設的,這個格式要和實體類中的日期格式對應