配置 Spring Boot
在使用 Spring Boot 2.x 版本時，原有 Spring Boot 1.x 版本的通過在表單中添加 input 框隱藏域指定 _method = put 的方式失效。
解決方法：在 application.properties 中配置：
spring.mvc.hiddenmethod.filter.enabled=true
Controller
demo.yangxu.springboot.controller.EmployeeController
package demo.yangxu.springboot.controller;
import demo.yangxu.springboot.dao.DepartmentDao;
import demo.yangxu.springboot.dao.EmployeeDao;
import demo.yangxu.springboot.entities.Department;
import demo.yangxu.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.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
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){
//保存員工信息
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";
}
//員工修改功能
@PutMapping("/emp")
public String updateEmployee(Employee employee){
System.out.println("員工修改的數據："+employee);
employeeDao.save(employee);
return "redirect:/emps";
}
}
前端頁面
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="../../static/asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../static/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" th:value="${emp!=null}?${emp.lastName}" placeholder="Last Name">
</div>
<div class="form-group">
<label>Email</label>
<input name="email" type="email" class="form-control" th:value="${emp!=null}?${emp.email}" placeholder="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>
<select name="department.id" class="form-control">
<!--實際提交的是部門的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="Birth" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">
</div>
<button type="submit" th:text="${emp!=null}?'修改':'添加'" 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="../../static/asserts/js/jquery-3.2.1.slim.min.js" th:src="@{/webjars/jquery/3.5.1/jquery.js}"></script>
<script type="text/javascript" src="../../static/asserts/js/popper.min.js" th:src="@{/webjars/popper.js/1.12.9/popper.js}"></script>
<script type="text/javascript" src="../../static/asserts/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
<!-- Icons -->
<script type="text/javascript" src="../../static/asserts/js/feather.min.js" th:src="@{/asserts/js/feather.min.js}"></script>
<script>
feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" src="../../static/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>