SpringBoot简单项目学习笔记05(员工信息提交、员工信息修改、员工信息删除)

Easter79
• 阅读 463

github项目地址:https://github.com/H-Designer/SpringBoot

上一节总结的是:页面列表选项的高亮设置、员工信息的添加页面设定(https://www.cnblogs.com/zhaochunhui/p/11332048.html

这一节要总结的是:员工信息提交、员工信息修改

##11、添加员工信息进行提交
填写form表单
<form th:method="post" th:action="${/emp}}">
然后在后台的controller进行提交的数据的接受
//员工信息提交到后台进行接受
//SpringMvc自动将请求参数和入参对象的属性进行一一绑定,要求请求参数的名称和Javabean和入参对象的名称保持一致
@PostMapping("/emp")
public String addEmp(Employee employee){
System.out.println("保存的信息"+employee);
//保存员工信息
employeeDao.save(employee);
//来到员工列表页面
//redirect:表示重定向到一个地址 /代表的是当前项目的路径
//forward:表示转发到一个地址
return "redirect:/emps";
}
}
在后台将信息接收之后,通过dao里面的save函数,将信息进行保存,并且将地址进行重定向,重定向到“/emps”,然后还是会通过
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employee = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employee);
//thymeleaf会自动进行拼接
//classpath:/tempaltes/xxx.html
return "emp/list";
}
这个controller中的解析器进行解析,然后控制跳转的情况,在这里再次根据controller然后employeeDao.getAll();得到所有的信息,然后将信息存储到model中,在emp/下的list进行接收和显示。
这里就是在controller先进行数据的保存,然后进行地址的重定向,在进行获取所有的员工信息,然后返回到list界面进行显示

##12、将员工的信息进行修改操作

首先就是将list里面的按钮进行链接的修改,将button改成是a标签进行传递

编辑

这里面的href链接,传递的不仅仅是emp请求,同时在后面还跟着id参数的传递,但是在地址栏里面,也显示

SpringBoot简单项目学习笔记05(员工信息提交、员工信息修改、员工信息删除)

将id参数传递到后台,在controller中,
在这里首先在修改的时候,在add的双重界面,首先就是会进行查询该员工的信息,根据id进行查询,然后将查询到的信息进行封装,
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id") Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp",employee);
System.out.println("这里是员工信息修改(先查出员工的信息)的模块"+employee);
//修改页面要显示所有的部门信息进行修改的选择
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
//回到修改页面(add是一个修改添加合为一体的界面)
return "emp/add";
} 

