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

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

开发者学堂课程【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月前
|
运维 Devops
云效产品使用报错问题之代码域修改配置后,删除了代码组,代码未删除,但是项目现在看不到了,如何解决
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
|
6月前
|
开发者 iOS开发
【教程】修改应用程序开发者名称的步骤
【教程】修改应用程序开发者名称的步骤
|
前端开发 数据库
JavaWeb05(删除&增加&修改功能实现&连接数据库)
JavaWeb05(删除&增加&修改功能实现&连接数据库)
|
4月前
|
SQL 前端开发 Java
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
若依修改03----利用若依代码生成器,生成课程管理的前后端代码,课程的条件搜索接口,一旦数据表创建好了,直接交给若依代码的生成器就好了,配置代码生成信息,包含基本信息,字段信息,生成信息。字段信息决
|
5月前
|
监控 Java
记录页面修改差异(java注解实现)
记录页面修改差异(java注解实现)
|
6月前
|
移动开发 前端开发 JavaScript
动态获取新增的数据+项目实例介绍
动态获取新增的数据+项目实例介绍
89 0
|
6月前
|
Python
【python自动办公】批量更改Excel中大量工作表的内容(附源码 有注释)
【python自动办公】批量更改Excel中大量工作表的内容(附源码 有注释)
178 0
|
存储 网络协议 测试技术
一份可用的vRA8演示用例
对于很多想要了解VMware vRealize Automation8(后文称vRA)的朋友来说,最令人头疼的不是如何去部署单节点或者三节点群集,而是在部署成功后,如何与包括vCenter(后文称VC)、NSX DataCenter(后文称NSX)等VMware的基础架构组件集成,然后以“演示用例”的形式进行展示和交付。 其实就提供给vRA的演示用例来说,无论是VMware的论坛或者国外的博客,国内外的大拿们都会分享一些干货。无非就是需要各路“攻城狮”花点耐心去搜索、学习和实践。 话接上回,笔者今天准备分享一下自己的演示用例,提供给各位朋友参考。
|
SQL Java 关系型数据库
从系统报表页面导出20w条数据到本地只用了4秒,我是如何做到的
最近有个学弟找到我,跟我描述了以下场景: 他们公司内部管理系统上有很多报表,报表数据都有分页显示,浏览的时候速度还可以。但是每个报表在导出时间窗口稍微大一点的数据时,就异常缓慢,有时候多人一起导出时还会出现堆溢出。 他知道是因为数据全部加载到jvm内存导致的堆溢出。所以只能对时间窗口做了限制。以避免因导出过数据过大而引起的堆溢出。最终拍脑袋定下个限制为:导出的数据时间窗口不能超过1个月。
|
应用服务中间件
【JavaWeb】案例一:记录用户的上次访问时间
本期主要介绍案例一:记录用户的上次访问时间
190 0
【JavaWeb】案例一:记录用户的上次访问时间