1、列表页面如下
<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/dashboard.css" rel="stylesheet">
<style type="text/css">
/* Chart.js */
@-webkit-keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
@keyframes chartjs-render-animation {
from {
opacity: 0.99
}
to {
opacity: 1
}
}
.chartjs-render-monitor {
-webkit-animation: chartjs-render-animation 0.001s;
animation: chartjs-render-animation 0.001s;
}
</style>
</head>
<body>
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/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" th:href="@{/emp}">新增</a></h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>id</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 th:text="${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‘)}"></td>
<td>
<a class="btn btn-sm btn-primary" th:href="@{/emp/} + ${emp.id}">编辑</a>
<button th:attr="deleteUri=@{/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"></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>
<script>
$(".deleteBtn").click(function(){
$("#deleteEmpForm").attr("action",$(this).attr("deleteUri")).submit();
return false;
});
</script>
</body>
</html>
2、新增和修改共用一个页面，内容如下
<!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>
<!--引入顶部栏-->
<div th:replace="~{emp/bar::topbar}"></div>
<div class="container-fluid">
<div class="row">
<!--引入侧边栏并高亮显示-->
<div th:replace="~{emp/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" enctype="application/x-www-form-urlencoded">
<!--HiddenHttpMethodFilter.java中定义的-->
<!--只有修改页面才会用到这两项-->
<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><br/>
<input name="lastName" placeholder="zhangsan" th:value="${emp}!=null?${emp.lastName}"/>
</div>
<div class="form-group">
<label>Email</label><br/>
<input name="email" 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:each="dept:${depts}" th:text="${dept.departmentName}" th:value="${dept.id}">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‘)}" />
</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"></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>
</script>
</body>
</html>
3、Controller层代码如下
package com.myself.controller;
import com.myself.dao.DepartmentDao;
import com.myself.dao.EmployeeDao;
import com.myself.entities.Department;
import com.myself.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 EmployeeControlller {
@Autowired
private EmployeeDao employeeDao;
@Autowired
private DepartmentDao departmentDao;
@GetMapping("/emps")
public String listEmps(Model model){
Collection<Employee> emps = employeeDao.getAll();
model.addAttribute("emps",emps);
return "emp/list";
}
@GetMapping("/emp")
public String toAddPage(Model model){
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}
//只需要页面少的属性和对象中的属性名对应上即可
@PostMapping("/emp")
public String addEmp(Employee employee){
employeeDao.save(employee);
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";
}
//根据id删除员工
@DeleteMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") int id){
System.out.println("可以删除id:" + id);
employeeDao.delete(id);
return "redirect:/emps";
}
4、默认只支持get和post形式的请求，若想发送put和delete请求，需实现如下：
a、定义form表达，请求方式为post
<form th:action="@{/emp}" method="post" >
b、定义input框，name="_method"，value="put" 或value="delete"
<input type="hidden" name="_method" value="put" th:if="${emp}!=null">
c、请求需要经过HiddenHttpMethodFilter.class处理，但是默认未开启，需要编写类继承该过滤器，并将新定义的类以组件的形式注册到容器中
package com.myself.filter;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.HiddenHttpMethodFilter;
//修改数据的时候想用put方式发送请求，但是put不生效，每次都走post
//原因是在HiddenHttpMethodFilter.class对请求做处理后，才能识别到put请求
//而默认HiddenHttpMethodFilter.class是没有开启的，
//所以我们可以自定义一个类来继承HiddenHttpMethodFilter，并将自定义类声明为组件交给容器管理，这样就可以发送put请求了
@Component
public class MyHiddenHttpMethodFilter extends HiddenHttpMethodFilter {
}
若有理解不到之处，望指正！
原文：https://www.cnblogs.com/xiao1572662/p/11921733.html