根据员工的id进行查询该员工的所有的信息,然后在封装在model中进行addAttribute,除此之外,要修改员工的信息,还要查到所有的部门信息供员工修改信息时候进行选择,所以就涉及到了
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
将部门的信息也进行封装,然后进行addAttribute,然后进行页面的转向,转向到add的添加和修改的双重界面
并且在add的界面要显示当前员工的信息,所以在界面就要进行数据的接受,还要判断这是添加页面还是修改页面;
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<link href="../asserts/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet">
<link href="../asserts/css/dashboard.css" rel="stylesheet">
<style type="text/css">
/* Chart.js */
@-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
@keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head>
<body>
<!--引入抽取到的topbar-->
<!--模版名会使用thymeleaf的配置命名规则进行解析-->
<div th:replace="commons/bar::topbar"></div>
</div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏-->
<!--引入sidebar-->
<div th:replace="commons/bar::#sidebar(activeuri='emps')"></div>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<!--需要区分是添加功能还是修改功能,根据不同的功能进行显示不同的效果-->
<form method="post" th:action="@{/emp}">
<!--发送put请求修改员工信息-->
<!--
1、SpringMVC中进行配置HiddenHttpMethodFilter(SpringBoot自动配置)
2、页面创建一个post表单
3、创建一个input项,name="_method",值就是我们指定的请求方式
-->
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>
<div class="form-group">
<label>LastName</label>
<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${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!=null}?${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!=null}?${emp.gender}==0">
<label class="form-check-label">女</label>
</div>
</div>
<div class="form-group">
<label>department</label>
<!--提交的收拾部门信息的id-->
<select class="form-control" name="department.id">
<option th:selected="${emp!=null}?${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" placeholder="yyyy-mm-dd" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-mm-dd HH:mm')}" >
</div>
<!--${emp!=null}?${#dates.format(emp.birth,'yyyy-mm-dd')}-->
<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>
</form>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="asserts/js/popper.min.js"></script>
<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
<!-- Icons -->
<script type="text/javascript" src="asserts/js/feather.min.js"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="asserts/js/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</body>
</html>
在这里面,在填写栏,要默认显示的是员工 的信息,
<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">
placeholder="zhangsan"当th:value="${emp!=null}?${emp.lastName}"
当emp不为空的时候说明是在员工的修改页面过来的,在emp不为空的时候,在这个栏块就要默认的显示emp的lastname的属性,如果emp为空,则显示的就是placeholder="zhangsan"
在员工信息进行提交的时候,提交的是put请求,需要从post转化为put请求
这时候就需要进行三个步骤将post转化位put
<!--
1、SpringMVC中进行配置HiddenHttpMethodFilter(SpringBoot自动配置)
2、页面创建一个post表单
3、创建一个input项,name="_method",值就是我们指定的请求方式
-->
在form表单中<form method="post" th:action="@{/emp}">
使用的就是post请求,然后我们将post进行转化即可
<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
这个就是我们转化的步骤,可以设置一个隐藏的input属性,name="_method" value="put" 在th:if="${emp!=null}"成立的情况下,就可以将post请求转化位put请求
将数据进行提交,然后在后台进行接受和分析//员工修改信息;需要将员工的id信息也提交过来
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("修改的员工信息是"+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
将员工的信息进行接受,然后进行save进行保存,然后再次重定向到emps请求,然后
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employee = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employee);
//thymeleaf会自动进行拼接
//classpath:/tempaltes/xxx.html
return "emp/list";
}
根据这个解析器进行解析,然后继续跳转到了list界面,这跳转之前,先会将所有的员工信息进行查询,然后再次封装到emps的model中,然后在前端进行接受,然后将list进行显示

##13员工信息的删除
在列表页面,除了修改操作还有删除操作,
为了解决界面的布局的好看,选择就是在创建一个表单,然后进行提交
写一个button<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
在新的form里面将post的请求转化位delete的请求
<form id="deleteEmpForm" method="post">
<input type="hidden" name="_method" th:value="delete">
</form>
写一个js
<script>
$(".deleteBtn").click(function(){
//删除当前员工的个人信息
$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
return false;
});
</script>
在这里面当deleteBtn进行点击之后,就要进行提交删除的表单,通过attr的方法将del_uri的地址链接进行提交,然后在后台进行接受
//删除员工信息
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") Integer id){
System.out.println("这里是删除员工信息模块"+id);
employeeDao.delete(id);
return "redirect:/emps";
}
删除员工的信息,就要通过获取员工信息里面的id,然后通过id进行删除该员工的所有的信息,然后在进行重定向,定向到emps请求,然后再次返回到list的界面进行新的员工列表信息的显示

下一节要总结的是:错误页面定制(https://www.cnblogs.com/zhaochunhui/p/11332089.html

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
待兔 待兔
2星期前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
2年前
Oracle——分页查询
查询员工表中,工资排名在1020之间的员工信息。select  from(    selectrownumrn,employee_id,salary      from(        selectemployee_id,salary,last_name        fromem
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
SpringBoot简单项目学习笔记05(员工信息提交、员工信息修改、员工信息删除)
github项目地址:https://github.com/HDesigner/SpringBoot(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2FHDesigner%2FSpringBoot)上一节总结的是:页面列表选项的高亮设置、员工信息的添加页面
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL 实战
项目七:各部门工资最高的员工(难度:中等)创建Employee 表,包含所有员工信息,每个员工有其对应的 Id,salary和departmentId。|Id|Name|Salary|DepartmentId|
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
6个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k