SpringMVC?RESTFul實戰(zhàn)案例刪除功能實現(xiàn)
SpringMVC RESTFul實現(xiàn)刪除功能
刪除相對麻煩一點,因為 Rest 中得用 delete 方法請求。
在前面已經(jīng)提到如何實現(xiàn) delete 和 put 方法請求了,這里同樣借助表單來提交 post 請求,然后轉(zhuǎn)成 delete 請求方法。
一、修改列表前端代碼
1. 修改刪除的請求地址
Rest 中刪除的請求地址應(yīng)該是/employee/id},所以列表按鈕【刪除】對應(yīng)超鏈接要改:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>員工信息</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" style="text-align: center;">
<tr>
<th colspan="5">員工列表</th>
</tr>
<tr>
<th>id</th>
<th>lastName</th>
<th>email</th>
<th>gender</th>
<th>options</th>
</tr>
<!--循環(huán)后端放到request域中的數(shù)據(jù) employeeList-->
<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 th:href="@{/employee/} + ${employee.id}" rel="external nofollow" rel="external nofollow" >刪除</a>
<a href="">更新</a>
</td>
</tr>
</table>
</body>
</html>這里仍然采用拼接的方式@{/employee/} + ${employee.id},這樣 thymeleaf 才可以正確解析。
部署后,鼠標移動到刪除按鈕查看下瀏覽器左下角。

2. 添加刪除用的 form 表單
添加刪除用的 form 表單,用來實際發(fā)送請求。
<!--發(fā)送刪除請求用的表單-->
<form method="post">
<input type="hidden" name="_method" value="delete">
</form>注意 HiddenHttpMethodFilter 的要求:必須傳輸 _method 請求參數(shù),并且值為最終的請求方式,這里的 value 就是 delete 。
3. 刪除超鏈接綁定點擊事件
要點擊執(zhí)行刪除,所以超鏈接要綁定點擊事件,引入vue.js 。
在 webapp 下新建一個static\js,用于存放靜態(tài)文件。網(wǎng)上下載一個 vue.js,放到這個文件夾下。
接著,在前端代碼中引入:
<!--引入 vue.js-->
<script type="text/javascript" th:src="@{/static/js/vue.min.js}"></script>修改列表中刪除按鈕的超鏈接,綁定一個 click 事件:
<!--循環(huán)后端放到request域中的數(shù)據(jù) employeeList-->
<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}" rel="external nofollow" rel="external nofollow" >刪除</a>
<a href="">更新</a>
</td>
</tr>繼續(xù)編寫 js 處理這個綁定事件,為了方便用元素js獲取到元素,要給刪除表單添加一個id="delete_form":
<script type="text/javascript">
var vue = new Vue({
el: "#data_table", // 之前要給列表加個id="data_table",方便獲取
methods: {
//event表示當前事件
deleteEmployee: function (event) {
//通過id獲取表單標簽
var delete_form = document.getElementById("delete_form");
//將觸發(fā)事件的超鏈接的 href 屬性為表單的 action 屬性賦值
delete_form.action = event.target.href;
//提交表單
delete_form.submit();
//阻止超鏈接的默認跳轉(zhuǎn)行為
event.preventDefault();
}
}
})
</script>delete_form.action = event.target.href; 值就是觸發(fā)事件的超鏈接的 href 里的值,也就是 th:href="@{/employee/} + ${employee.id}"。
因為我們點擊刪除按鈕后,就是要去訪問這個請求。
二、增加后端控制器
編寫后端控制器方法,處理刪除請求:
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id) {
employeeDao.delete(id);
return "redirect:/employee";
}這里因為要傳入 id 值,所以使用占位符,并且方法的請求方式為DELETE。
另外,最后 return 要使用重定向,返回到列表頁。因為刪除之后其實就跟/employee/{id}這個請沒關(guān)系了,如果使用轉(zhuǎn)發(fā)到列表頁,瀏覽器地址欄里顯示的仍然還是/employee/{id}。
三、測試效果
部署運行,點擊刪除測試一下,發(fā)現(xiàn)報錯了。

說明寫的綁定事件沒生效,為啥沒生效?因為找不到 vue.min.js 的資源。
這里要注意下,可以點開 idea 看下 target 下如果這里沒有對應(yīng)的 static,沒有的話需要重新打包一下。

找到這里,重新打包。

解決完重新部署,如果訪問發(fā)現(xiàn)還是報錯 404 。
看下控制臺,發(fā)現(xiàn)靜態(tài)資源是被 springMVC 處理的,實際上處理不了,找不到資源自然就報錯了。

增加配置
現(xiàn)在需要在springMVC.xml 配置文件中添加配置,開放靜態(tài)資源的訪問:
<!--放開靜態(tài)資源的訪問-->
<mvc:default-servlet-handler />這時候,當 springMVC 找不到的時候,就會交給 default-servlet去找,而不會像上面那樣報 404 錯誤。
現(xiàn)在重新部署,訪問列表頁。

點擊刪除,刪除成功。


以上就是SpringMVC RESTFul實戰(zhàn)案例刪除功能實現(xiàn)的詳細內(nèi)容,更多關(guān)于SpringMVC RESTFul刪除的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
如何在 Java 中利用 redis 實現(xiàn) LBS 服務(wù)
基于位置的服務(wù),是指通過電信移動運營商的無線電通訊網(wǎng)絡(luò)或外部定位方式,獲取移動終端用戶的位置信息,在GIS平臺的支持下,為用戶提供相應(yīng)服務(wù)的一種增值業(yè)務(wù)。下面我們來一起學習一下吧2019-06-06
Java中@DateTimeFormat @JsonFormat失效原因及測試填坑
本文主要介紹了Java中@DateTimeFormat @JsonFormat失效原因及測試填坑,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
java讀取配置文件(properties)的時候,unicode碼轉(zhuǎn)utf-8方式
這篇文章主要介紹了java讀取配置文件(properties)的時候,unicode碼轉(zhuǎn)utf-8方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-02-02

