[SpringBoot 1.5] SpringBoot 新增範例

我們說到新增功能

他應該要包含兩個步驟

1 點進去進入到一個可以填寫空白資訊的頁面(employee>Get)

2 輸入完新增的資訊然後按下儲存鍵, 完成新增項目的儲存(employee>Post)

從畫面過來, 一開始是點擊這個標籤

<a href="emp" th:href="@{/emp}" class="btn btn-sm btn-success">員工添加</a>

然後會進到controller, 因為裡面會要將所有可以選取的Department顯示出來,

所以要先getDepartments再放到model中

@GetMapping("/emp")
public String toAddPage(Model model){
    // 來到添加頁面, 查出所有的部門, 在頁面顯示
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("depts",departments);
    return "emp/add";
}

這裡的Department類別

public class Department {

   private Integer id;
   private String departmentName;

}

這是Dao

@Repository
public class DepartmentDao {

   private static Map<Integer, Department> departments = null;
   
   static{
      departments = new HashMap<Integer, Department>();
      
      departments.put(101, new Department(101, "D-AA"));
      departments.put(102, new Department(102, "D-BB"));
      departments.put(103, new Department(103, "D-CC"));
      departments.put(104, new Department(104, "D-DD"));
      departments.put(105, new Department(105, "D-EE"));
   }
   
   public Collection<Department> getDepartments(){
      return departments.values();
   }
   
   public Department getDepartment(Integer id){
      return departments.get(id);
   }
   
}

然後畫面上的form是這樣

<form th:action="@{/emp}" method="post">

  <input type="hidden" name="_method" value="put" th:if="${emp != null}">
  <input type="hidden" name="id" th:value="${emp != null} ? ${emp.id}">
  <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 name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp != null} ? ${emp.email}">
  </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" 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="${dept.id}" th:each="dept : ${depts}" th:text="${dept.departmentName}" th:selected="${emp != null} ? ${dept.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 HH:mm:ss')}">
  </div>
  <button type="submit" class="btn btn-primary" th:text="${emp != null} ? '修改' : '添加'"></button>
</form>

其中我們可以看到拿出depts塞到dept中, 他會需要將id塞到value中, 要特別注意一下

那麼他送出, 就是一個Employee的model

這樣畫面上是使用name來做對應屬性

而department則要用department.id來對應

這個form發出的是Post請求

@PostMapping("/emp")
public String addEmp(Employee employee){
    System.out.println("保存的員工信息: "+employee);
    employeeDao.save(employee);
    return "redirect:/emps";
}

但是記得進入的時候要重新導向redirect

而以下是dao的 save功能

private static Integer initId = 1006;

public void save(Employee employee){
   if(employee.getId() == null){
      employee.setId(initId++);
   }
   
   employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
   employees.put(employee.getId(), employee);
}

還有一個日期要做補充

通常預設日期會為20xx/xx/xx 

如果要格式化日期, 是可以在application.properties中做控制的, 如以下

spring.mvc.date-format=yyyy-mm-dd

[SpringBoot 1.5] SpringBoot 查詢範例

當我們要將員工資訊顯示出來

這就是一個查詢功能

我們的model為一個Employee類別 屬性如下

public class Employee {

   private Integer id;
    private String lastName;

    private String email;
    //1 male, 0 female
    private Integer gender;
    private Department department;
    private Date birth;

然後我們設置一個controller中的方法

@Repository
public class EmployeeDao {

@GetMapping("/emps")
public String list(Model model){
    Collection<Employee> employees = employeeDao.getAll();

    model.addAttribute("emps",employees);
    return "emp/list";
}

我們使用model.addAttribute來設置model中內容

當他點選到該連結, 就可以導向過來controller再return給list頁面

<a class="nav-link active"
   th:class="${activeUri=='emps.html'?'nav-link active':'nav-link'}"
   href="#" th:href="@{/emps}">

其中搭配著employeeDao為

@Repository
public class EmployeeDao {

private static Map<Integer, Employee> employees = null;

@Autowired
private DepartmentDao departmentDao;

static{
   employees = new HashMap<Integer, Employee>();

   employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
   employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
   employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
   employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
   employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
}

private static Integer initId = 1006;


public Collection<Employee> getAll(){
   return employees.values();
}

}

而前端的頁面為

<tr th:each="emp:${emps}">
  <td th:text="${emp.id}"></td>
  <td>[[${emp.lastName}]]</td>
  <td th:text="${emp.email}"></td>
  <td th:text="${emp.gender} == 0 ? '女' : '男'"></td>
  <td th:text="${emp.department.departmentName}"></td>
  <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm:ss')}"></td>
  <td>
    <!--<a th:href="@{/emp/} + ${emp.id}" class="btn btn-sm btn-primary">编辑</a>-->
    <a th:href="@{/emp/} + ${emp.id}" class="btn btn-sm btn-primary">编辑</a>
    <button th:attr="del_uri = @{/emp/} + ${emp.id}" type="submit" class="btn btn-sm btn-danger deleteBtn">删除</button>
  </td>
</tr>

為一個使用th:each來遍歷model中emps的每一筆資料, 時間格是可以用dates.format

查出每筆資料有兩種寫法, 一種為th:text="${model.attribute}"

另外一種為[[${model.attribute}]]