springboot vue接口测试定义编辑功能的实现

目录
  • 基于springboot+vue 的测试平台开发
    • 一、后端
      • 1. 查询接口
      • 2. 更新接口
    • 二、前端
      • 1. 实现编辑外显
      • 2. 实现接口更新

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

继续更新

额，昨天还说编辑不着急做，但是我发现如果不做，那么在做接口发送功能的时候，我需要反复新增新的接口来调试，那就先做了。

一、后端

后端要增加2个接口：根据接口ID查询、更新接口。

1. 查询接口

@GetMapping("/getApi")
  public Result getApiById(Long id) {
      return Result.success(apiDefinitionService.getApi(id));
  }

mybatis-plus 有直接使用id查询的方法可用selectById：

public ApiDefinition getApi(Long id) {
      return apiDefinitionDAO.selectById(id);
  }

这个查询接口就不在路径后面拼接参数了，刚好用作我后面功能的调试。

2. 更新接口

ApiDefinitionController 继续增加编辑请求的处理方法：

@PostMapping("/update")
  public Result update(@RequestBody ApiDefinition request) {
      try {
          apiDefinitionService.update(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

接着在 ApiDefinitionService 里实现：

public void update(ApiDefinition request) {
      QueryWrapper<ApiDefinition> wrapper = new QueryWrapper<>();
      wrapper.eq("id", request.getId());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.update(request, wrapper);
  }

先用传进来的 id 去查询出数据，然后更新apiDefinitionDAO.update(request, wrapper)。

二、前端

1. 实现编辑外显

点击接口列表的【编辑】按钮，打开对话框并且显示该接口的数据。

在接口列表的【编辑】按钮上增加一个绑定事件的方法handleApiUpdate。

还有别忘记添加好要请求的查询接口，后续这个步骤就不再赘述了。

在handleApiUpdate方法里，实现外显。

但是把接口返回的 request 赋值给页面的时候发现了问题。因为存在着 3 个tabs，那么我需要知道后端返回的是属于其中的哪一种tabs。

决定加个字段requestType：参数类型 (0：query, 1: rest，2：body)。

对应的新增接口的请求参数里也要增加：

那么这个字段的值从哪里来呢？

发现<el-tabs>组件里是有个事件的，当点击tab时候会触发，那么就在这个方法里赋值即可。

接着，我又想到了一个问题：比如我参数放在了请求体的tab中，但是又点了其他tab，最后点击了保存，那么这样落库的类型就不对了。

为了解决这个问题，我决定加个判断：保存的时候，会判断当前 tab里的值是否不为空，有值的才可以保存，没有的话给提示出来。

新增一个方法checkRequestNull用于检查当前 tab 里的值是不是空：

这里为什么用domains[0].key判断? 因为默认有个空节点，不填写的时候数据的长度也是 1，所以我改成了判断各自的 key。

最后修改saveApi保存接口的请求方法，在里面加入上面的请求参数判断，注意位置：

测试一下：

继续开发外显功能。

接下来还要做一件事：打开编辑页后，自动显示到有数据的 tabs 页去，比如我是请求体的参数，就自动显示请求体 tab页。

这里有 2 处改动：

先看下面的，就是增加的判断，根据接口返回的请求参数类型，然后赋值给this.activeName，就可以显示对应的 tab再看上面的，是新增了一个字段id，用来保存接口返回的接口id，编辑的时候需要传给后端接口。

测试一下外显功能：

2. 实现接口更新

首先要修改的是对话框保存按钮，我需要通过增加一个字段apiDefinitionDialogStatus，在点击的时候判断是调用新增接口，还是编辑接口，默认是create。

这个字段在点击【编辑】的handleApiUpdate方法里就已经使用了，打开对话框，然后赋值为update:

接着修改对话框的保存按钮的点击事件，当值等于create就调用saveApi()，否则就调用updateApi()。

实现updateApi方法，进行更新的操作。

在此之前，我要需要在请求对象里增加一个字段，就是接口 id，因为后端需要用 id 去查询库里的这条数据。

对应的，在请求参数的处理方法里，也需要增加id的赋值。

就是把外显时候拿到的id赋值到请求参数体里。

最后，在请求接口之前也需要校验下当前 tab 下是否有参数，通过了再请求后端更新接口：

测试一下功能：

功能完成，但是还遗漏了一点，少了个重置，不然点击【创建接口】按钮，;总是会看到上次打开的内容。

新增一个方法resetApiForm来重置 form 里的字段：

用在点击【创建接口】按钮的时候，这里修改一下，之前是改一个对话框的状态，现在都放到一个方法里去:

在方法里调用：

完成。

以上就是springboot vue接口测试定义编辑功能的实现的详细内容，更多关于springboot vue接口编辑测试的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • springboot+vue完成发送接口请求显示响应头信息

    springboot+vue完成发送接口请求显示响应头信息

    目录 基于 springboot+vue 的测试平台 一.后端实现 二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现 后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分

  • springboot+vue组件开发实现接口断言功能

    springboot+vue组件开发实现接口断言功能

    目录 基于 springboot+vue 的测试平台 一.组件的关系 二.组件的开发 1. ApiAssertions 2. ApiAssertionsEdit 3. ApiAssertionJsonPath 基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 接下来准备开发请求断言功能.关于这个功能要实现哪些需求,长什么样子,我参考了下其他优秀的业界工具,比如apifox.metersphere等. 于是决定还是先紧着最常用的来开发:JSONPath.响应时间.文本,而

  • springboot+vue完成编辑页面发送接口请求功能

    springboot+vue完成编辑页面发送接口请求功能

    目录 前言 功能实现 前言 基于 springboot+vue 的测试平台(练手项目)开发继续更新. 今天终于把已做的功能都重构完成了. 其中前端又做了个小调整,就是入参动态增删的控件,本来我是3个tab复用一个组件,后来不断发现一些问题,最后我决定还是分开写吧. 今天另一个重点是重做了编辑页发送接口请求的后端功能.这个功能重构之前是有的,但是现在我觉得之前那些做兼容不够. 因为我最近在工作中接入飞书的一些开放API,发现存在一些接口的入参是组合来的,比如 post 请求中,既有查询参数,也有请

  • 一文教会你如何搭建vue+springboot项目

    一文教会你如何搭建vue+springboot项目

    目录 前言 开发使用的软件 vue项目搭建 环境配置 cmd命令 vue ui 创建项目 vue项目制作方向梳理 通过软件vscode打开项目 vue 配置 vue-router 如何配置 axios ui框架 引入 结构 router配置 request.js get和post请求 vue.config.js vue完成 springboot 创建springboot项目 依赖 项目结构 启动类配置 配置 跨域 数据库配置.服务端口 数据交互 springboot运行顺序 controller

  • springboot vue测试平台接口定义及发送请求功能实现

    springboot vue测试平台接口定义及发送请求功能实现

    目录 基于 springboot+vue 的测试平台开发 一.http客户端选型 二.后端接口实现 1. controller 层 2. service 层 三.前端实现 四.修改遗留 bug 基于 springboot+vue 的测试平台开发 继续更新 添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示 一.http客户端选型 为了更方

  • springboot与vue实现简单的CURD过程详析

    springboot与vue实现简单的CURD过程详析

    数据库 后端项目搭建: entity dao层 @Repository public interface UserRepository extends JpaRepository<User, Long> {     @Query(value = "select * from user where name like %?1%", nativeQuery = true)     Page<User> findByNameLike(String name, Page

  • springboot vue接口测试定义编辑功能的实现

    springboot vue接口测试定义编辑功能的实现

    目录 基于springboot+vue 的测试平台开发 一.后端 1. 查询接口 2. 更新接口 二.前端 1. 实现编辑外显 2. 实现接口更新 基于springboot+vue 的测试平台开发 继续更新 额,昨天还说编辑不着急做,但是我发现如果不做,那么在做接口发送功能的时候,我需要反复新增新的接口来调试,那就先做了. 一.后端 后端要增加2个接口:根据接口ID查询.更新接口. 1. 查询接口 @GetMapping("/getApi") public Result getApiB

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

  • 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实现数据添加功能

    一.添加代码生成器 用来自动为数据库映射类建立:mapper.service.controller 注:代码生成器的写法,参考官方文档:https://mp.baomidou.com/ package com.hanmh.utils; import com.baomidou.mybatisplus.core.toolkit.StringPool; import com.baomidou.mybatisplus.generator.AutoGenerator; import com.baomido

  • Springboot Vue实现单点登陆功能示例详解

    目录 正文 简单上个图 先分析下登陆要做啥 怎么落实? 上代码 接口: token生成部分 刷新token 验证token 正文 登陆是系统最基础的功能之一.这么长时间了,一直在写业务,这个基础功能反而没怎么好好研究,都忘差不多了.今天没事儿就来撸一下. 以目前在接触和学习的一个开源系统为例,来分析一下登陆该怎么做.代码的话我就直接CV了. 简单上个图 (有水印.因为穷所以没开会员) 先分析下登陆要做啥 首先,搞清楚要做什么. 登陆了,系统就知道这是谁,他有什么权限,可以给他开放些什么业务功能,

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

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

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

  • 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测试平台接口定义前后端新增功能实现

    目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R

随机推荐