【SpringMVC 从 0 开始】SpringMVC RESTFul 实战案例 - 实现删除功能

简介: 【SpringMVC 从 0 开始】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}">删除</a>
                <a href="">更新</a>
            </td>
        </tr>
    </table>
</body>
</html>


这里仍然采用拼接的方式@{/employee/} + ${employee.id},这样 thymeleaf 才可以正确解析。


部署后,鼠标移动到删除按钮查看下浏览器左下角。


1268169-20210817123157844-1036917808.png


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}">删除</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}


三、测试效果


部署运行,点击删除测试一下,发现报错了。


1268169-20210817223427338-1181931723.png


说明写的绑定事件没生效,为啥没生效?因为找不到 vue.min.js 的资源。

这里要注意下,可以点开 idea 看下 target 下如果这里没有对应的 static,没有的话需要重新打包一下。


1268169-20210817221637105-1564061428.png


找到这里,重新打包。


1268169-20210817221727651-2129279012.png


解决完重新部署,如果访问发现还是报错 404 。


看下控制台,发现静态资源是被 springMVC 处理的,实际上处理不了,找不到资源自然就报错了。


1268169-20210817222010852-301312984.png


增加配置


现在需要在springMVC.xml 配置文件中添加配置,开放静态资源的访问:


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


这时候,当 springMVC 找不到的时候,就会交给 default-servlet去找,而不会像上面那样报 404 错误。


现在重新部署,访问列表页。


1268169-20210817225241381-518736218.png


点击删除,删除成功。


1268169-20210817225302136-1631828057.png

相关文章
|
2天前
|
前端开发 Java 应用服务中间件
【Spring】Spring MVC的项目准备和连接建立
【Spring】Spring MVC的项目准备和连接建立
12 2
|
4天前
|
XML 前端开发 Java
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
本文阐述了Spring、Spring Boot和Spring MVC的关系与区别,指出Spring是一个轻量级、一站式、模块化的应用程序开发框架,Spring MVC是Spring的一个子框架,专注于Web应用和网络接口开发,而Spring Boot则是对Spring的封装,用于简化Spring应用的开发。
21 0
Spring,SpringBoot和SpringMVC的关系以及区别 —— 超准确,可当面试题!!!也可供零基础学习
|
29天前
|
缓存 前端开发 Java
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
Soring Boot的起步依赖、启动流程、自动装配、常用的注解、Spring MVC的执行流程、对MVC的理解、RestFull风格、为什么service层要写接口、MyBatis的缓存机制、$和#有什么区别、resultType和resultMap区别、cookie和session的区别是什么?session的工作原理
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
|
16天前
|
XML 缓存 前端开发
springMVC02,restful风格,请求转发和重定向
文章介绍了RESTful风格的基本概念和特点,并展示了如何使用SpringMVC实现RESTful风格的请求处理。同时,文章还讨论了SpringMVC中的请求转发和重定向的实现方式,并通过具体代码示例进行了说明。
springMVC02,restful风格,请求转发和重定向
|
19天前
|
存储 前端开发 API
告别繁琐,拥抱简洁!Python RESTful API 设计实战,让 API 调用如丝般顺滑!
在 Web 开发的旅程中,设计一个高效、简洁且易于使用的 RESTful API 是至关重要的。今天,我想和大家分享一次我在 Python 中进行 RESTful API 设计的实战经历,希望能给大家带来一些启发。
33 3
|
2月前
|
Java 数据库连接 Spring
后端框架入门超详细 三部曲 Spring 、SpringMVC、Mybatis、SSM框架整合案例 【爆肝整理五万字】
文章是关于Spring、SpringMVC、Mybatis三个后端框架的超详细入门教程,包括基础知识讲解、代码案例及SSM框架整合的实战应用,旨在帮助读者全面理解并掌握这些框架的使用。
后端框架入门超详细 三部曲 Spring 、SpringMVC、Mybatis、SSM框架整合案例 【爆肝整理五万字】
|
2月前
|
前端开发 应用服务中间件 数据库
SpringMVC入门到实战------八、RESTful案例。SpringMVC+thymeleaf+BootStrap+RestFul实现员工信息的增删改查
这篇文章通过一个具体的项目案例,详细讲解了如何使用SpringMVC、Thymeleaf、Bootstrap以及RESTful风格接口来实现员工信息的增删改查功能。文章提供了项目结构、配置文件、控制器、数据访问对象、实体类和前端页面的完整源码,并展示了实现效果的截图。项目的目的是锻炼使用RESTful风格的接口开发,虽然数据是假数据并未连接数据库,但提供了一个很好的实践机会。文章最后强调了这一章节主要是为了练习RESTful,其他方面暂不考虑。
SpringMVC入门到实战------八、RESTful案例。SpringMVC+thymeleaf+BootStrap+RestFul实现员工信息的增删改查
|
2月前
|
Java 缓存 数据库连接
揭秘!Struts 2性能翻倍的秘诀:不可思议的优化技巧大公开
【8月更文挑战第31天】《Struts 2性能优化技巧》介绍了提升Struts 2 Web应用响应速度的关键策略,包括减少配置开销、优化Action处理、合理使用拦截器、精简标签库使用、改进数据访问方式、利用缓存机制以及浏览器与网络层面的优化。通过实施这些技巧,如懒加载配置、异步请求处理、高效数据库连接管理和启用GZIP压缩等,可显著提高应用性能,为用户提供更快的体验。性能优化需根据实际场景持续调整。
57 0
|
2月前
|
JSON API 数据库
探索FastAPI:不仅仅是一个Python Web框架,更是助力开发者高效构建现代化RESTful API服务的神器——从环境搭建到CRUD应用实战全面解析
【8月更文挑战第31天】FastAPI 是一个基于 Python 3.6+ 类型提示标准的现代 Web 框架,以其高性能、易用性和现代化设计而备受青睐。本文通过示例介绍了 FastAPI 的优势及其在构建高效 Web 应用中的强大功能。首先,通过安装 FastAPI 和 Uvicorn 并创建简单的“Hello, World!”应用入门;接着展示了如何处理路径参数和查询参数,并利用类型提示进行数据验证和转换。
49 0
|
3天前
|
缓存 监控 API
构建高效RESTful API的实战指南
在数字时代的浪潮中,API成为了连接不同软件和服务的桥梁。一个设计良好的RESTful API不仅能够提升开发效率,还能带来更好的用户体验。本文将深入探讨如何构建高效的RESTful API,从理论到实践,带你一步步打造稳定、可靠且易于维护的后端服务。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的指导和启示。

热门文章

最新文章