通过SpringMVC实现一个删除功能

前言：有关vue的使用方式忘得差不多了，希望日后看这篇文章还能回想起一些用法吧

大致逻辑

在一个表格内展示查询到的数据，我们可以通过点击“delete”按钮来删除数据。这个delete按钮是个超链接，使用RESTful方式没法直接发送delete请求，因此给这个超链接绑定了一个点击事件，当点击删除时，会调用dataTable中的deleteEmployee，进而获取到deleteForm表单，进而将触发点击事件的超链接的href属性赋值给表单的action，提交表单。

代码示例

employee_list.html

点击查看代码 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Info</title>
</head>
<body>
    <table id="dataTable" border="1" cellspacing="0" cellpadding="0" style="text-align: center;">
        <tr>
            <th colspan="5">Employee Info</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>options（<a th:href="@{/toAdd}">add</a>）</th>
        </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 id="deleteForm" method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <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) {
                    //根据id获取表单元素
                    var deleteForm = document.getElementById("deleteForm");
                    //将触发点击事件的超链接的href属性赋值给表单的action
                    deleteForm.action = event.target.href;
                    //提交表单
                    deleteForm.submit();
                    //取消超链接的默认行为
                    event.preventDefault();
                }
            }
        });
    </script>

</body>
</html>

EmployeeController.java

点击查看代码 
@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;


    @RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/employee";
    }
}

注意点

1.需要在webapp下创建static/js目录，存放veu.js文件，从而引用。新建该文件后，记得要重新打包maven

2.需要在resources目录下的配置文件中，添加下列代码,开放对静态资源的访问。

    <!--开放对静态资源的访问-->
    <mvc:default-servlet-handler />

    <!--开启mvc注解驱动-->
    <mvc:annotation-driven />
posted @ 2023-04-10 17:43  飞哥传书  阅读(179)  评论(0)    收藏  举报