使用SpringBoot+Thymeleaf实现增删改查weixin45004745的博客-

前端页面下载：👆👆👆👆👆👆👆👆
没有链接数据库的版本，后面会更新带有Mybatis和Mybatis_plus版本的
首先创建一个Springboot项目。 之前的教程

项目结构

pom.xml 引入依赖

<?xml version="1.0" encoding="UTF-8"?> <project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"          xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.0.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.wang</groupId> <artifactId>springboot</artifactId> <version>0.0.1-SNAPSHOT</version> <name>springboot</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!--        thymeleaf--> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf-spring5</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-java8time</artifactId> </dependency> <!-- @Date 省去get set toString--> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> 

创建实体类（员工和部门）lombok@Date
类加了@Data注解，所有Java代码中不需要生成getter and setter，而在编译的时候会自动生成getter and setter。
Employee员工

package com.wang.pojo; import lombok.Data; import lombok.NoArgsConstructor; import java.util.Date; //员工表 @Data @NoArgsConstructor public class Employee { private Integer id; private String lastName; private String email; private Integer sex;//0:女 1:男 private Department department; private Date birth; public Employee(Integer id, String lastName, String email, Integer sex, Department department) { this.id = id; this.lastName = lastName; this.email = email; this.sex = sex; this.department = department; //默认日期 this.birth = new Date(); } } 

Department部门

package com.wang.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; //部门表 @Data @AllArgsConstructor @NoArgsConstructor public class Department { private Integer id; private String departmentName; } 

这里没有链接数据库，所以伪造了数据
DepartmentDao

package com.wang.dao; import com.wang.pojo.Department; import org.springframework.stereotype.Repository; import java.util.Collection; import java.util.HashMap; import java.util.Map; //部门dao @Repository public class DepartmentDao { //模拟数据库中的数据 private static Map<Integer, Department> departments = null; static {         departments = new HashMap<Integer, Department>();//创建一个部门表          departments.put(101, new Department(101, "教学部"));         departments.put(102, new Department(102, "市场部"));         departments.put(103, new Department(103, "教研部"));         departments.put(104, new Department(104, "运营部"));         departments.put(105, new Department(105, "后勤部")); } //获得所有部门信息 public Collection<Department> getDepartment() { return departments.values(); } //通过id得到部门 public Department getDepartmentById(Integer id) { return departments.get(id); } } 

员工Dao

package com.wang.dao; import com.wang.pojo.Department; import com.wang.pojo.Employee; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import java.util.*; //员工Dao @Repository public class EmployeeDao { //模拟数据库中的数据 private static Map<Integer, Employee> employees = null; //员工有所属的部门 @Autowired private DepartmentDao departmentDao; static {         employees = new HashMap<Integer, Employee>();//创建一个部门表         employees.put(101, new Employee(1001, "AA", "A2919543658@qq.com", 1, new Department(101, "教学部")));         employees.put(102, new Employee(1002, "BB", "B2919543658@qq.com", 0, new Department(102, "市场部")));         employees.put(103, new Employee(1003, "CC", "C2919543658@qq.com", 1, new Department(103, "教研部")));         employees.put(104, new Employee(1004, "DD", "D2919543658@qq.com", 0, new Department(104, "运营部")));         employees.put(105, new Employee(1005, "EE", "E2919543658@qq.com", 1, new Department(105, "后勤部"))); } //主键自增 private static Integer integer = 1006; //增加一个员工 public void save(Employee employee) { if (employee.getId() == null) {             employee.setId(integer++); }         employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));          employees.put(employee.getId(), employee); } //查询所有员工信息 public Map<Integer,Employee> getAll() {         List<Employee> value = new ArrayList<>(); //        for (Integer k : employees.keySet()) { //                key.add(k); //        } //        for (Employee k : employees.values()) { //            value.add(k); //        } //        Map<Integer,Employee> map = new HashMap<>(); for (int i=0;i<value.size();i++){            Employee employee = value.get(i); } return EmployeeDao.employees; } //通过id查询员工 public Employee getEmployeeById(Integer id) {         System.out.println("daoid:"+id); return employees.get(101); } //通过id删除员工 public void delete(Integer id) {         employees.remove(id); } } 

