【Springboot总结】16 RestfulCRUD -- 03

总结

1. 员工的 CRUD

2. <input  type="hidden" name="_method" value="Delete"/>

一、员工列表的显示

1. 前端发请求  

bar.html

list.html

2. 服务器端

3. 前端展示

【提示】日期的格式化

二、员工的添加

1. 前端发送请求 

界面的跳转--跳转到添加界面

2. 服务端

 //来到员工添加页面
    @GetMapping("/emp")
    public String toAddPage(Model model){
        //来到添加页面,查出所有的部门，在页面显示
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("depts",departments);
        return "emp/add";
    }

3. 添加界面

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

<div class="form-group">
   <label>LastName</label>
   <input name="lastName" type="text" class="form-control">
</div>

<div class="form-group">
	<label>Email</label>
	<input name="email" type="email" class="form-control">
</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>
    <!--提交的是部门的id-->
	<select class="form-control" name="dept.id">
		<option th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
	</select>
</div>

<div class="form-group">
	<label>Birth</label>
	<input name="birth" type="text" class="form-control">
</div>

<button type="submit" class="btn btn-primary">添加</button>

</form>

4. 服务端的处理

 //员工添加
    //SpringMVC自动将请求参数和入参对象的属性进行一一绑定；要求请求参数的名字和javaBean入参的对象里面的属性名是一样的
    @PostMapping("/emp")
    public String addEmp(Employee employee){
        //来到员工列表页面

        System.out.println("保存的员工信息："+employee);
        //保存员工
        employeeDao.save(employee);
        // redirect: 表示重定向到一个地址  /代表当前项目路径
        // forward: 表示转发到一个地址
        return "redirect:/emps";
    }

【提示】添加界面的日期格式问题

扩展：日期格式化

默认日期是按照/的方式； 2017/12/12.可以通过配置修改时间格式

这样页面提交数据时就可以使用上面配置的格式了！

三、员工信息的修改

1. 前端发送请求

2. 服务端回显需要修改的员工的原信息

3. 前端显示

<form th:action="@{/emp}" method="post">
<!--发送put请求修改员工数据-->
<!--
	1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）
	2、页面创建一个post表单
	3、创建一个input项，name="_method";值就是我们指定的请求方式
-->
<input type="hidden" name="_method" value="put"/>
<input type="hidden" name="id" th:value="${emp.id}">

<div class="form-group">
   <label>LastName</label>
   <input name="lastName" type="text" class="form-control" th:value="${emp.lastName}">
</div>

<div class="form-group">
	<label>Email</label>
	<input name="email" type="email" class="form-control" th:value="${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.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.gender==0}">
	  <label class="form-check-label">女</label>
    </div>
</div>



<div class="form-group">
	
    <label>department</label>
    <!--提交的是部门的id-->
	<select class="form-control" name="dept.id">
		<option th:selected="${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}"></option>
	</select>
</div>

<div class="form-group">
	<label>Birth</label>
	<input name="birth" type="text" class="form-control" th:value="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
</div>

<button type="submit" class="btn btn-primary">修改</button>

</form>

【提示】表单的请求时Put类型

4. 服务处理

四、员工的删除

1. 前端

（1）自定义属性 th:attr

 （2）在table外面写一个表单

（3）写script

【提示】表单的请求时Delete类型

2. 服务端