Spring boot day5 对数据的操作

一、添加数据

1.1 添加表单

<form th:action="@{/emp}" method="post">
    <div class="form-group">
        <label>LastName</label>
        <input type="text" class="form-control" placeholder="zhangsan" name="lastName">
    </div>
        <div class="form-group">
            <label>Email</label>
            <input type="email" class="form-control" placeholder="zhangsan@xx.com" name="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">
                <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>
            <select class="form-control" name="department.id">
                <option th:value="${dept.id}" th:each="dept:${depa}" th:text="${dept.departmentName}">1</option>

            </select>
        </div>
        <div class="form-group">
            <label>birth</label>
            <input type="text" class="form-control" placeholder="zhangsan" name="birth">
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
</form>

1.2 展示所有数据

<table class="table table-striped table-sm">
   <thead>
      <tr>
         <th>#</th>
         <th>lastName</th>
         <th>email</th>
         <th>gender</th>
         <th>department</th>
         <th>birth</th>
      </tr>
   </thead>
   <tbody>
   <tr th:each="emp:${emps}">
      <td th:text="${emp.id}"></td>
      <td th:text="${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, 'dd/MM/yyyy HH:mm')}"></td>
      <td>
         <button class="btn btn-sm btn-primary">编辑</button>
         <button class="btn btn-sm btn-danger">删除</button>
      </td>
   </tr>
   </tbody>
</table>

1.3 展示所有数据的处理逻辑

@GetMapping("/emps")
public  String List(Model model){
    Collection<Employee> all = employee.getAll();
    model.addAttribute("emps", all);
    return "emp/list";
}
}

<li class="nav-item">
   <a class="nav-link" th:href="@{/emps}" href="#">
   .......
  员工管理
   </a>
</li>

1.4 添加数据

• 添加页面中的标签中需要一个name属性的值与实体类中的属性一一对应
• 下拉列表框的name属性在<select>标签中体现

  <select class="form-control" name="department.id">

• 点击添加按钮，进行添加

//员工添加
@PostMapping("/emp")
public  String addEmp(Employee employee){
    employeeDao.save(employee);
    return "redirect:/emps";
}

1.5 修改日期格式

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

默认是yyyy/MM/dd格式，这个方法不行的话换下面的：在实体类中添加:

@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date birth;

二、修改数据

2.1 修改编辑按钮

• 路径带上员工ID，用+符号带上

<a class="btn btn-sm btn-primary" th:href="@{/emp/ + ${emp.id}">编辑</a>

2.2 修改页面和添加页面相似

三、删除数据

3.1 在html中的配置

<form th:action="@{/emp/}+${emp.id}" method="post">
   <input type="hidden" name="_method" value="delete"/>
</form>

<button type="submit" th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>

<form id="deleteEmpForm" method="post">
   <input type="hidden" name="_method" value="delete"/>
</form>

<script>
   $(".deleteBtn").click(function(){

   $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
   return false;
   });
</script>

3.2 删除逻辑

@DeleteMapping("/emp/{id}")
public String deleteMessage(@PathVariable("id") Integer id) {
    employeeDao.delete(id);
    return "redirect:/emps";
}

3.3删除概述

删除数据后，再返回到list页面

四、前后端交互

4.1 前后端通过表单传递数据

• 前端传来的数据类型是:Content-Type
  application/x-www-form-urlencoded; charset=UTF-8
• 后端可以用request.getParam接收