员工管理系统五：增删改员工实现

最新推荐文章于 2023-02-25 22:23:40 发布

少年西西

最新推荐文章于 2023-02-25 22:23:40 发布

阅读量1.2k

点赞数

分类专栏： G_互联网分布式技术 # G1_SpringBoot 文章标签： java

本文链接：https://blog.csdn.net/qq_45554909/article/details/112224922

版权

G_互联网分布式技术同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

G1_SpringBoot

35 篇文章 0 订阅

订阅专栏

1、添加员工实现

表单及细节优化

1、将添加员工信息改为超链接

<h2>
员工信息
	<span style="float:right">
		<a class=" btn btn-sm btn-success" th:href="@{/addEmp}">添加员工</a>
	</span>
</h2>

2、编写对应的controller

   //查询所有员工，返回list页面
    @GetMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeService.selectAllEmployees();
        model.addAttribute("emps",employees);
        // ThymeleafProperties文件下
        //  前缀：public static final String DEFAULT_PREFIX = "classpath:/templates/";
        //后缀public static final String DEFAULT_SUFFIX = ".html";
        return "emp/list";
    }

    //到添加员工页面
    @GetMapping("/addEmp")
    public String addPage(Model model){
        //查出所有部门的deptno
        Collection<Department> departments = departmentService.selectAllDepartment();
        model.addAttribute("departments",departments);
        return "emp/add";
    }

    //员工添加功能，使用post接收
    //接收前端传递的参数，自动封装成为对象[要求前端传递的参数名，和属性名一致
    @PostMapping("/addEmp")
    public String addEmp(Employee employee){

        employeeService.insert(employee);//保存员工信息

        // 回到员工列表页面，可以使用redirect或者forward，就不会被视图解析器解析
        return "redirect:/emps";
    }

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

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

		<div class="container-fluid">
			<div class="row">

			<div th:insert="~{commons/bar::sitebar(activeUrl='list.html')}"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
					<h2>
						添加的员工信息
					</h2>

					<div class="table-responsive">
						<form th:action="@{/addEmp}" method="post">
							<div class="form-group">
								<input type="text" class="form-control" name="ename" placeholder="员工姓名"><br/>
								<input type="text" class="form-control" name="job" placeholder="职位"><br/>
								<input type="text" class="form-control" name="mgr" placeholder="上级领导编号"><br/>
								<input type="text" class="form-control" name="hiredate" placeholder="入职时间（格式：year/month/day）"><br/>
								<input type="text" class="form-control" name="sal" placeholder="月薪"><br/>
								<input type="text" class="form-control" name="comm" placeholder="奖金">
							</div>
							<div class="form-group">
								<select class="form-control" name="deptno">
									<option selected>所属部门</option>
									<option th:each="dept:${departments}"
											th:text="${dept.getDname()}"
											th:value="${dept.getDeptno()}">
									</option>
								</select>
							</div>

							<button class="btn btn-lg btn-primary btn-block" type="submit" >添加</button>
						</form>
					</div>
				</main>
			</div>
		</div>

		<!-- Bootstrap core JavaScript
    ================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script type="text/javascript" src="js/jquery-3.2.1.slim.min.js"></script>
		<script type="text/javascript" src="js/popper.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>

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

		<!-- Graphs -->
		<script type="text/javascript" src="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>

在这里插入图片描述

修改时间格式

SpringMVC会将页面提交的值转换为指定的类型，默认日期是按照 / 的方式提交；比如将2019/01/01 转换为一个date对象。
那思考一个问题？我们能不能修改这个默认的格式呢？

我们去看webmvc的自动配置文件；找到一个日期格式化的方法，我们可以看一下

@Bean
@Override
public FormattingConversionService mvcConversionService() {
	Format format = this.mvcProperties.getFormat();
	WebConversionService conversionService = new WebConversionService(new DateTimeFormatters()
			.dateFormat(format.getDate()).timeFormat(format.getTime()).dateTimeFormat(format.getDateTime()));
	addFormatters(conversionService);
	return conversionService;
}

调用了
在这里插入图片描述
点进以上任意一个方法，会发现所在类声明了三个参数

		/**
		 * Date format to use, for example `dd/MM/yyyy`.
		 */
		private String date;

		/**
		 * Time format to use, for example `HH:mm:ss`.
		 */
		private String time;

		/**
		 * Date-time format to use, for example `yyyy-MM-dd HH:mm:ss`.
		 */
		private String dateTime;

