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标签进行传递
<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
这里面的href链接，传递的不仅仅是emp请求，同时在后面还跟着id参数的传递，但是在地址栏里面，也显示
将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）