SpringMVC RESTFul实战案例删除功能实现

2024-08-28 09:44:57

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 下新建一个static\js，用于存放静态文件。网上下载一个 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删除的资料请关注我们其它相关文章！

SpringMVC实战案例RESTFul实现添加功能

目录 RESTFul实现添加功能一.前端改动 1. 修改列表页,增加一个[添加]按钮 2. 配置 view-controller 3. 编写添加页面二.后端处理三.测试效果 RESTFul实现添加功能数据被删除差不多了,得做个添加的功能. 一.前端改动 1. 修改列表页,增加一个[添加]按钮点击这个按钮可以调到新增页面. <tr> <th colspan="5">员工列表</th> </tr> <tr> <th
SpringMVC实现RESTful风格:@PathVariable注解的使用方式

目录 1.RESTful简介 2.SpringMVC实现RESTful风格 2.1 @PathVariable注解 2.2 修改SpringMVC的前端控制器配置 3.静态资源访问问题 3.1 解决方法一 3.2 解决方法二 4.综合实例 1.RESTful简介 RESTful为Representational State Transfer的缩写,中文释义为"表现层状态转换".RESTful不是一种标准,而是一种设计风格. RESTful本质上是一种分布式系统的应用层解决方案,它的主要
SpringMVC JSON数据交互及RESTful支持实现方法

JSON概述 JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式,最近几年才流行起来.JSON是基于JavaScript的一个子集,使用了C.C++.C#.Java. JavaScript.Per. Python等其他语言的约定,采用完全独立于编程语言的文本格式来存储和表示数据.这些特性使JSON成为理想的数据交互语言,它易于阅读和编写,同时也易于机器解析和生成. 与XML一样,JSON也是基于纯文本的数据格式.初学者可以使用JSON传输一个
SpringMVC RESTful支持实现过程演示

这篇文章主要介绍了SpringMVC RESTful支持实现过程演示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.概述 1.1 什么是RESTful RESTful软件开发理念,RESTful对http进行非常好的诠释. RESTful即Representational State Transfer的缩写. 综合上面的解释,我们总结一下什么是RESTful架构: 1)每一个URI代表一种资源: (2)客户端和服务器之间,传递这种资源的某种
springMVC在restful风格的性能优化方案

目录 springMVC在restful风格的性能优化测试 1.非restful接口 2.restful接口匹配原理这段代码中匹配逻辑有三: 优化方案原理: 实现: 我使用基于java config的注解配置. 最终测试 spring restful使用中遇到的一个性能问题原因: 解决方案: springMVC在restful风格的性能优化目前,restful的接口风格很流行,使用springMVC来搭配restful也是相得益彰.如下,使用@PathVariable注解便可以获取U
SpringMVC RESTFul实战案例修改功能实现

目录 SpringMVC RESTFul实现修改功能一.回显功能 1.修改操作超链接 2.处理控制器方法 3.创建修改页面二.修改功能 1.添加控制器方法 2.测试效果 SpringMVC RESTFul实现修改功能一.回显功能做实际修改操作之前,需要有个回显功能,就是点编辑页后可以看到数据. 1.修改操作超链接这里的请求地址跟删除的一样,需要带上 id,因为要回显这个 id 的数据. <td> <a @click="deleteEmployee" th:h
SpringMVC RESTFul实战案例删除功能实现

目录 SpringMVC RESTFul实现删除功能一.修改列表前端代码 1. 修改删除的请求地址 2. 添加删除用的 form 表单 3. 删除超链接绑定点击事件二.增加后端控制器三.测试效果 SpringMVC RESTFul实现删除功能删除相对麻烦一点,因为 Rest 中得用 delete 方法请求. 在前面已经提到如何实现 delete 和 put 方法请求了,这里同样借助表单来提交 post 请求,然后转成 delete 请求方法. 一.修改列表前端代码 1. 修改删除的请求地
SpringMVC RESTFul实战案例访问首页

目录 SpringMVC RESTFul访问首页实现一.新建 index.html 二.配置视图控制器三.Idea 部署配置 SpringMVC RESTFul访问首页实现一.新建 index.html 在 webapp\WEB-INF\templates 下新建首页 index.html. <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <
SpringMVC使用RESTful接口案例详解

目录一.准备工作二.功能清单三.具体功能-访问首页一.准备工作和传统 CRUD 一样,实现对员工信息的增删改查. ①搭建环境添加相关依赖 web.xml springmvc.xml ②准备实体类 public class Employee { private Integer id; private String lastName; private String email; //1 male, 0 female private Integer gender; public Integ
SpringMVC RESTFul实现列表功能

目录 SpringMVC RESTFul列表功能实现一.增加控制器方法二.编写列表页 employee_list.html 三.访问列表页 SpringMVC RESTFul列表功能实现一.增加控制器方法在控制器类 EmployeeController 中,添加访问列表方法. @Controller public class EmployeeController { @Autowired private EmployeeDao employeeDao; @RequestMapping(v
Python实战案例之可增删改查的员工管理系统

目录一.分析 (一)大纲 (二)添加员工 (三)删除员工 (四)查找员工 (五)修改员工二.实现代码三.测试一.分析 (一)大纲 1.首先创建一个空列表,用来存储员工信息,即employee = []. 2.管理系统主要通过while True语句来进行无限循环,如果while条件判断语句永远为True,则循环将会无限执行.在循环中可通过continue语句和break语句来分别跳出本次循环和整个循环. 3.设定六个数字1-6依次对应对该系统的不同操作,这里使用一个if-else语句,若
SpringMVC RESTFul实体类创建及环境搭建

目录一.搭建 mvc 环境二.创建实体类三.准备 dao 模拟数据四.准备控制器一.搭建 mvc 环境新建一个 module 模块,创建 maven 工程,步骤跟以前一样,各种配置文件内容也可以拷贝修改一下即可. 二.创建实体类新建个 bean 包,创建实体类 Employee: package com.pingguo.rest.bean; public class Employee { private Integer id; private String lastName; pr
SpringMVC Restful风格与中文乱码问题解决方案介绍

目录基本要点 1.定义 2.传统方式与Restful风格的区别 3.如何使用Restful风格 4.为什么要用restful 5.乱码问题基本要点 1.定义根据百度百科的定义,RESTFUL是一种网络应用程序的设计风格和开发方式 2.传统方式与Restful风格的区别在我们学习restful风格之前,我们请求接口,都是使用http://localhost:8080/controller?method=add这种方式携带接口所需要的参数而调用restful风格的接口时,我们可以改成htt
Swift中闭包实战案例详解

前言无论苹果的官方文档还是由官方文档衍生出来的一些文章和书籍都比较重视基础语法知识的讲解,对于实战中的应用提及的都很少,所以当我们想使用"闭包"解决一些问题的时候,会忽然出现看着一堆理论知识却不知从何下手的尴尬感,这就是理论和时实战的区别了. 本文不赘述Swift闭包的的基本语法了,百度或者Google下有很多资料.如题所示本文着重讲述Swift闭包的一些实战案例,有需要的小伙伴可以参考下,经验丰富的大神也请指教. 关于如何理解闭包学习闭包的第一个难点就是理解闭包,可能很多人用了很