开发者学堂课程【SpringBoot快速掌握 - 核心技术:【实验】-员工修改-重用页面&修改完成 】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/612/detail/9254
【实验】-员工修改-重用页面&修改完成
内容介绍
一、 修改需要两步骤
二、 范例
三、 发生put请求修改员工数据
四、 员工修改
一、修改需要两步骤
第一步,点击编辑按钮,然后来到修改页面,修改页面和添加页面类似,将员工信息全都填写完后,再点击修改。
来到修改页面,查出员工进行信息回显,发 emp/1,员工 ID 以 get 形式请求。
List.html 页面
</thead>
<tbody>
<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' )}"></td>
<td>
<a class="btn btn-sm btn-primary"th:href="@{/emp
}
+${emp.id}">
编辑</a>
刷新页面之后,每一个编辑按钮都带着路径跟员工 ID ,
<button class="btn btn- sm btn- danger">
删除</button>
二、范例
// 来到修改页面,查出当前员工,在页面回显
@GetMapping("/emp/{id}" )
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao. get(id);
model.addAttribute(attributeName: " emp" , employee);
查哪个员工就写哪个 ID ,用 model 的方式进行回显,保存 employee 对象
//页面要显示所有的部门列表
Collectiondepartments=depastmentDao.getDepartments() ;
model . addAttribute(attributeName: "depts" ,departments);
这个页面除了表单要回显之外,整个 home 表单有一些区别,如果是添加员工,表单的请求地址是 emp ,修改员工也是 emp ,但是请求方式,添加员工是 POST 方式,修改员工是 PUT 方式;
重新登录,保证页面显示正常;
//回到修改页面( add 是一个修改添加二合一的页面);
return "emp/add" ;
修改页面要有回显值。
回显方法:
<div class="form-group">
<label>LastName</label>
<input name="lastName" type="text" class="form- control" placeholder=" zhangsan'th:value="${emp.lastName}'
<div class="form-group">
<label>Email</label>
<input name="email" type=" email" class="form- control" placeholder="zhangsan@atguigu.com">'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">女</
l
abel>
</div>
</div>
员工部门的修改先选中当前员工的部门,${当前的部门 ID }即为选中;其他内容均为以上方式相同。
Gender 单选按钮,th有个属性是 checked ,在里面传 turn 或者 fors ,可以通过 emp.gender 来判断是哪种情况
回显部门
<select class="form- control”name=" department.id">
<option th:selected=” ${dept.id==emp.department.id}” th:value="${dept.id}"th:each="
dept:${depts}" th:text=" ${ dept . departmentNam
</select>
</div>
<div class= "form-group">
<label>Birth</label>
<input name= "birth" type="text" class="form- control" placeholder=" zhangsan" th:value="${#dates} formaq( emp . birth, ' yyyy-MM-dd HH:mm' )}">
</div>
<button type="submit" class= "btn btn-primary" >
添加
</button>
<Form>
用 th.each option 便利出每一个部门,当前相应部门的员工被选入,用th相应的属性 selected,"${dept.id == emp. department . id } ',刷新页面之后,页面的值回显初来,修改生日 ${#dates} formaq( emp . birth, ' yyyy-MM-dd HH:mm' )} "刷新之后,页面生日部分显示正常
员工二合一页面:
需要区分是员工修改还是员工添加,修改才需要回显,添加不需要用到回显。如果是员工修改保存了emp对象,如果是员工添加,只有员工信息,没有添加对象。
<main role="main" class="co1-md-9 ml-sm-auto co1-1g-10 pt-3 px-4">
<!--需要区分是员工修改还是添加; -->
<form th: action= "@{/emp}" method="post">
<div class= "form- group">
<label>LastName</label>
<input name= "lastName" type="text" class="form- control" placeholder="zhangsan"th :value=”${emp!==null}${emp.lastName}”>
</div>
在选择时需要做判断,用 ${emp!==null}
,这样才不会出现添加页面出错的情况。
<button type=" submit" class="btn btn-primary"
th:text="${emp!=nu11}?
'修改':'添加">
员工修改中最重要的一项是发送。
三、发生put请求修改员工数据
1. SpringMVC 中配置 HiddenHt tpMethodFilter ;( springBoot 自动配置好的)
2.页面创建一个 post 表单
3.创建一个 input 项, name = " method ";值就是指令的请求方式
<input type= "hidden" name="_method" values " put" th:if= "$(emp!=null)"/>
这一项不是一直都有的,只有在修改页面才有的。
四、员工修改
员工修改,需要提交员工 ID
@PutMapping("/emp")
public String updateEmployee( Employee employee){
System.out.println("修改的员工数据 :"+employee);
return " redirect:/emps";
getID(=null)
没有 ID 相当于是来模拟 ID 自增给添加记录,而如果是有 ID ,拿到员工 ID 后,重新修改。
<input type= "hidden" name="id" th:if="$(emp!=null}" th:value="${emp.id}">
重启完成刷新之后,这样就不会对员工修改,和员工添加产生冲突, 添加和修改功能就正常。