github项目地址：https://github.com/H-Designer/SpringBoot
上一节总结的是：页面列表选项的高亮设置、员工信息的添加页面设定（https://www.cnblogs.com/zhaochunhui/p/11332048.html）
这一节要总结的是：员工信息提交、员工信息修改
1##11、添加员工信息进行提交 2填写form表单 3<form th:method="post" th:action="${/emp}}"> 4然后在后台的controller进行提交的数据的接受 5//员工信息提交到后台进行接受 6//SpringMvc自动将请求参数和入参对象的属性进行一一绑定，要求请求参数的名称和Javabean和入参对象的名称保持一致 7@PostMapping("/emp") 8public String addEmp(Employee employee){ 9System.out.println("保存的信息"+employee); 10//保存员工信息 11employeeDao.save(employee); 12//来到员工列表页面 13//redirect:表示重定向到一个地址 /代表的是当前项目的路径 14//forward:表示转发到一个地址 15return "redirect:/emps"; 16} 17} 18在后台将信息接收之后，通过dao里面的save函数，将信息进行保存，并且将地址进行重定向，重定向到“/emps”，然后还是会通过 19@GetMapping("/emps") 20public String list(Model model){ 21Collection<Employee> employee = employeeDao.getAll(); 22//放在请求域中 23model.addAttribute("emps",employee); 24//thymeleaf会自动进行拼接 25//classpath:/tempaltes/xxx.html 26return "emp/list"; 27} 28这个controller中的解析器进行解析，然后控制跳转的情况，在这里再次根据controller然后employeeDao.getAll();得到所有的信息，然后将信息存储到model中，在emp/下的list进行接收和显示。 29这里就是在controller先进行数据的保存，然后进行地址的重定向，在进行获取所有的员工信息，然后返回到list界面进行显示
##12、将员工的信息进行修改操作
首先就是将list里面的按钮进行链接的修改，将button改成是a标签进行传递
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
这里面的href链接，传递的不仅仅是emp请求，同时在后面还跟着id参数的传递，但是在地址栏里面，也显示
1将id参数传递到后台，在controller中， 2在这里首先在修改的时候，在add的双重界面，首先就是会进行查询该员工的信息，根据id进行查询，然后将查询到的信息进行封装， 3@GetMapping("/emp/{id}") 4public String toEditPage(@PathVariable("id") Integer id,Model model){ 5Employee employee = employeeDao.get(id); 6model.addAttribute("emp",employee); 7System.out.println("这里是员工信息修改（先查出员工的信息）的模块"+employee); 8//修改页面要显示所有的部门信息进行修改的选择 9Collection<Department> departments = departmentDao.getDepartments(); 10model.addAttribute("depts",departments); 11//回到修改页面（add是一个修改添加合为一体的界面） 12return "emp/add"; 13} 14 15根据员工的id进行查询该员工的所有的信息，然后在封装在model中进行addAttribute，除此之外，要修改员工的信息，还要查到所有的部门信息供员工修改信息时候进行选择，所以就涉及到了 16Collection<Department> departments = departmentDao.getDepartments(); 17model.addAttribute("depts",departments); 18将部门的信息也进行封装，然后进行addAttribute，然后进行页面的转向，转向到add的添加和修改的双重界面 19并且在add的界面要显示当前员工的信息，所以在界面就要进行数据的接受，还要判断这是添加页面还是修改页面; 20<!DOCTYPE html> 21<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ --> 22<html lang="en" xmlns:th="http://www.thymeleaf.org"> 23 24<head> 25<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 26<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 27<meta name="description" content=""> 28<meta name="author" content=""> 29<title>Dashboard Template for Bootstrap</title> 30<!-- Bootstrap core CSS --> 31<link href="asserts/css/bootstrap.min.css" rel="stylesheet"> 32<link href="../asserts/css/bootstrap.min.css" rel="stylesheet"> 33<!-- Custom styles for this template --> 34<link href="asserts/css/dashboard.css" rel="stylesheet"> 35<link href="../asserts/css/dashboard.css" rel="stylesheet"> 36<style type="text/css"> 37/* Chart.js */ 38@-webkit-keyframes chartjs-render-animation { 39from { 40opacity: 0.99 41} 42to { 43opacity: 1 44} 45} 46@keyframes chartjs-render-animation { 47from { 48opacity: 0.99 49} 50to { 51opacity: 1 52} 53} 54.chartjs-render-monitor { 55-webkit-animation: chartjs-render-animation 0.001s; 56animation: chartjs-render-animation 0.001s; 57} 58</style> 59</head> 60<body> 61<!--引入抽取到的topbar--> 62<!--模版名会使用thymeleaf的配置命名规则进行解析--> 63<div th:replace="commons/bar::topbar"></div> 64</div> 65<div class="container-fluid"> 66<div class="row"> 67<!--引入侧边栏--> 68<!--引入sidebar--> 69<div th:replace="commons/bar::#sidebar(activeuri='emps')"></div> 70<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> 71<!--需要区分是添加功能还是修改功能，根据不同的功能进行显示不同的效果--> 72<form method="post" th:action="@{/emp}"> 73<!--发送put请求修改员工信息--> 74<!-- 751、SpringMVC中进行配置HiddenHttpMethodFilter（SpringBoot自动配置） 762、页面创建一个post表单 773、创建一个input项，name="_method",值就是我们指定的请求方式 78--> 79<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/> 80<input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}"/> 81<div class="form-group"> 82<label>LastName</label> 83<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}"> 84</div> 85<div class="form-group"> 86<label>Email</label> 87<input type="email" name="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}"> 88</div> 89<div class="form-group"> 90<label>Gender</label><br/> 91<div class="form-check form-check-inline"> 92<input class="form-check-input" type="radio" name="gender" value="1" th:checked="${emp!=null}?${emp.gender}==1"> 93<label class="form-check-label">男</label> 94</div> 95<div class="form-check form-check-inline"> 96<input class="form-check-input" type="radio" name="gender" value="0" th:checked="${emp!=null}?${emp.gender}==0"> 97<label class="form-check-label">女</label> 98</div> 99</div> 100<div class="form-group"> 101<label>department</label> 102<!--提交的收拾部门信息的id--> 103<select class="form-control" name="department.id"> 104<option th:selected="${emp!=null}?${dept.id==emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">部门</option> 105</select> 106</div> 107<div class="form-group"> 108<label>Birth</label> 109<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')}" > 110</div> 111<!--${emp!=null}?${#dates.format(emp.birth,'yyyy-mm-dd')}--> 112<button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button> 113</form> 114</main> 115</div> 116</div> 117<!-- Bootstrap core JavaScript 118================================================== --> 119<!-- Placed at the end of the document so the pages load faster --> 120<script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script> 121<script type="text/javascript" src="asserts/js/popper.min.js"></script> 122<script type="text/javascript" src="asserts/js/bootstrap.min.js"></script> 123<!-- Icons --> 124<script type="text/javascript" src="asserts/js/feather.min.js"></script> 125<script> 126feather.replace() 127</script> 128<!-- Graphs --> 129<script type="text/javascript" src="asserts/js/Chart.min.js"></script> 130<script> 131var ctx = document.getElementById("myChart"); 132var myChart = new Chart(ctx, { 133type: 'line', 134data: { 135labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], 136datasets: [{ 137data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], 138lineTension: 0, 139backgroundColor: 'transparent', 140borderColor: '#007bff', 141borderWidth: 4, 142pointBackgroundColor: '#007bff' 143}] 144}, 145options: { 146scales: { 147yAxes: [{ 148ticks: { 149beginAtZero: false 150} 151}] 152}, 153legend: { 154display: false, 155} 156} 157}); 158</script> 159</body> 160</html> 161在这里面，在填写栏，要默认显示的是员工 的信息， 162<input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}"> 163placeholder="zhangsan"当th:value="${emp!=null}?${emp.lastName}" 164当emp不为空的时候说明是在员工的修改页面过来的，在emp不为空的时候，在这个栏块就要默认的显示emp的lastname的属性，如果emp为空，则显示的就是placeholder="zhangsan" 165在员工信息进行提交的时候，提交的是put请求，需要从post转化为put请求 166这时候就需要进行三个步骤将post转化位put 167<!-- 1681、SpringMVC中进行配置HiddenHttpMethodFilter（SpringBoot自动配置） 1692、页面创建一个post表单 1703、创建一个input项，name="_method",值就是我们指定的请求方式 171--> 172在form表单中<form method="post" th:action="@{/emp}"> 173使用的就是post请求，然后我们将post进行转化即可 174<input type="hidden" name="_method" value="put" th:if="${emp!=null}"/> 175这个就是我们转化的步骤，可以设置一个隐藏的input属性，name="_method" value="put" 在th:if="${emp!=null}"成立的情况下，就可以将post请求转化位put请求 176将数据进行提交，然后在后台进行接受和分析//员工修改信息;需要将员工的id信息也提交过来 177@PutMapping("/emp") 178public String updateEmployee(Employee employee){ 179System.out.println("修改的员工信息是"+employee); 180employeeDao.save(employee); 181return "redirect:/emps"; 182} 183将员工的信息进行接受，然后进行save进行保存，然后再次重定向到emps请求，然后 184@GetMapping("/emps") 185public String list(Model model){ 186Collection<Employee> employee = employeeDao.getAll(); 187//放在请求域中 188model.addAttribute("emps",employee); 189//thymeleaf会自动进行拼接 190//classpath:/tempaltes/xxx.html 191return "emp/list"; 192} 193根据这个解析器进行解析，然后继续跳转到了list界面，这跳转之前，先会将所有的员工信息进行查询，然后再次封装到emps的model中，然后在前端进行接受，然后将list进行显示 194 195##13员工信息的删除 196在列表页面，除了修改操作还有删除操作， 197为了解决界面的布局的好看，选择就是在创建一个表单，然后进行提交 198写一个button<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button> 199在新的form里面将post的请求转化位delete的请求 200<form id="deleteEmpForm" method="post"> 201<input type="hidden" name="_method" th:value="delete"> 202</form> 203写一个js 204<script> 205$(".deleteBtn").click(function(){ 206//删除当前员工的个人信息 207$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit(); 208return false; 209}); 210</script> 211在这里面当deleteBtn进行点击之后，就要进行提交删除的表单，通过attr的方法将del_uri的地址链接进行提交，然后在后台进行接受 212//删除员工信息 213@DeleteMapping("/emp/{id}") 214public String deleteEmployee(@PathVariable("id") Integer id){ 215System.out.println("这里是删除员工信息模块"+id); 216employeeDao.delete(id); 217return "redirect:/emps"; 218} 219删除员工的信息，就要通过获取员工信息里面的id，然后通过id进行删除该员工的所有的信息，然后在进行重定向，定向到emps请求，然后再次返回到list的界面进行新的员工列表信息的显示
下一节要总结的是：错误页面定制（https://www.cnblogs.com/zhaochunhui/p/11332089.html）