【spring boot笔记】10.（Web 开发）修改员工信息

最新推荐文章于 2023-03-14 09:49:11 发布

AXIMI

最新推荐文章于 2023-03-14 09:49:11 发布

阅读量1.1k

点赞数

分类专栏：笔记 spring boot

本文链接：https://blog.csdn.net/AXIMI/article/details/88855943

版权

spring boot 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

笔记

5 篇文章 0 订阅

订阅专栏

本篇笔记的内容是通过员工列表中的【edit】按钮来实现编辑员工信息。
在这里插入图片描述
点击【edit】按钮后，进入员工编辑页面：

员工编辑页面中，已经预先渲染出了这个员工的一些信息。对这些信息进行修改后，点击【修改】按钮，可以完成修改过程，并返回到员工页表总页面：

写个控制器实现页面的跳转：

控制器的代码如下：

@GetMapping("emp/{id}")
    public String toEditPage(@PathVariable("id") Integer id,Model model){
        Employee employee=employeeDao.get(id);
        model.addAttribute("emp",employee);
        Collection<Department> departments=departmentDao.getDepartments();
        model.addAttribute("depts",departments);

        // 修改和添加使用同一个html文件
        return "emp/add";
    }

由于每个员工的信息都不一样，所以在url地址中，通过员工的id来获取该员工的信息以方便在修改员工信息的页面展示
@PathVariable注解可以获取url地址中的参数【id】，并且赋值给控制器中的参数Integer id
通过【id】可以获得员工的信息，我们将该信息存储到变量"emp"中
同时提取所有的【部门信息】，并存储到变量"depts"中
将这些参数传递到文件(templates/)emp/add(.html)中

修改一下add.html文件

add.html是原来新增员工时显示的页面，这里编辑员工的页面也可以使用这个页面。修改add.html文件如下：

<!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" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">

		<!-- Custom styles for this template -->
		<link href="asserts/css/dashboard.css" th: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>
		<div th:replace="~{commons/bar::topbar}"></div>

		<div class="container-fluid">
			<div class="row">
				<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 th:action="@{/add_staff}" method="post">
						<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>
							<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}">1</option>
							</select>
						</div>
						<div class="form-group">
							<label>Birth</label>
							<input type="text" name="birth" class="form-control" placeholder="2000/1/1" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy/MM/dd')}">
						</div>
						<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" th:src="@{/asserts/js/jquery-3.2.1.slim.min.js}"></script>
		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="/asserts/js/popper.min.js"></script>
		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="/asserts/js/bootstrap.min.js"></script>

		<!-- Icons -->
		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="/asserts/js/feather.min.js"></script>
		<script>
			feather.replace()
		</script>

		<!-- Graphs -->
		<script type="text/javascript" src="asserts/js/Chart.min.js" th: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>

首先需要注意的是，在引入静态资源时一定要通过thymeleaf将这些资源引入过来不然可以页面没有办法正常渲染

下面是依然是引入公共组件，并通过activeUri传值实现按钮高亮：

<div th:replace="~{commons/bar::topbar}"></div>

<div th:replace="~{commons/bar::sidebar(activeUri='emps')}"></div>

可以看到代码中所有的input栏内都有判定emp是否为空的情况，例如：

<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">

th:value="${emp!=null}?${emp.lastName}"语句的意思是，当我们emp为空时，表示没有emp的值传入，即我们是通过【新增员工】这个方式进入add.html的，因此就不显示当前员工emp（也没有这个员工）的值；否则就显示传入进来的该员工的一些值。

同时在显示员工生日的部分，格式化了一下日期的显示格式：

<input type="text" name="birth" class="form-control" placeholder="2000/1/1" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy/MM/dd')}">

按钮部分同样需要做处理：

<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'"></button>

上面这段代码的功能是，当我们是从员工列表页面中的【添加员工】方式进入到add.html页面中时，这里显示的是【添加】；否则显示【修改】

同时，当我们选择添加新员工时，是通过post的方式返回数据；
而当我们选择编辑员工信息时是通过put方式返回的数据，因此需要进行一下区分。
另一方面，表单页面只支持post和get，如果需要使用put方式上传数据，可以通过配置HiddenHttpMethodFilter来实现，具体步骤为：
1、配置HiddenHttpMethodFilter
2、页面创建post表单
3、创建名为"_method"的input项

创建的隐藏域代码如下：

<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>
<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/>

第一句的意思是，当员工不为空（即是从编辑员工信息的按钮进入）时，返回数据的方式为put
第二句的意思是，当我们修改完员工信息时，返回的数据还应该包括该员工的id号，这样我们才知道改的是哪个员工的信息

增加控制器实现页面跳转

首先在员工列表页面中设置一下【编辑】按钮：

<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">edit</a>

这个语句可以实现鼠标悬停显示连接的url地址
emp是每次浏览器进入localhost:8080/show_all_emps 这个地址时，通过控制器来获得所有employee的信息然后传进来的
点击这个【edit】按钮会进入localhost:8080/emp/{id} 这样的地址中

对应编辑按钮的控制器为：

 @GetMapping("emp/{id}")
    public String toEditPage(@PathVariable("id") Integer id,Model model){
        Employee employee=employeeDao.get(id);
        model.addAttribute("emp",employee);
        Collection<Department> departments=departmentDao.getDepartments();
        model.addAttribute("depts",departments);

        // 修改和添加使用同一个html文件
        return "emp/add";
    }

@PathVariable 可以将url地址中的参数【id】提取出来，并传递给控制器中的参数Integer id
当前员工的信息被存入变量"emp"中，所有部门的信息存入"depts"中，然后将这个变量传入add.html文件中

AXIMI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【spring boot笔记】10.（Web 开发）修改员工信息

本篇笔记的内容是通过员工列表中的【edit】按钮来实现编辑员工信息。点击【edit】按钮后，进入员工编辑页面：员工编辑页面中，已经预先渲染出了这个员工的一些信息。对这些信息进行修改后，点击【修改】按钮，可以完成修改过程，并返回到员工页表总页面：写个控制器实现页面的跳转：控制器的代码如下：@GetMapping("emp/{id}") public String toEdi...
复制链接

扫一扫