欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SpringMVC?RESTFul實(shí)戰(zhàn)案例刪除功能實(shí)現(xiàn)

 更新時(shí)間：2022年05月28日 14:55:18   作者：把蘋果咬哭的測(cè)試筆記  
這篇文章主要為大家介紹了SpringMVC?RESTFul實(shí)戰(zhàn)案例刪除功能實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

SpringMVC RESTFul實(shí)現(xiàn)刪除功能

刪除相對(duì)麻煩一點(diǎn)，因?yàn)?Rest 中得用 delete 方法請(qǐng)求。

在前面已經(jīng)提到如何實(shí)現(xiàn) delete 和 put 方法請(qǐng)求了，這里同樣借助表單來提交 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 表單，用來實(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) {
                    //通過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)擊刪除按鈕后，就是要去訪問這個(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àn)閯h除之后其實(shí)就跟/employee/{id}這個(gè)請(qǐng)沒關(guān)系了，如果使用轉(zhuǎn)發(fā)到列表頁，瀏覽器地址欄里顯示的仍然還是/employee/{id}。

三、測(cè)試效果

部署運(yùn)行，點(diǎn)擊刪除測(cè)試一下，發(fā)現(xiàn)報(bào)錯(cuò)了。

說明寫的綁定事件沒生效，為啥沒生效？因?yàn)檎也坏?vue.min.js 的資源。

這里要注意下，可以點(diǎn)開 idea 看下 target 下如果這里沒有對(duì)應(yīng)的 static，沒有的話需要重新打包一下。

找到這里，重新打包。

解決完重新部署，如果訪問發(fā)現(xiàn)還是報(bào)錯(cuò) 404 。

看下控制臺(tái)，發(fā)現(xiàn)靜態(tài)資源是被 springMVC 處理的，實(shí)際上處理不了，找不到資源自然就報(bào)錯(cuò)了。

增加配置

現(xiàn)在需要在springMVC.xml 配置文件中添加配置，開放靜態(tài)資源的訪問：

<!--放開靜態(tài)資源的訪問-->
    <mvc:default-servlet-handler />

這時(shí)候，當(dāng) springMVC 找不到的時(shí)候，就會(huì)交給 default-servlet去找，而不會(huì)像上面那樣報(bào) 404 錯(cuò)誤。

現(xiàn)在重新部署，訪問列表頁。

點(diǎn)擊刪除，刪除成功。

以上就是SpringMVC RESTFul實(shí)戰(zhàn)案例刪除功能實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于SpringMVC RESTFul刪除的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論