SpringBoot-19-模块开发-员工修改/删除

5.6.7 员工修改/删除

列表页面添加编辑按钮，注意请求参数的格式用restful类型

<td>
   <a class="btn btn-primary btn-sm" th:text="编辑" th:href="@{/empls/toUpdPage/}+${item.id}"></a>
   <a class="btn btn-danger btn-sm" th:text="删除"></a>
</td>

控制层跳转编辑页面方法

@RequestMapping("/toUpdPage/{id}")
public String toUpdPage(@PathVariable("id") Integer id,Model model){

    Employee employee = employeeDao.getEmployeeById(id);
    model.addAttribute("emp",employee);
    //为遍历部门列表做准备
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    return "emps/updPage";
}

修改页面emps/updPage.html,注意需要一个id隐藏域，用th:value=“

<!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="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">    <!-- Custom styles for this template -->    <link 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/commons.html::topBar}"></div><div class="container-fluid">    <div class="row">        <div th:replace="~{commons/commons.html::sidebar(active='emps-list')}"></div>        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">            <h2>Section title</h2>            <form th:action="@{/empls/toAddPage}" method="post">                <input type="hidden" th:value="${emp.id}" name="id" class="form-control">                <div class="form-group">                    <label>LastName</label>                    <input type="text" th:value="${emp.lastName}" name="lastName" class="form-control" placeholder="名字">                </div>                <div class="form-group">                    <label>Email</label>                    <input type="email"  th:value="${emp.email}" name="email" class="form-control" placeholder="1176244270@qq.com">                </div>                <div class="form-group">                    <label>Gender</label><br>                    <div class="form-check form-check-inline">                        <input class="form-check-input" type="radio" th:checked="${emp.gender==1}" name="gender" value="1">                        <label class="form-check-label">男</label>                    </div>                    <div class="form-check form-check-inline">                        <input class="form-check-input" type="radio" name="gender" th:checked="${emp.gender==0}" value="0">                        <label class="form-check-label">女</label>                    </div>                </div>                <div class="form-group">                    <label>department</label>                    <!--我们controller.接收的是一个EmpLoyee,而我们提交的是其中的一个属性，所以我们需要对应的是其中的一个属性-->                    <select class="form-control" name="department.id">                        <option th:each="item:${departments}" th:text="${item.departmentName}"                                th:value="${item.id}" th:selected="${item.id == emp.department.id}"></option>                    </select>                </div>                <div class="form-group">                    <label>Birth</label>                    <input type="text" class="form-control" placeholder="生日" name="birth" th:value="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm:ss')}">                    <button class="btn btn-primary">修改</button>                </div>            </form>        </main>    </div></div><!-- Bootstrap core JavaScript================================================== --><!-- Placed at the end of the document so the pages load faster --><script type="text/javascript" th:src="@{/asserts/js/jquery-3.2.1.slim.min.js}" ></script><script type="text/javascript" th:src="@{/asserts/js/popper.min.js}" ></script><script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}" ></script><!-- Icons --><script type="text/javascript" th:src="@{/asserts/js/feather.min.js}" ></script><script>    feather.replace()</script><!-- Graphs --><script type="text/javascript" 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>

测试结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1PBUthJ-1661049775058)(…/typora-user-images/image-20220802223144025.png)]

注意修改页面时间格式的问题，th:value=”${#dates.format(emp.birth,‘yyyy-MM-dd HH:mm:ss’)}”同时还要配合配置文件的时间配置

spring:
  mvc:
    format:
      date-time: yyyy-MM-dd HH:mm:ss:SSS
      date: yyyy-MM-dd HH:mm:ss

员工删除，在emps/list.html页面添加删除按钮

<td>
   <a class="btn btn-primary btn-sm" th:text="编辑" th:href="@{/empls/toUpdPage/}+${item.id}"></a>
   <a class="btn btn-danger btn-sm" th:text="删除" th:href="@{/empls/toDelete/}+${item.id}"></a>
</td>

控制层EmployeeControlle添加删除方法即可

@GetMapping("/toDelete/{id}")
public String toDelete(@PathVariable("id") Integer id){
    employeeDao.delateEmployeeById(id);
    return "redirect:/empls/toList";
}