SpringMVC?RESTFul實(shí)戰(zhàn)案例刪除功能實(shí)現(xiàn)
SpringMVC RESTFul實(shí)現(xiàn)刪除功能
刪除相對(duì)麻煩一點(diǎn)，因?yàn)?Rest 中得用 delete 方法請(qǐng)求。
在前面已經(jīng)提到如何實(shí)現(xiàn) delete 和 put 方法請(qǐng)求了，這里同樣借助表單來(lái)提交 post 請(qǐng)求，然后轉(zhuǎn)成 delete 請(qǐng)求方法。
一、修改列表前端代碼
1. 修改刪除的請(qǐng)求地址
Rest 中刪除的請(qǐng)求地址應(yīng)該是/employee/id}，所以列表按鈕【刪除】對(duì)應(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 才可以正確解析。
部署后，鼠標(biāo)移動(dòng)到刪除按鈕查看下瀏覽器左下角。
2. 添加刪除用的 form 表單
添加刪除用的 form 表單，用來(lái)實(shí)際發(fā)送請(qǐng)求。
<!--發(fā)送刪除請(qǐng)求用的表單-->
<form method="post">
<input type="hidden" name="_method" value="delete">
</form>注意 HiddenHttpMethodFilter 的要求：必須傳輸 _method 請(qǐng)求參數(shù)，并且值為最終的請(qǐng)求方式，這里的 value 就是 delete 。
3. 刪除超鏈接綁定點(diǎn)擊事件
要點(diǎn)擊執(zhí)行刪除，所以超鏈接要綁定點(diǎn)擊事件，引入vue.js 。
在 webapp 下新建一個(gè)static\js，用于存放靜態(tài)文件。網(wǎng)上下載一個(gè) vue.js，放到這個(gè)文件夾下。
接著，在前端代碼中引入：
<!--引入 vue.js-->
<script type="text/javascript" th:src="@{/static/js/vue.min.js}"></script>修改列表中刪除按鈕的超鏈接，綁定一個(gè) 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 處理這個(gè)綁定事件，為了方便用元素js獲取到元素，要給刪除表單添加一個(gè)id="delete_form"：
<script type="text/javascript">
var vue = new Vue({
el: "#data_table", // 之前要給列表加個(gè)id="data_table"，方便獲取
methods: {
//event表示當(dāng)前事件
deleteEmployee: function (event) {
//通過(guò)id獲取表單標(biāo)簽
var delete_form = document.getElementById("delete_form");
//將觸發(fā)事件的超鏈接的 href 屬性為表單的 action 屬性賦值
delete_form.action = event.target.href;
//提交表單
delete_form.submit();
//阻止超鏈接的默認(rèn)跳轉(zhuǎn)行為
event.preventDefault();
}
}
})
</script>delete_form.action = event.target.href; 值就是觸發(fā)事件的超鏈接的 href 里的值，也就是 th:href="@{/employee/} + ${employee.id}"。
因?yàn)槲覀凕c(diǎn)擊刪除按鈕后，就是要去訪問(wèn)這個(gè)請(qǐng)求。
二、增加后端控制器
編寫后端控制器方法，處理刪除請(qǐng)求：
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id) {
employeeDao.delete(id);
return "redirect:/employee";
}這里因?yàn)橐獋魅?id 值，所以使用占位符，并且方法的請(qǐng)求方式為DELETE。
另外，最后 return 要使用重定向，返回到列表頁(yè)。因?yàn)閯h除之后其實(shí)就跟/employee/{id}這個(gè)請(qǐng)沒(méi)關(guān)系了，如果使用轉(zhuǎn)發(fā)到列表頁(yè)，瀏覽器地址欄里顯示的仍然還是/employee/{id}。
三、測(cè)試效果
部署運(yùn)行，點(diǎn)擊刪除測(cè)試一下，發(fā)現(xiàn)報(bào)錯(cuò)了。
說(shuō)明寫的綁定事件沒(méi)生效，為啥沒(méi)生效？因?yàn)檎也坏?vue.min.js 的資源。
這里要注意下，可以點(diǎn)開(kāi) idea 看下 target 下如果這里沒(méi)有對(duì)應(yīng)的 static，沒(méi)有的話需要重新打包一下。
找到這里，重新打包。
解決完重新部署，如果訪問(wèn)發(fā)現(xiàn)還是報(bào)錯(cuò) 404 。
看下控制臺(tái)，發(fā)現(xiàn)靜態(tài)資源是被 springMVC 處理的，實(shí)際上處理不了，找不到資源自然就報(bào)錯(cuò)了。
增加配置
現(xiàn)在需要在springMVC.xml 配置文件中添加配置，開(kāi)放靜態(tài)資源的訪問(wèn)：
<!--放開(kāi)靜態(tài)資源的訪問(wèn)-->
<mvc:default-servlet-handler />這時(shí)候，當(dāng) springMVC 找不到的時(shí)候，就會(huì)交給 default-servlet去找，而不會(huì)像上面那樣報(bào) 404 錯(cuò)誤。
現(xiàn)在重新部署，訪問(wèn)列表頁(yè)。
點(diǎn)擊刪除，刪除成功。
以上就是SpringMVC RESTFul實(shí)戰(zhàn)案例刪除功能實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于SpringMVC RESTFul刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- SpringMVC使用RESTful接口案例詳解
- SpringMVC?Restful風(fēng)格與中文亂碼問(wèn)題解決方案介紹
- SpringMVC通過(guò)RESTful結(jié)構(gòu)實(shí)現(xiàn)頁(yè)面數(shù)據(jù)交互
- SpringMVC?RESTFul及REST架構(gòu)風(fēng)格介紹
- SpringMVC?RESTFul實(shí)體類創(chuàng)建及環(huán)境搭建
- SpringMVC?RESTFul實(shí)戰(zhàn)案例訪問(wèn)首頁(yè)
- SpringMVC?RESTFul實(shí)現(xiàn)列表功能
- SpringMVC使用RESTful接口案例
相關(guān)文章
本篇我們講解下spring項(xiàng)目中如何為bean指定初始化方法和銷毀方法。當(dāng)spring完成bean的屬性賦值之后，就會(huì)執(zhí)行bean的初始化方法，而當(dāng)spring要銷毀bean實(shí)例的時(shí)候，也會(huì)調(diào)用bean的銷毀方法。文中有詳細(xì)的代碼實(shí)例，需要的朋友可以參考下2023-05-05
Java實(shí)現(xiàn)插入排序算法可視化的示例代碼
插入排序的算法描述是一種簡(jiǎn)單直觀的排序算法。其原理是通過(guò)構(gòu)建有序序列，對(duì)于未排序數(shù)據(jù)，在已排序序列中從后向前掃描，找到相應(yīng)位置并插入。本文將用Java語(yǔ)言實(shí)現(xiàn)插入排序算法并進(jìn)行可視化，感興趣的可以了解一下2022-08-08
Java數(shù)組集合的深度復(fù)制代碼實(shí)例
這篇文章主要介紹了Java數(shù)組集合的深度復(fù)制代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了Java撲克牌速算24的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Java編程實(shí)現(xiàn)月食簡(jiǎn)單代碼分享
這篇文章主要介紹了Java編程實(shí)現(xiàn)月食簡(jiǎn)單代碼分享，程序很簡(jiǎn)單，喜歡的朋友可以拿過(guò)去玩玩。2017-11-11
如何在 Java 中利用 redis 實(shí)現(xiàn) LBS 服務(wù)
基于位置的服務(wù)，是指通過(guò)電信移動(dòng)運(yùn)營(yíng)商的無(wú)線電通訊網(wǎng)絡(luò)或外部定位方式，獲取移動(dòng)終端用戶的位置信息，在GIS平臺(tái)的支持下，為用戶提供相應(yīng)服務(wù)的一種增值業(yè)務(wù)。下面我們來(lái)一起學(xué)習(xí)一下吧2019-06-06
Java如何比較兩個(gè)對(duì)象并獲取不相等的字段詳解
這篇文章主要給大家介紹了關(guān)于Java如何比較兩個(gè)對(duì)象并獲取不相等的字段以及JAVA判斷（獲?。﹥蓚€(gè)相同對(duì)象不同的數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用java具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11
Java中@DateTimeFormat @JsonFormat失效原因及測(cè)試填坑
本文主要介紹了Java中@DateTimeFormat @JsonFormat失效原因及測(cè)試填坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了深入理解java1.8之supplier，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
java讀取配置文件(properties)的時(shí)候,unicode碼轉(zhuǎn)utf-8方式
這篇文章主要介紹了java讀取配置文件(properties)的時(shí)候，unicode碼轉(zhuǎn)utf-8方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-02-02