【实验】-员工修改-重用页面&修改完成|学习笔记

简介: 快速学习【实验】-员工修改-重用页面&修改完成

开发者学堂课程【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">女</label>

</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}">

重启完成刷新之后,这样就不会对员工修改,和员工添加产生冲突, 添加和修改功能就正常。

相关文章
|
6月前
|
存储 前端开发 Java
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
|
6月前
|
SQL 前端开发 Java
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
|
7月前
|
监控 Java
记录页面修改差异(java注解实现)
记录页面修改差异(java注解实现)
|
8月前
|
移动开发 前端开发 JavaScript
动态获取新增的数据+项目实例介绍
动态获取新增的数据+项目实例介绍
97 0
|
8月前
|
Kubernetes 网络协议 Cloud Native
k8s学习-网络策略NetworkPolicy(概念、模版、创建、删除等)
k8s学习-网络策略NetworkPolicy(概念、模版、创建、删除等)
186 0
|
存储 NoSQL Java
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能 下
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能 下
172 0
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能   下
|
存储 缓存 NoSQL
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能 上
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能 上
148 0
社会你“小峰哥“用Java实现了管理员可以修改任意用户Session的功能   上
|
前端开发 Java 数据库
给角色分配菜单的功能后台代码的编写 | 学习笔记
快速学习给角色分配菜单的功能后台代码的编写
给角色分配菜单的功能后台代码的编写 | 学习笔记
|
开发者 Python
修改用户功能实现 | 学习笔记
快速学习 修改用户功能实现
123 0
|
JavaScript 前端开发
前端案例:我的备忘录(支持事件的增加、删除和修改,代码完整)
前端案例:我的备忘录(支持事件的增加、删除和修改,代码完整)
281 0