SpringMVC RESTFul實戰案例刪除功能實現

2022-05-28 22:01:35

SpringMVC RESTFul實現刪除功能

刪除相對麻煩一點，因為 Rest 中得用 delete 方法請求。

在前面已經提到如何實現 delete 和 put 方法請求了，這裡同樣藉助表單來提交 post 請求，然後轉成 delete 請求方法。

一、修改列表前端程式碼

1. 修改刪除的請求地址

Rest 中刪除的請求地址應該是/employee/id}，所以列表按鈕【刪除】對應超連結要改：

<!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>
        <!--迴圈後端放到request域中的資料 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 表單，用來實際傳送請求。

<!--傳送刪除請求用的表單-->
    <form method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

注意 HiddenHttpMethodFilter 的要求：必須傳輸 _method 請求引數，並且值為最終的請求方式，這裡的 value 就是 delete 。

3. 刪除超連結繫結點選事件

要點選執行刪除，所以超連結要繫結點選事件，引入vue.js 。

在 webapp 下新建一個staticjs，用於存放靜態檔案。網上下載一個 vue.js，放到這個資料夾下。

接著，在前端程式碼中引入：

<!--引入 vue.js-->
    <script type="text/javascript" th:src="@{/static/js/vue.min.js}"></script>

修改列表中刪除按鈕的超連結，繫結一個 click 事件：

<!--迴圈後端放到request域中的資料 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>

繼續編寫 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");
                    //將觸發事件的超連結的 href 屬性為表單的 action 屬性賦值
                    delete_form.action = event.target.href;
                    //提交表單
                    delete_form.submit();
                    //阻止超連結的預設跳轉行為
                    event.preventDefault();
                }
            }
        })
    </script>

delete_form.action = event.target.href; 值就是觸發事件的超連結的 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}這個請沒關係了，如果使用轉發到列表頁，瀏覽器位址列裡顯示的仍然還是/employee/{id}。

三、測試效果

部署執行，點選刪除測試一下，發現報錯了。

說明寫的繫結事件沒生效，為啥沒生效？因為找不到 vue.min.js 的資源。

這裡要注意下，可以點開 idea 看下 target 下如果這裡沒有對應的 static，沒有的話需要重新打包一下。

找到這裡，重新打包。

解決完重新部署，如果存取發現還是報錯 404 。

看下控制檯，發現靜態資源是被 springMVC 處理的，實際上處理不了，找不到資源自然就報錯了。

增加設定

現在需要在springMVC.xml 組態檔中新增設定，開放靜態資源的存取：

<!--放開靜態資源的存取-->
    <mvc:default-servlet-handler />

這時候，當 springMVC 找不到的時候，就會交給 default-servlet去找，而不會像上面那樣報 404 錯誤。

現在重新部署，存取列表頁。

點選刪除，刪除成功。

以上就是SpringMVC RESTFul實戰案例刪除功能實現的詳細內容，更多關於SpringMVC RESTFul刪除的資料請關注it145.com其它相關文章！