这个在配置类application.properties中，所以我们可以自定义的去修改这个时间格式化问题，我们在我们的配置文件中修改一下；

#自定义时间格式
spring.mvc.format.date=yyyy-MM-dd

就可以再添加员工时输入YYYY-MM-DD格式了，但不支持YYYY/MM/DD的格式了。
在这里插入图片描述

2、员工信息修改

逻辑分析：
我们要实现员工修改功能，需要实现两步；
1、点击修改按钮，去到编辑页面，我们可以直接使用添加员工的页面实现
2、显示原数据，修改完毕后跳回列表页面！
实现

1、我们去实现一下，首先修改跳转链接的位置；

	<!--操作-->
<a class=" btn btn-sm btn-primary" th:href="@{/updateEmp/} + ${emp.getEmpno()}">编辑</a>

2、编写对应的controller

    //跳转到修改页面
    @GetMapping("/updateEmp/{empno}")
    public String updatePage(@PathVariable("empno") Integer empno,
                             Model model) {
//        System.out.println(empno);

        //根据empno查出员工
        Employee employee = employeeService.selectByPrimaryKey(empno);

//        System.out.println(employee);

        //将员工信息返回到页面
        model.addAttribute("emp",employee);

        //查出所有部门的deptno
        Collection<Department> departments = departmentService.selectAllDepartment();
        model.addAttribute("departments",departments);

        return "emp/update";
    }

    //修改完后返回list页面
    @PostMapping("/updateEmp")
    public String updateEmp(Employee employee) {

        System.out.println(employee);
        //修改信息
        employeeService.updateByPrimaryKey(employee);

        return "redirect:/emps";
    }

3、我们需要在这里将add页面复制一份，改为update页面；需要修改页面，将我们后台查询数据回显

<div class="table-responsive">
<form th:action="@{/updateEmp}" method="post">
	<div class="form-group">
		<input type="hidden" class="form-control" name="empno" th:value="${emp.getEmpno()}"><br/>
		<label>员工姓名</label>
		<input type="text" class="form-control" name="ename" th:value="${emp.getEname()}"><br/>
		<label>职位</label>
		<input type="text" class="form-control" name="job" th:value="${emp.getJob()}"><br/>
		<label>上级领导编号</label>
		<input type="text" class="form-control" name="mgr" th:value="${emp.getMgr()}"><br/>
		<label>入职时间（格式：year/month/day）</label>
		<input type="text" class="form-control" name="hiredate" th:value="${#dates.format(emp.getHiredate(),'yyyy/MM/dd')}"><br/>
		<label>月薪</label>
		<input type="text" class="form-control" name="sal" th:value="${emp.getSal()}"><br/>
		<label>奖金</label>
		<input type="text" class="form-control" name="comm" th:value="${emp.getComm()}">
	</div>
	<div class="form-group">
		<label>所属部门</label>
		<select class="form-control" name="deptno">
			<option th:selected="${emp.deptno == dept.deptno}"
					th:each="dept:${departments}"
					th:text="${dept.getDname()}"
					th:value="${dept.getDeptno()}">
			</option>
		</select>
	</div>

	<button class="btn btn-lg btn-primary btn-block" type="submit" >修改</button>
</form>

使用日期工具，进行日期的格式化！

<label>入职时间（格式：year/month/day）</label>
<input type="text" class="form-control" name="hiredate" th:value="${#dates.format(emp.getHiredate(),'yyyy/MM/dd')}"><br/>

测试成功

3、删除员工实现

1、list页面，编写提交地址

<a class=" btn btn-sm btn-danger" id="deleteEmp"
			th:href="@{/deleteEmp/} + ${emp.getEmpno()}">
			删除</a>

2、编写Controller

 @GetMapping("/deleteEmp/{empno}")
    public String deleteEmp(@PathVariable("empno") Integer empno){
        employeeService.deleteByPrimaryKey(empno);
        return "redirect:/emps";
    }

少年西西

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
员工管理系统五：增删改员工实现

1、添加员工实现表单及细节优化1、将添加员工信息改为超链接<h2>员工信息 <span style="float:right"> <a class=" btn btn-sm btn-success" th:href="@{/addEmp}">添加员工</a> </span></h2>2、编写对应的controller //查询所有员工，返回list页面 @GetMapping("/emps")
复制链接

扫一扫