0

0

springboot vue项目管理前后端怎么实现编辑功能

PHPz

PHPz

发布时间:2023-05-18 11:13:45

|

1529人浏览过

|

来源于亿速云

转载

基于springboot+vue 的测试平台开发

一、打开编辑页面显示数据

1. 编辑按钮

之前复制的 table 组件,里面带有 2 个按钮,修改其中一个为【编辑】按钮。

springboot vue项目管理前后端怎么实现编辑功能

绑定一个点击事件handleUpdate(scope.row),这个row就是当前这条记录的对象,可以加个console打印一下。

springboot vue项目管理前后端怎么实现编辑功能

2. 编写 handleUpdate 方法处理数据外显

需要查询当前记录的项目名称和描述并将其赋值给表单才能将数据外显。这里需要根据项目id(唯一性)来查询。

立即学习前端免费学习笔记(深入)”;

修改一下后端项目列表的接口,使其支持根据项目id查询数据:

springboot vue项目管理前后端怎么实现编辑功能

在 handleUpdate 中调用接口:

springboot vue项目管理前后端怎么实现编辑功能

this.dialogFormVisible = true,首先打开对话框在 data 的 projectQuery 对象中,新增一个 id,用于传参给接口。再把row.id把每行里的 id 赋值给this.projectQuery.id最后请求接口,返回的list中只有一个元素,把这个结果的projectNamedescription,再赋值给 form 表单即可。

测试一下:

springboot vue项目管理前后端怎么实现编辑功能

二、保存编辑页面的内容

1. 后端增加 update 接口

编辑页表单与新增页面一致,没必要再写一个。因此,需要对表单进行一些修改,以便在创建和编辑时分别调用相应的API。

新增接口已有,现在增加一个更新的接口,继续在 ProjectService 里编写。

springboot vue项目管理前后端怎么实现编辑功能

还有对应外面的 controller 处理器:

springboot vue项目管理前后端怎么实现编辑功能

自测一下更新接口,功能正常。

springboot vue项目管理前后端怎么实现编辑功能

mall-admin-web
mall-admin-web

mall-admin-web是mall电商系统(https://down.chinaz.com/soft/41350.htm)的前端项目,基于Vue+Element实现。 主要包括商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等功能。 搭建步骤1、下载node并安装:https://down.chinaz.com/ruanjian/43369.ht

下载
2. 前端页面修改

为了可以区分这是新增表单还是编辑表单,需要在 data 里增加一个字段来标识:dialogStatus

springboot vue项目管理前后端怎么实现编辑功能

修改表单里的【保存按钮】,点击的时候通过dialogStatus的值,来决定调用新增还是更新的方法:

springboot vue项目管理前后端怎么实现编辑功能

dialogStatus等于"create",就是新增,否则就是修改更。

那么处理编辑页数据外显的方法handleUpdate也修改修改,给dialogStatus赋值为update:

springboot vue项目管理前后端怎么实现编辑功能

新增updateData方法,来调用后端的 update 接口。但是别忘记在 js 文件里添加好接口的请求,然后导入到 vue 页面文件中去。

springboot vue项目管理前后端怎么实现编辑功能

然后继续完成的updateData方法的代码:

springboot vue项目管理前后端怎么实现编辑功能

这里还设计到【新增项目】按钮的改动,因为点击了【编辑】按钮,dialogStatus等于update,那自然点击新增的时候要赋值为create才可以调用到add()方法。

但由于之前的【新增项目】按钮已经绑定了一个this.dialogFormVisible = true,所以把这2个抽出来,写到一个方法handleAdd中:

springboot vue项目管理前后端怎么实现编辑功能

然后新增按钮绑定这个新方法即可。

springboot vue项目管理前后端怎么实现编辑功能

最后,测试一下功能。

springboot vue项目管理前后端怎么实现编辑功能

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1898

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

656

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2386

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

47

2026.01.19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6147

2023.08.17

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

4

2026.03.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 9.4万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号