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

目录
  • 基于springboot+vue 的测试平台开发
    • 一、打开编辑页面显示数据
      • 1. 编辑按钮
      • 2. 编写 handleUpdate 方法处理数据外显
    • 二、保存编辑页面的内容
      • 1. 后端增加 update 接口
      • 2. 前端页面修改

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

继续更新

今天实现项目列表的编辑功能：

点击【编辑】按钮，打开对话框，显示此条记录的信息修改对话框表单内容，点击对话框【保存】按钮，更新此条记录

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

1. 编辑按钮

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

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

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

数据外显其实还是要查询出当前记录的项目名称和描述，再赋值给 form 表单即可。这里需要根据项目id(唯一性)来查询。

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

在 handleUpdate 中调用接口：

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

测试一下：

二、保存编辑页面的内容

1. 后端增加 update 接口

编辑页表单与新增页面一致，没必要再写一个。所以要稍作一些改动，让这个表单分别在新增和编辑的时候可以调用对应的接口。

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

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

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

2. 前端页面修改

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

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

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

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

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

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

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

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

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

最后，测试一下功能。

功能完成。

以上就是springboot vue项目管理前后端实现编辑功能的详细内容，更多关于springboot vue前后端项目管理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • springboot vue接口测试前后端树节点编辑删除功能

    springboot vue接口测试前后端树节点编辑删除功能

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

  • springboot vue测试列表递归查询子节点下的接口功能实现

    springboot vue测试列表递归查询子节点下的接口功能实现

    目录 基于 springboot+vue 的测试平台开发 一.后端 1. 建表 2. 列表接口 二.前端 1. 准备工作 2. 请求接口 3. 测试效果 4. 发现问题 基于 springboot+vue 的测试平台开发 继续更新 模块树节点的开发暂告一段落,现在开发右边接口相关的部分,今天先完成列表的功能. 功能是这样,当点击树的某个节点时候,右侧列表展示这个节点下的所有接口,带分页(最终效果图). 需要注意的是,因为节点下还有子节点,所以列表的功能需要使用递归来查询. 一.后端 1. 建表

  • springboot vue接口测试前后端实现模块树列表功能

    springboot vue接口测试前后端实现模块树列表功能

    目录 基于 springboot+vue 的测试平台 一.存放接口的js文件 二.在vue文件中调用接口 1. 触发接口 2. 调用接口 三.实现选择项目功能 1. 后端增加获取所有项目接口 2. 前端调用接口 3. 选择项目触发模块树接口 4. 测试一下 基于 springboot+vue 的测试平台 开发继续更新. 上一篇完成了模块树的列表接口,接下来可以和前端页面联调了. 一.存放接口的js文件 老样子,新建js文件,把要调用的后端接口请求封装在 src/api/apiModule.js这

  • springboot vue接口测试前端动态增删表单功能实现

    springboot vue接口测试前端动态增删表单功能实现

    目录 基于 springboot+vue 的测试平台开发 页面实现 1. 基础信息部分 2. 请求参数部分 3. 响应内容部分 基于 springboot+vue 的测试平台开发 继续更新 目前已经进入到接口定义功能的开发阶段,首先我还是直接在前段画了个大概的页面,先预览下: 不过目前只是画了这个页面都主要功能,细节未尽事宜待具体开发的时候再进一步完善. 从上面动态图上已经显示了大概情况,主要是创建接口的功能,其中还支持发送调试.发送请求的功能就直接参考 postman,用起来习惯. 页面实现

  • springboot vue接口测试HutoolUtil TreeUtil处理树形结构

    springboot vue接口测试HutoolUtil TreeUtil处理树形结构

    目录 基于springboot+vue的测试平台开发 一.引用 HutoolUtil 二.建表 三.后端接口实现 1. Controller 层 2. DAO层 3. Service 层 四.测试一下 1. 测试结构数据 2. 测试新增默认 基于springboot+vue的测试平台开发 继续更新 上次完成了接口定义功能的前端页面,那么后端现在开始逐一实现对应的功能,首先就是提供模块列表接口,这个模块是支持子层级的,所以大概结构是这样: [ { id: 1, label: '默认', child

  • springboot vue前后端接口测试树结点添加功能

    springboot vue前后端接口测试树结点添加功能

    目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口

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

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

    目录 基于springboot+vue 的测试平台开发 一.打开编辑页面显示数据 1. 编辑按钮 2. 编写 handleUpdate 方法处理数据外显 二.保存编辑页面的内容 1. 后端增加 update 接口 2. 前端页面修改 基于springboot+vue 的测试平台开发 继续更新 今天实现项目列表的编辑功能: 点击[编辑]按钮,打开对话框,显示此条记录的信息修改对话框表单内容,点击对话框[保存]按钮,更新此条记录 一.打开编辑页面显示数据 1. 编辑按钮 之前复制的 table 组件

  • SpringBoot+VUE实现前后端分离的实战记录

    SpringBoot+VUE实现前后端分离的实战记录

    一,前端VUE项目 这里使用VUE UI创建一个VUE项目 命令行输入vue ui进入 手动配置项目 选中这三个 点击下一步->点击创建项目 用IDEA打开刚才创建的项目 IDEA中的安装vue插件并重启 IDEA控制台中输入vue add axios安装axios 新建一个Show.vue 在index,js的routes中配置它的路由 编写Show,vue向后端请求数据并展示 <template> <div> <table> <tr> <td

  • springboot vue项目管理后端实现接口新增

    springboot vue项目管理后端实现接口新增

    目录 基于 springboot+vue 的测试平台开发继续更新. 一.编写实体类 Project 二.创建数据表 修改 application.properties 中的配置 三.编写 ProjectDAO 接口 四.编写 ProjectService 类 自定义异常类 五.编写 ProjectController 类 六.测试新增接口 /project/add 基于 springboot+vue 的测试平台开发继续更新. 接下来开发项目管理,是一个很常规的功能:有列表页.查询.新增.编辑,删

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • SpringBoot+mybatis+Vue实现前后端分离项目的示例

    SpringBoot+mybatis+Vue实现前后端分离项目的示例

    目录 一.SpringBoot环境搭建 1.项目的数据库 2.项目所需依赖 3.application.yml文件 4.入口类 二.vue实现前后端分离 1.前端页面 2.springBoot控制层 3.mapper文件 4.项目完整源代码 vue前后端分离实现功能:员工的增删改(先实现数据回显之后,再进行修改)查 一.SpringBoot环境搭建 1.项目的数据库 /* Navicat Premium Data Transfer Source Server : windows Source S

  • spring boot+vue 的前后端分离与合并方案实例详解

    springboot和vue结合的方案网络上的主要有以下两种: 1. [不推荐]在html中直接使用script标签引入vue和一些常用的组件,这种方式和以前传统的开发是一样的,只是可以很爽的使用vue的双向数据绑定,这种方式只适合于普通的全栈开发. 2.[推荐]使用vue官方的脚手架创建单独的前端工程项目,做到和后端完全独立开发和部署,后端单独部署一个纯restful的服务,而前端直接采用nginx来部署,这种称为完全的前后端分离架构开发模式,但是在分离中有很多api权限的问题需要解决,包括部

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • python框架django中结合vue进行前后端分离

    python框架django中结合vue进行前后端分离

    目录 一:创建django项目 二:安装vue 三:设置vue项目 四:vue项目写完后,打包vue项目,然后修改django配置,将vue集成到django中 五:修改django的主目录的urls文件 六:启动django服务,访问localhost:8000 则可以出现vue的首页 七:有时候并不能直接访问出首页,原因是路径不对 八:vue打包之后经常会出现fontawesome图标库不能使用的情况 一:创建django项目 django-admin startproject mysite

随机推荐