myBatis日誌設定
RESTFul
RestFul簡介
REST：Representational State Transfer，表現層資源狀態轉移
資源：資源是一種看待伺服器的方式
資源的表述：資源的表述是資源在某個特定時刻的狀態的描述。可以在客戶端-伺服器端之間轉移、交換。
狀態轉移：在客戶端和伺服器端之間轉移(transfer)代表資源狀態的描述，通過轉移和操作資源的表述，來間接實現操作資源的目的。
說人話就是統一資源相同但操作不同的請求的請求路徑，如getUserById和DeleteUserByName都設定資源路徑為User
即：相同的請求路徑、不同的請求方式表示不同的操作
RESTFul的實現
在Http協議中四個表示操作方式的動詞：GET、Post、Put、Delete
| 傳統方式 | RESTFul方式 | |
|---|---|---|
| 查詢 | findAllUser | /user get |
| id查詢 | getUserById?id=1 | /user/1 get |
| 新增 | saveUser | /user post |
| 修改 | updateUser | /user put |
| 刪除 | deleteUser | /user delete |
Get和Post請求模擬
@RequestMapping(value = "/user", method = RequestMethod.GET) public String getAllUser() { System.out.println("查詢所有使用者資訊"); return "success"; } @RequestMapping(value = "/user/{id}", method = RequestMethod.GET) public String getUserById(@PathVariable("id") Integer id) { System.out.println("根據id" + String.valueOf(id) +"查詢所有使用者資訊"); return "success"; } @RequestMapping(value = "/user", method = RequestMethod.POST) public String addUser(@RequestParam("username") String username, @RequestParam("password") String password) { System.out.println("新增使用者資訊：" + username + "," + password); return "success"; }
<a th:href="@{/user}">查詢所有使用者資訊</a><br> <a th:href="@{/user/1}">查詢id為1的使用者資訊</a><br> <form th:action="@{/user}" method="post"> UserName:<input type="text"name="username" value="宇多田光"><br> Password:<input type="password"name="password" value="admin123"><br> <input type="submit"><br> </form>
Put和Delete請求模擬：使用HiddenHttpMethodFilter過濾器轉換請求方式
form表單中的method方法設定為Post或者Delete是不起作用的，可以通過過濾器替換request請求的方法實現Put和Delete
<filter>
<filter-name>HiddenHttpMethodFilter</filter-name>
<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>HiddenHttpMethodFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
根據原始碼，實現請求方式轉換需要有兩個條件：
①請求方式為post
②必須傳輸一個name為_method值為put或者delete的請求引數
<form th:action="@{/user}" method="post">
<input type="hidden" name="_method" value="put">
UserName:<input type="text"name="username" value="宇多田光"><br>
Password:<input type="password"name="password" value="admin123"><br>
<input type="submit"><br>
console:
修改使用者資訊：宇多田光,admin123
※HiddenHttpMethodFilter請求方式轉換過濾器和CharacterEncodingFilter編碼過濾器的順序
CharacterEncodingFilter過濾器設定編碼的前提條件是在此之前不能獲取任何的請求引數，而HiddenHttpMethodFilter獲取了name為_method的請求引數，因此CharacterEncodingFilter的< Filter-mapping > 要放在HiddenMethodFilter之前
RESTFull風格案例
通過請求方式實現Employee的增刪改查
| RESTFul方式 | |
|---|---|
| 查詢 | /employee get |
| id查詢 | /employee/1 get |
| 新增 | /employee post |
| 修改 | /employee put |
| 刪除 | /employee/1 delete |
employee_list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center">
<tr>
<th colspan="5">Employee Information</th>
</tr>
<tr>
<td>Id</td>
<td>LastName</td>
<td>Email</td>
<td>Gender</td>
<td>Option</td>
</tr>
<tr th:each="employee : ${employeelist}">
<td th:text="${employee.id}"></td>
<td th:text="${employee.lastName}"></td>
<td th:text="${employee.email}"></td>
<td th:text="${employee.gender}"></td>
<td>
<a @click="deleteEmployee" th:href="@{/employee/} + ${employee.id}">delete</a>
<a th:href="@{/employee/} + ${employee.id}">update</a>
</td>
</tr>
</table>
<form method="post" id="deleteForm">
<input name="_method" type="hidden" value="delete">
</form>
<a th:href="@{/add}">新增</a>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#dataTable",
methods:{
deleteEmployee:function (event) {
console.log("HELLO")
var deleteFrom = document.getElementById("deleteForm");
//將觸發點事件的href屬性賦值給deleteform表單的action
deleteFrom.action = event.target.href;
//表單提交
deleteFrom.submit();
//取消超連結的預設行為
event.preventDefault();
}
}
});
</script>
</body>
</html>
顯示操作：
/employee(請求) (GET) --> getAllEmploye(控制器方法) --> employee_list(前端頁面)
@RequestMapping(value = "/employee", method = RequestMethod.GET)
public String getAllEmployee(Model model) {
Collection<Employee> employeelist = employeeDao.getAll();
model.addAttribute("employeelist", employeelist);
return "employee_list";
}
①首先通過在SpringMVC.xml配置檔案設定檢視控制器實現/employee請求和getAllEmploye控制器方法的對映
②通過DAO獲取employeelist並將其新增到request域中
③通過ThymeLeaf檢視轉發到前端頁面employee_list.html
④在前端頁面通過ThymeLeaf獲取request域中的employeelist並渲染顯示
刪除操作：
/employee/{id} (DELETE) --> DeleteEmployeeById --> "redirect:/employee"
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String DeleteEmployeeById(@PathVariable("id") Integer id) {
employeeDao.delete(id);
return "redirect:/employee";
}
①這裡前端頁面的刪除是一個超連結，其內容經過Thymeleaf渲染後為 /employyee/1的形式而超連結預設只能通過get傳送請求，因此直接點選會被當成“根據ID進行查詢”的操作
<a @click="deleteEmployee" th:href="@{/employee/} + ${employee.id}">delete</a>
解決辦法是使用Vue，通過給超連結新增一個點選事件，當用戶點選時將點選事件的請求地址(/employyee/1)賦值給一個帶有隱藏域的form表單的action，提交表單並且禁用點選事件的預設行為，最終伺服器的過濾器元件HiddenHttpMethodFilter會將表單的post請求更改為delete請求。
轉換請求方式用的deleteForm表單
<form method="post" id="deleteForm">
<input name="_method" type="hidden" value="delete">
</form>
Vue實現轉移事件
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#dataTable",
methods:{
deleteEmployee:function (event) {
console.log("HELLO")
var deleteFrom = document.getElementById("deleteForm");
//將觸發點事件的href屬性賦值給deleteform表單的action
deleteFrom.action = event.target.href;
//表單提交
deleteFrom.submit();
//取消超連結的預設行為
event.preventDefault();
}
}
});
</script>
如此一來就得到了一個請求路徑為"/employee/1"，請求方式為"Delete"的request
③通過DAO實現根據id刪除
④重定向到/employee請求，這裡使用轉發"employee_list"到前端頁面的話，request是沒有頁面需要的內容的，因此需要重定向到請求/employee，經控制器方法向請求域新增employeelist才能使前端獲取到資料
根據Id查詢+修改操作
/employee/{id} (GET) --> toUpdateEmployee --> "employee_update"
/employee (POST-->PUT) --> UpdateEmployee --> "redirect:/employee"
①通過前端超連結點選的GET方式的請求，經ThymeLeaf渲染的請求路徑為 /employee/id，然後經控制器方法toUpdateEmployee通過DAO根據id獲取到Employee物件，然後向request域中新增此物件轉發至前端頁面employee_update
<a th:href="@{/employee/} + ${employee.id}">update</a>
@RequestMapping(value = "/employee/{id}", method = RequestMethod.GET)
public String toUpdateEmployee(Model model,
@PathVariable("id") Integer id) {
Employee employee = employeeDao.get(id);
model.addAttribute("employee", employee);
return "employee_update";
}
②前端頁面employee_update根據request域中的內容通過ThymeLeaf進行渲染回顯
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: cornflowerblue 1px solid">
<form th:action="@{/employee}" method="post">
<input type="hidden" name="_method" value="put">
編號：<input type="text" name="id" th:value="${employee.id}"><br>
姓名：<input type="text" name="lastName" th:value="${employee.lastName}"><br>
郵箱：<input type="text" name="email" th:value="${employee.email}"><br>
性別：<input type="text" name="gender" th:value="${employee.gender}"><br>
<input type="submit" value="修改">
</form>
</div>
</body>
</html>
③employee_update表單提交請求地址為 /employee請求方式為POST的request請求，因表單含有"_mothod"隱藏域，因此會伺服器過濾器修改請求方式為PUT
④該請求會被被控制器方法UpdateEmployee匹配，經DAO修改後重定向到/employee請求
@RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String UpdateEmployee(Employee employee) {
employeeDao.save(employee);
return "redirect:/employee";
}
新增操作（略）
employee_list.html
<a th:href="@{/add}">新增</a>
springMVC.xml
<mvc:view-controller path="/add" view-name="employee_add"></mvc:view-controller>
employee_add.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border: cornflowerblue 1px solid">
<form th:action="@{/employee}" method="post">
編號：<input type="text" name="id"><br>
姓名：<input type="text" name="lastName" value="宇多田光"><br>
郵箱：<input type="text" name="email" value="[email protected]"><br>
性別：<input type="text" name="gender" value="1"><br>
<input type="submit" value="新增">
</form>
</div>
</body>
</html>
AddEmployee()
@RequestMapping(value = "/employee", method = RequestMethod.POST)
public String AddEmployee(Employee employee) {
employeeDao.save(employee);
return "redirect:/employee";
}