1.实现员工添加功能
(1)在list.html中的main中添加一个员工添加按钮,实现跳转到员工添加界面 (th:href="@{/emp}"对应后台的@GetMapping("/emp"))
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <!-- 此处添加按钮 --> <h2><a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}">员工添加</a></h2> <div class="table-responsive"> <table class="table table-striped table-sm"> <thead> <tr> <th>#</th> <th>lastName</th>
(2)在src/main/resources/templates/emp中新增一个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.0.0/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> <!--引入抽取的topbar--> <!--模板名:会使用thymeleaf的前后缀配置规则进行解析--> <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> <div class="form-group"> <label>LastName</label> <input type="text" class="form-control" placeholder="zhangsan"> </div> <div class="form-group"> <label>Email</label> <input type="email" class="form-control" placeholder="[email protected]"> </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"> <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"> <label class="form-check-label">女</label> </div> </div> <div class="form-group"> <label>department</label> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <label>Birth</label> <input type="text" class="form-control" placeholder="zhangsan"> </div> <button type="submit" class="btn btn-primary">添加</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="../../static/asserts/js/jquery-3.2.1.slim.min.js"></script> <script type="text/javascript" src="../../static/asserts/js/popper.min.js"></script> <script type="text/javascript" src="../../static/asserts/js/bootstrap.min.js"></script> <!-- Icons --> <script type="text/javascript" src="../../static/asserts/js/feather.min.js"></script> <script> feather.replace() </script> <!-- Graphs --> <script type="text/javascript" src="../../static/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>
(3)在src/main/java/com/azuma/springboot/controller/EmployeeController.java中来到员工添加页面的方法toAddPage(注意,添加方法前先注入Dao)
//先在开头注入departmentDao @Autowired DepartmentDao departmentDao;
然后添加toAddPage方法
//来到员工添加页面 @GetMapping("/emp") public String toAddPage(Model model){ //来到添加页面,查出所有的部门,在页面显示 Collection<Department> departments = departmentDao.getDepartments(); model.addAttribute("depts",departments); return "emp/add"; }
(4)上面可知,用户的部门信息被添加到了depts中,返回add.html页面,修改相关的代码
<div class="form-group"> <label>department</label> <!--提交的是部门的id--> <select class="form-control" name="department.id"> <option th:selected="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option> </select> </div>
(5)重启服务器进行测试可以看到部门已经可以进行选择了
2.补充添加界面,用户点击添加按钮可以发送POST请求
(1)add.html中的form表单中添加action请求
<form th:action="@{/emp}" method="post">
(2)在src/main/java/com/azuma/springboot/controller/EmployeeController.java中书写添加员工的addEmp方法
//员工添加 //SpringMVC自动将请求参数和入参对象的属性进行一一绑定;要求请求参数的名字和javaBean入参的对象里面的属性名是一样的 @PostMapping("/emp") public String addEmp(Employee employee){ //来到员工列表页面 System.out.println("保存的员工信息:"+employee); //保存员工 employeeDao.save(employee); // redirect: 表示重定向到一个地址 /代表当前项目路径 // forward: 表示转发到一个地址 return "redirect:/emps"; }
(3)继续修改add.html中的请求参数的名字,使其与javaBean入参的对象里面的属性名是一样的
<form th:action="@{/emp}" method="post"> <div class="form-group"> <label>LastName</label> <!--此处添加 name="lastName",下面其它地方也是一样--> <input name="lastName" type="text" class="form-control" placeholder="zhangsan"> </div> <div class="form-group"> <label>Email</label> <input name="email" type="email" class="form-control" placeholder="[email protected]"> </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"> <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"> <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:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option> </select> </div> <div class="form-group"> <label>Birth</label> <input name="birth" type="text" class="form-control" placeholder="zhangsan" > </div> <button type="submit" class="btn btn-primary">添加</button> </form>
注意:(此时提交会出现400错误,因为日期格式不正确)
提交的数据格式不对:生日:日期;
2017-12-12;2017/12/12;2017.12.12;
日期的格式化;SpringMVC将页面提交的值需要转换为指定的类型;
2017-12-12---Date; 类型转换,格式化;
默认日期是按照/的方式;
(4)在src/main/resources/application.properties中配置日期格式
spring.mvc.date-format=yyyy-MM-dd
(5)重启服务器进行测试提交,按照此格式提交即可
PS.如果日期还是有问题的话,看看src/main/resources/templates/emp/list.html中的生日那项是不是<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>(因为这个是后面才用到的功能),建议修改成<td th:text="${emp.birth}"></td>看看