员工登录的Controller

package com.wang.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.thymeleaf.util.StringUtils; import javax.servlet.http.HttpSession; @Controller public class LoginController { @RequestMapping("/user/login") public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session) { //具体的业务 if (!StringUtils.isEmpty(username) && "123456".equals(password)) {             session.setAttribute("loginUser",username); //登录成功，重定向跳转 return "redirect:/main.html"; } else { //告诉用户，登陆失败             model.addAttribute("msg", "用户名或密码错误！"); return "index"; } } @RequestMapping("/user/logout") public String logout(HttpSession session){         session.invalidate(); return "redirect:/index.html"; } } 

增删改查方法体

package com.wang.controller; import com.wang.dao.DepartmentDao; import com.wang.dao.EmployeeDao; import com.wang.pojo.Department; import com.wang.pojo.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.*; @Controller public class EmployeeController { @Autowired private EmployeeDao employeeDao; @Autowired     DepartmentDao departmentDao; //查询并跳转 @RequestMapping("/emps") public String list(Model model) {         Map<Integer, Employee> employees = employeeDao.getAll(); //        List<Map<Integer,Employee>> list = new ArrayList<>(); //        for (Integer k : employees.keySet()) { //            Map<Integer,Employee> map = new HashMap<>(); //            map.put(k,employees.get(k)); //        } //        employees.forEach(System.out::println);         model.addAttribute("emps", employees); return "emp/list"; } @GetMapping("/emp") public String toAddpage(Model model){ //查出部门的信息         Collection<Department> department = departmentDao.getDepartment();         model.addAttribute("department",department); return "emp/add"; } //添加页面 @PostMapping("/emp") public String addEmp(Employee employee){ //添加的操作，添加成功后重定向到首页  forward         employeeDao.save(employee);//调用底层的方法保存员工的信息 return "redirect:/emps"; } //去员工的修改页面 @GetMapping("/emp/update/{id}") public String toUpdateEmp(@PathVariable("id")Integer id,Model model){         System.out.println("id:"+id);         Employee employee = employeeDao.getEmployeeById(id);         System.out.println("employee:"+employee.toString());         model.addAttribute("emp",employee); //查出部门的信息         Collection<Department> department = departmentDao.getDepartment();         model.addAttribute("department",department); return "update"; } //修改员工 @PostMapping("/updateEmp") public String updateEmp(Employee employee){         employeeDao.save(employee); return "redirect:/emps"; } //删除员工 @GetMapping("/emp/del/{id}") public String deleteEmp(@PathVariable("id") Integer id){         employeeDao.delete(id); return "redirect:/emps"; } } 

扩展Mvc
1.实现WebMvcConfigurer类，重写addViewControllers方法，做到无业务逻辑的页面跳转
2.配置一个过滤器，做到必须登录才能进入系统

package com.wang.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.InterceptorRegistry; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class MyMvcConfig implements WebMvcConfigurer { @Override public void addViewControllers(ViewControllerRegistry registry) {         registry.addViewController("/").setViewName("index");         registry.addViewController("/index.html").setViewName("index");         registry.addViewController("/main.html").setViewName("dashboard"); } @Override public void addInterceptors(InterceptorRegistry registry) { //addInterceptor添加一个拦截器，addPathPatterns("/**")添加过滤所有请求，excludePathPatterns("index.html","/","user/login")添加放行         registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/*"). excludePathPatterns("/index.html","/","/user/login","/static/**");//不拦截 } } 

效果

package com.wang.config; import org.springframework.web.servlet.HandlerInterceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; //重写了HandlerInterceptor这个接口，这个类就是拦截器 public class LoginHandlerInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //登录成功之后，应该有用户的session         Object loginUser = request.getSession().getAttribute("loginUser"); if(loginUser==null){//未登录             request.setAttribute("msg","没有权限，请先登录！"); //转发             request.getRequestDispatcher("/index.html").forward(request,response); //return false;放行return true;不放行 return false; }else{ return true; } } } 

yml时间格式

#关闭模板引擎的缓存 spring: thymeleaf: cache: false mvc: date-format: yyyy-MM-dd  

前端页面

登录页面（index.html）

<!DOCTYPE html> <html lang="en" xmlns:th="https://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>引导的登录模板</title> <!-- Bootstrap core CSS --> <link th:href="@{/css/bootstrap.min.css}" th:rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/css/signin.css}" th:rel="stylesheet"> </head> <body class="text-center"> <form class="form-signin" th:action="@{/user/login}"> <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72"> <h1 class="h3 mb-3 font-weight-normal">请登录</h1> <!--th:text="${msg}"显示LoginController里面写的，如果msg的值为空，则不显示消息--> <p  style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p> <input type="text" name="username" class="form-control" placeholder="Username" required="" autofocus=""> <input type="password" name="password" class="form-control" placeholder="Password" required=""> <div class="checkbox mb-3"> <label> <input type="checkbox" value="remember-me"> 记住我         </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button> <p class="mt-5 mb-3 text-muted">© 2017-2018</p> <a class="btn btn-sm">中文</a> <a class="btn btn-sm">English</a> </form> </body> </html> 

主页dashboard.html

<!DOCTYPE html> <html lang="en" xmlns:th="https://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="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/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> <!--th：replace和th：insert效果一样，都是引入元素--> <div th:replace="~{commons/commons::topbar}"></div> <div class="container-fluid"> <div class="row"> <!--传递参数给组件--> <div th:insert="~{commons/commons::sidebar (active='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">指示板</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group mr-2"> <button class="btn btn-sm btn-outline-secondary"></button> <button class="btn btn-sm btn-outline-secondary">出口</button> </div> <button class="btn btn-sm btn-outline-secondary dropdown-toggle"> <svg xmlns="https://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>                         本周                     </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" th:src="@{/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> 

使用htymeleaf的插入实现头部侧部代码复用（commons.html）

<!DOCTYPE html> <html lang="en" xmlns:th="https://www.thymeleaf.org"> <!--顶部导航栏--> <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="https://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" th:href="@{/user/logout}">注销</a> </li> </ul> </nav> <!--侧边栏--> <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.html}"> <svg xmlns="https://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>                     首页 <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     订单                 </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     产品                 </a> </li> <li class="nav-item"> <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{emps}"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     报告                 </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     集成                 </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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     本月                 </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     上个季度                 </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     社会交往                 </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                     年终销售                 </a> </li> </ul> </div> </nav> </html> 

list页面，遍历输出（list.html）

<!DOCTYPE html> <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="https://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="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/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::topbar}"></div> <div class="container-fluid"> <div class="row"> <!--侧边导航栏，使用插入方法，实现代码复用，减少代码量--> <div th:replace= "~{commons/commons::sidebar(active='list.html')}"></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" th:href="@{emp}">添加员工</a></h2> <div class="table-responsive"> <table class="table table-striped table-sm"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>邮箱</th> <th>性别</th> <th>部门</th> <th>出生日期</th> <th>操作</th> </tr> </thead> <tbody> <tr th:each="emp,count:${emps} "> <!-- <th:block th="${count.current.key}"></th:block>--> <!-- <td th:text="${count.current.value.id}"></td>--> <td th:text="${count.current.value.getId()}"></td> <td th:text="${count.current.value.getLastName()}"></td> <td th:text="${count.current.value.getEmail()}"></td> <td th:text="${count.current.value.getSex()==0?'女':'男'}"></td> <td th:text="${count.current.value.department.getDepartmentName()}"></td> <td th:text="${#dates.format(count.current.value.getBirth(),'yyyy-MM-dd')}"></td> <td> <!-- @{/emp(id=${emp.id})}    @{/emp/(${emp.getId()})} |emp/id=${emp.getId()}| |emp/update/${count.current.key}|--> <a class="btn btn-sm btn-primary" th:href="|emp/update/${count.current.key}|">编辑</a> <a class="btn btn-sm btn-danger" th:href="|emp/del/${count.current.key}|">删除</a> </td> </tr> </tbody> </table> </div> </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> 

添加页面（add.html）

<!DOCTYPE html> <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="https://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="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/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::topbar}"></div> <div class="container-fluid"> <div class="row"> <!--侧边导航栏，使用插入方法，实现代码复用，减少代码量--> <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <form th:action="@{/emp}" method="post"> <div> <div class="form-group"> <label>姓名</label> <input type="text" name="lastName" class="form-control" placeholder="张三"> </div> <div class="form-group"> <label >邮箱</label> <input type="email" name="email" class="form-control" placeholder="123456@qq.com"> </div> <div class="form-group"> <p>性别</p> <label></label> &nbsp;&nbsp;&nbsp;<input class="form-check-input" type="radio" name="sex" value="0"> <label class="form-check-label">女</label> </div> <div class="form-group"> <label></label> &nbsp;&nbsp;&nbsp;<input class="form-check-input" type="radio" name="sex" value="1"> <label class="form-check-label"> 男</label> </div> </div> <div class="form-group"> <lable>部门</lable> <select class="form-control" name="department.id"> <option th:each="dept:${department}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option> </select> </div> <div class="form-group"> <lable>出生日期</lable> <input type="text" name="birth" class="form-control" placeholder="1999-09-09"> </div> <button type="submit" class="btn btn-primary">提交</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> 

update修改页面（update.htm）

<!DOCTYPE html> <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="https://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="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/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::topbar}"></div> <div class="container-fluid"> <div class="row"> <!--侧边导航栏，使用插入方法，实现代码复用，减少代码量--> <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <form th:action="@{/updateEmp}" method="post"> <input type="hidden" name="id" th:value="${emp.getId()}"> <div> <div class="form-group"> <label>姓名</label> <input th:value="${emp.getLastName()}" type="text" name="lastName" class="form-control" placeholder="张三"> </div> <div class="form-group"> <label >邮箱</label> <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" placeholder="123456@qq.com"> </div> <div class="form-group"> <p>性别</p> <label></label> &nbsp;&nbsp;&nbsp;<input th:checked="${emp.getSex()==0}" class="form-check-input" type="radio" name="sex" value="1"> <label class="form-check-label">男</label> </div> <div class="form-group"> <label></label> &nbsp;&nbsp;&nbsp;<input th:checked="${emp.getSex()==1}" class="form-check-input" type="radio" name="sex" value="0"> <label class="form-check-label"> 女</label> </div> </div> <div class="form-group"> <lable>部门</lable> <select class="form-control" name="department.id"> <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${department}"                                 th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option> </select> </div> <div class="form-group"> <lable>出生日期</lable> <input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}" type="text" name="birth" class="form-control" placeholder="1999/09/09"> </div> <button type="submit" class="btn btn-primary">确认修改</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> 

404页面（error.html）

<!DOCTYPE html> <!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ --> <html lang="en" xmlns:th="https://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="@{/css/bootstrap.min.css}" rel="stylesheet"> <!-- Custom styles for this template --> <link th:href="@{/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> <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#">Company         name</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="https://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign out</a> </li> </ul> </nav> <div class="container-fluid"> <div class="row"> <nav class="col-md-2 d-none d-md-block bg-light sidebar"> <div class="sidebar-sticky"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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>                             Customers                         </a> </li> <li class="nav-item"> <a class="nav-link" href="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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="https://getbootstrap.com/docs/4.0/examples/dashboard/#"> <svg xmlns="https://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> <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> <h1>404</h1> </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> 

完成！功能展示

主页

员工管理

添加
修改

删除

后台模板推荐，可参考使用，第一次使用thymeleaf，写的不好，还望体谅！如有问题欢迎留言！
bootstarap 模板
layui 模板