SpringBoot实现简单的CRUD

CRUD-员工列表

实验要求：

1）、RestfulCRUD：CRUD满足Rest风格；

URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作

2）、实验的请求架构;

3）、员工列表：

thymeleaf公共页面元素抽取

1、抽取公共片段

<div th:fragment="copy">

© 2011 The Good Thymes Virtual Grocery

</div>

2、引入公共片段

<div th:insert="~{footer :: copy}"></div>

~{templatename::selector}：模板名::选择器

~{templatename::fragmentname}:模板名::片段名

3、默认效果：

insert的公共片段在div标签中

如果使用th:insert等属性进行引入，可以不用写~{}：

行内写法可以加上：[[~{}]];[(~{})]；

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

<footer th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</footer>

引入方式

<div th:insert="footer :: copy"></div>

<div th:replace="footer :: copy"></div>

<div th:include="footer :: copy"></div>

效果

<div>

    <footer>

    &copy; 2011 The Good Thymes Virtual Grocery

    </footer>

</div>

<footer>

&copy; 2011 The Good Thymes Virtual Grocery

</footer>

<div>

&copy; 2011 The Good Thymes Virtual Grocery

</div>

引入片段的时候传入参数：

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

            <li class="nav-item">

                <a class="nav-link active"

                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"

                   href="#" th:href="@{/main.html}">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">

                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>

                        <polyline points="9 22 9 12 15 12 15 22"></polyline>

                    </svg>

                    Dashboard <span class="sr-only">(current)</span>

                </a>

            </li>

<!--引入侧边栏;传入参数-->

<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

6）、CRUD-员工添加

添加页面

<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="zhangsan@atguigu.com">

    </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>

提交的数据格式不对：生日：日期；

2017-12-12；2017/12/12；2017.12.12；

日期的格式化；SpringMVC将页面提交的值需要转换为指定的类型;

2017-12-12---Date；类型转换，格式化;

默认日期是按照/的方式；

7）、CRUD-员工修改

修改添加二合一表单

<!--需要区分是员工修改还是添加；-->

<form th:action="@{/emp}" method="post">

    <!--发送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 name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">

    </div>

    <div class="form-group">

        <label>Email</label>

        <input name="email" type="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}">1</option>

        </select>

    </div>

    <div class="form-group">

        <label>Birth</label>

        <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">

    </div>

    <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>

</form>

8）、CRUD-员工删除

            <tbody>

                                <tr th:each="emp:${emps}">

                                    <td th:text="${emp.id}"></td>

                                    <td>[[${emp.lastName}]]</td>

                                    <td th:text="${emp.email}"></td>

                                    <td th:text="${emp.gender}==0?'女':'男'"></td>

                                    <td th:text="${emp.department.departmentName}"></td>

                                    <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>

                                    <td>

                                        <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

                                        <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>

                                    </td>

                                </tr>

                            </tbody>

                        </table>

                    </div>

                </main>

                <form id="deleteEmpForm"  method="post">

                    <input type="hidden" name="_method" value="delete"/>

                </form>

            </div>

<script>
   $(".deleteBtn").click(function(){
       //删除当前员工的
       $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
       return false;
          });
</script>

EmployeeController：

package com.atguigu.springboot.controller;

import com.atguigu.springboot.dao.DepartmentDao;

import com.atguigu.springboot.dao.EmployeeDao;

import com.atguigu.springboot.entities.Department;

import com.atguigu.springboot.entities.Employee;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.*;

import java.util.Collection;

@Controller

public class EmployeeController {

    @Autowired

    EmployeeDao employeeDao;

    @Autowired

    DepartmentDao departmentDao;

    //查询所有员工返回列表页面

    @GetMapping("/emps")

    public String  list(Model model){

        Collection<Employee> employees = employeeDao.getAll();

        //放在请求域中

        model.addAttribute("emps",employees);

        // thymeleaf默认就会拼串

        // classpath:/templates/xxxx.html

        return "emp/list";

    }

    //来到员工添加页面

    @GetMapping("/emp")

    public String toAddPage(Model model){

        //来到添加页面,查出所有的部门，在页面显示

        Collection<Department> departments = departmentDao.getDepartments();

        model.addAttribute("depts",departments);

        return "emp/add";

    }

    //员工添加

    //SpringMVC自动将请求参数和入参对象的属性进行一一绑定；要求请求参数的名字和javaBean入参的对象里面的属性名是一样的

    @PostMapping("/emp")

    public String addEmp(Employee employee){

        //来到员工列表页面

        System.out.println("保存的员工信息："+employee);

        //保存员工

        employeeDao.save(employee);

        // redirect: 表示重定向到一个地址  /代表当前项目路径

        // forward: 表示转发到一个地址

        return "redirect:/emps";

    }

    //来到修改页面，查出当前员工，在页面回显

    @GetMapping("/emp/{id}")

    public String toEditPage(@PathVariable("id") Integer id,Model model){

        Employee employee = employeeDao.get(id);

        model.addAttribute("emp",employee);

        //页面要显示所有的部门列表

        Collection<Department> departments = departmentDao.getDepartments();

        model.addAttribute("depts",departments);

        //回到修改页面(add是一个修改添加二合一的页面);

        return "emp/add";

    }

    //员工修改；需要提交员工id；

    @PutMapping("/emp")

    public String updateEmployee(Employee employee){

        System.out.println("修改的员工数据："+employee);

        employeeDao.save(employee);

        return "redirect:/emps";

    }

    //员工删除

    @DeleteMapping("/emp/{id}")

    public String deleteEmployee(@PathVariable("id") Integer id){

        employeeDao.delete(id);

        return "redirect:/emps";

    }

}

