springboot vue测试平台接口定义前后端新增功能实现

2024-10-21 05:34:48

开发继续更新

上节画了大概的前端页面，今天主要来实现后端接口，然后调通前后端实现接口新增功能。先预览下效果：

老规矩，分为前后端讲解。

一、后端部分

在 ApiDefinitionController 类中新增一个处理方法，处理接口的新增请求：

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

对应的在 service 层实现 add 方法：

public void add(ApiDefinition request) {
      if (StringUtils.isEmpty(request.getProjectId().toString())) {
          BtException.throwException("项目id为空");
      }
      if (StringUtils.isEmpty(request.getModuleId().toString())) {
          BtException.throwException("模块id为空");
      }
      if (StringUtils.isEmpty(request.getName())) {
          BtException.throwException("接口名称为空");
      }
      request.setCreateTime(new Date());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.insert(request);
  }

保存的实现不难，这里面加了几个重要参数的为空判断。

二、前端部分

在上节画的页面当中，还留有 rest参数和请求体这 2 个 tabs没画，先补全。

1. rest参数

这里主要是针对 restful 风格接口的请求，比如/bloomtest/project/list/1/10，这时候后面的1 和 10，就要在参数里设置变量去取了。

形式还是跟前面的请求头和 query参数一样的：

对应的增加这个字段：

关于这里面的 key，是组件里需要的，我试过去掉，但是会有问题。暂时先留着，存进来目前不影响我后续的操作。

2. 请求体

这个请求体内容，目前只考虑一般都情况，需要对其进行 json 格式化展示。我依然在 github 上找现成的组件，结果找到了一个vue-json-editor。

这个组件是支持编辑的，我上节里使用在返回展示的不可以编辑。

npm install vue-json-editor --save

安装好之后，在vue文件中导入使用。

这个组件里同样也是支持一些功能的，不过我只需要能格式化即可，作者代码里有一段 demo。

在我的代码里使用也很简单，直接找到要放这个输入框的地方，把代码copy进去修改。

v-model 双向绑定的字段:mode="'code'"，则是默认显示的模式，如下

功能虽然有了，但是样式和颜色我不太喜欢，我试图去修改源码想调整下，但是不行，暂时先这样，以后再说。

3. 请求参数

因为我整张页面里分了好多个不同的 form 表单，所以我现在要有个地方处理一下，搜集这些表单的内容，放在一个地方，用于最后的接口请求。

新增一个方法 handleSaveRequest ，给里面的字段赋值：

注意，在方法里有个判断。就是在这 3 个 tabs 中，我点击的哪一个，就会把其中添加的内容赋值给this.saveApiRequest.request：

另外，还要注意的是，对于 apiHeader、request、response，还需要使用JSON.stringify()将其转为 Json 字符串，方便后端保存。

4. 请求接口

首先还是要在 apiDefinition.js 新增这个接口：

接着就是导入：

最后实现新增接口的方法saveApi，当然了，在【保存】按钮上的@click="saveApi"点击事件不能少了。

在这个saveApi方法里，要做这么几件事：

先调用方法handleSaveRequest，给请求参数赋值请求接口，并提示结果关闭新增的对话框刷新列表

这样接口的新增功能就实现了，不过这里模块的地方暂时默认写死了个0，保存的接口先存放在顶级节点下，后续这里还需要实现一个选择树，用来绑定具体模块。

编辑的功能先不急，接下来先实现发送请求的功能，方便调试接口。预计工作量都在后端，刚好到周末了，可以集中开发一下，更多关于springboot vue测试接口前后端新增的资料请关注我们其它相关文章！

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

目录基于 springboot+vue 的测试平台开发一.http客户端选型二.后端接口实现 1. controller 层 2. service 层三.前端实现四.修改遗留 bug 基于 springboot+vue 的测试平台开发继续更新添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示一.http客户端选型为了更方
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 的测试平台一.后端实现二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分
springboot vue接口测试定义编辑功能的实现

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

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

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

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

目录基于 springboot+vue 的测试平台开发一.查询功能 1. input 输入框 2. 查询按钮二.新增功能 1. 新增按钮 2. 对话框 3. 新增数据基于 springboot+vue 的测试平台开发继续更新. 一.查询功能在之前的项目列表接口里,支持使用项目名称模糊查询,现在来实现前端. 1. input 输入框到组件库里找个输入框: 复制代码,修改代码: v-model: 绑定了下面 data 中的projectQuery.projectName. style=
springboot vue测试平台开发调通前后端环境实现登录

目录基于 springboot+vue的测试平台开发一.前端环境搭建快速安装二.后端环境搭建创建应用配置 application.properties 三.实现登录 1. mysql 建表 2. 后端-实现 /login 接口 3. 前端-修改代码实现登录 4. 解决跨域 5. 后端-实现 /useInfo 接口 6. 后端-实现 /logout 接口四.小结基于 springboot+vue的测试平台开发一.前端环境搭建在前端框架vue-element-admin这个项目中
Vue结合Springboot实现用户列表单页面(前后端分离)

目录用户列表页面开发项目介绍 1.前端html页面编写 2.springboot框架搭建 2.1.项目创建 2.2.连接数据库 2.3.项目完整依赖 3.编写entity层 4.查询用户信息 4.1.后端代码编写 4.2.前端代码编写 5.添加用户信息 5.1.后端代码编写 5.2.前端代码编写 6.修改用户信息 6.1.后端代码 6.2.前端代码 7.删除用户信息 7.1.后端代码 7.2.前端代码用户列表页面开发项目介绍用户列表页面开发,可以实现简单的查询,删除,修改,和添加用户信
springboot vue测试列表递归查询子节点下的接口功能实现

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

目录基于 springboot+vue 的测试平台开发一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码三.实现分页 1.使用组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符基于 springboot+vue 的测试平台开发继续更新今天来完成项目列表的前端部分. 一.前后端调通开发前端页面,框架里有 2 个地方需要改动: src/views: 这
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有
vue+mockjs模拟数据实现前后端分离开发的实例代码

本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,分享给大家,也给自己留个笔记. 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 等等优点. 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回