　　bar.html:

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--topbar-->

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">

    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>

    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">

    <ul class="navbar-nav px-3">

        <li class="nav-item text-nowrap">

            <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a>

        </li>

    </ul>

</nav>

<!--sidebar-->

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

            <li class="nav-item">

                <a class="nav-link active"

                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"

                   href="#" th:href="@{/main.html}">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">

                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>

                        <polyline points="9 22 9 12 15 12 15 22"></polyline>

                    </svg>

                    Dashboard <span class="sr-only">(current)</span>

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link"

                   href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">

                        <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>

                        <polyline points="13 2 13 9 20 9"></polyline>

                    </svg>

                    Orders

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">

                        <circle cx="9" cy="21" r="1"></circle>

                        <circle cx="20" cy="21" r="1"></circle>

                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>

                    </svg>

                    Products

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link active" href="#" th:href="@{/emps}"

                th:class="${activeUri=='emps'?'nav-link active':'nav-link'}">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">

                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>

                        <circle cx="9" cy="7" r="4"></circle>

                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>

                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>

                    </svg>

                    员工管理

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">

                        <line x1="18" y1="20" x2="18" y2="10"></line>

                        <line x1="12" y1="20" x2="12" y2="4"></line>

                        <line x1="6" y1="20" x2="6" y2="14"></line>

                    </svg>

                    Reports

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">

                        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>

                        <polyline points="2 17 12 22 22 17"></polyline>

                        <polyline points="2 12 12 17 22 12"></polyline>

                    </svg>

                    Integrations

                </a>

            </li>

        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">

            <span>Saved reports</span>

            <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>

            </a>

        </h6>

        <ul class="nav flex-column mb-2">

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">

                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                        <polyline points="14 2 14 8 20 8"></polyline>

                        <line x1="16" y1="13" x2="8" y2="13"></line>

                        <line x1="16" y1="17" x2="8" y2="17"></line>

                        <polyline points="10 9 9 9 8 9"></polyline>

                    </svg>

                    Current month

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">

                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                        <polyline points="14 2 14 8 20 8"></polyline>

                        <line x1="16" y1="13" x2="8" y2="13"></line>

                        <line x1="16" y1="17" x2="8" y2="17"></line>

                        <polyline points="10 9 9 9 8 9"></polyline>

                    </svg>

                    Last quarter

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">

                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                        <polyline points="14 2 14 8 20 8"></polyline>

                        <line x1="16" y1="13" x2="8" y2="13"></line>

                        <line x1="16" y1="17" x2="8" y2="17"></line>

                        <polyline points="10 9 9 9 8 9"></polyline>

                    </svg>

                    Social engagement

                </a>

            </li>

            <li class="nav-item">

                <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">

                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">

                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>

                        <polyline points="14 2 14 8 20 8"></polyline>

                        <line x1="16" y1="13" x2="8" y2="13"></line>

                        <line x1="16" y1="17" x2="8" y2="17"></line>

                        <polyline points="10 9 9 9 8 9"></polyline>

                    </svg>

                    Year-end sale

                </a>

            </li>

        </ul>

    </div>

</nav>

</body>

</html>

　　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 th:action="@{/emp}" method="post">

						<!--发送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 name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">

						</div>

						<div class="form-group">

							<label>Email</label>

							<input name="email" type="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}">1</option>

							</select>

						</div>

						<div class="form-group">

							<label>Birth</label>

							<input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">

						</div>

						<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" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>

		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>

		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

		<!-- Icons -->

		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>

		<script>

			feather.replace()

		</script>

	</body>

</html>

　　list.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">

					<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>

									<th>email</th>

									<th>gender</th>

									<th>department</th>

									<th>birth</th>

									<th>操作</th>

								</tr>

							</thead>

							<tbody>

								<tr th:each="emp:${emps}">

									<td th:text="${emp.id}"></td>

									<td>[[${emp.lastName}]]</td>

									<td th:text="${emp.email}"></td>

									<td th:text="${emp.gender}==0?'女':'男'"></td>

									<td th:text="${emp.department.departmentName}"></td>

									<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>

									<td>

										<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

										<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>

									</td>

								</tr>

							</tbody>

						</table>

					</div>

				</main>

				<form id="deleteEmpForm"  method="post">

					<input type="hidden" name="_method" value="delete"/>

				</form>

			</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" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>

		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>

		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

		<!-- Icons -->

		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>

		<script>

			feather.replace()

		</script>

		<script>

			$(".deleteBtn").click(function(){

			    //删除当前员工的

			    $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();

			    return false;

            });

		</script>

	</body>

</html>

　　dashboard.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-->

		<div th:replace="commons/bar::topbar"></div>

		<div class="container-fluid">

			<div class="row">

				<!--引入sidebar-->

				<div th:replace="commons/bar::#sidebar(activeUri='main.html')"></div>

				<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

					<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

						<div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">

							<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>

						</div>

						<div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">

							<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>

						</div>

					</div>

					<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">

						<h1 class="h2">Dashboard</h1>

						<div class="btn-toolbar mb-2 mb-md-0">

							<div class="btn-group mr-2">

								<button class="btn btn-sm btn-outline-secondary">Share</button>

								<button class="btn btn-sm btn-outline-secondary">Export</button>

							</div>

							<button class="btn btn-sm btn-outline-secondary dropdown-toggle">

                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>

                This week

              </button>

						</div>

					</div>

					<canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas>

				</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" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>

		<script type="text/javascript" src="asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.11.1/dist/popper.js}"></script>

		<script type="text/javascript" src="asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>

		<!-- Icons -->

		<script type="text/javascript" src="asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>

		<script>

			feather.replace()

		</script>

		<!-- Graphs -->

		<script type="text/javascript" src="asserts/js/Chart.min.js" 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>

小结：

巴特西