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

2024-09-29 03:03:21

基于 springboot+vue 的测试平台

（练手项目）开发继续更新。

接下来准备开发请求断言功能。关于这个功能要实现哪些需求，长什么样子，我参考了下其他优秀的业界工具，比如apifox、metersphere等。

于是决定还是先紧着最常用的来开发：JSONPath、响应时间、文本，而这些当中，又以JSONPath为优先。

老规矩，还是先看一下这个前端组件效果。

一、组件的关系

上面功能效果实际上由3个组件一起完成的。

在项目代码中的位置如图。

ApiAssertions：最外层的组件，主要是添加断言的入口，以及集成不同类型断言子组件的地方。
ApiAssertionsEdit：不同的断言组件都需要提供编辑功能，这里也作为集成不同类型断言编辑子组件的地方。
ApiAssertionJsonPath：这个组件就是对于JSONPath类型的断言，最底层的组件了。

这3个组件的包含关系就是：ApiAssertions -> ApiAssertionsEdit -> ApiAssertionJsonPath。

由于elementUI里并没有一个现成的方案，所以还是需要利用零散的elementUI组件来组合，就像搭积木一样。

盘点了一下，大概用了如下的elementUI组件，有兴趣的童鞋可以自行针对性的去官网了解学习：

el-select 选择器
el-row、el-col，这是 Layout 布局
el-input，输入框
el-tooltip，tips提示
el-button，按钮

剩下的就是组件开发相关的知识了，在之前的文章中我也有过简单的整理。

二、组件的开发

这部分大概介绍一下各个组件中的内容和作用。

1. ApiAssertions

这里的作用就是提供添加断言的入口，这里目前只有JSONPath是真实的，其他2个是假的。

然后添加按钮做了个控制，就是在没选择类型的时候是禁用的不让点击。

然后这里包含了子组件ApiAssertionJsonPath，这里用了v-if来判断类型，当类型值为JSON_PATH的时候才显示该组件。

关于组件类型，这些都属于常亮，所以为了更规范一些，我把这些值提出去放到了一个单独的ApiTestModel.js文件中：

export const ASSERTION_TYPE = {
  TEXT: 'Text',
  JSON_PATH: 'JSONPath',
  DURATION: 'Duration'
}

接着，还有一个编辑组件ApiAssertionsEdit也是它的子组件，因为点击添加之后，要展示出对应JSONPath的列表，而且是可以继续编辑的。

注意到上面2个子组件都绑定了自定义的属性assertions，这个属性就是用来接收外部传进来的参数用的，所以在props中要先定义出来：

  props: {
    assertions: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },

2. ApiAssertionsEdit

这个组件就是用于提供添加后的JSONPath的编辑功能，而且能提供断言的列表展示效果。另外还有断言的删除以及禁用等功能。

列表展示这里就是使用v-for了，变量断言里JSONPath列表，然后把里面的数据拿出来展示。

这里有一个:edit="true"这个属性是ApiAssertionJsonPath组件所需要的，作用在下面说。

3. ApiAssertionJsonPath

这里就是最底层的组件了，大部分内容也就在这里。

代码里用不同的elementUI组件把每列的内容定义好即可。

注意在上层组件传来的edit，在这里是用来判断当前是否为编辑状态的，是的话就显示删除和禁用的组件。

其他的代码就不具体截图了，有需要的童鞋可以获取源码对着看。

接下来就要开发对应的后端功能，就是如何把断言数据落到数据库里，也就是jsonpath这个对象里的这些字段。

    jsonPath: {
      type: Object,
      default: () => {
        return {
          type: ASSERTION_TYPE.JSON_PATH,
          expression: undefined,
          option: undefined,
          expect: undefined,
          description: undefined,
          enable: true
        }
      }
    },

前端暂时就到这里，完整代码更新

前端：

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

更多关于接口断言前端vue组件开发的资料请关注我们其它相关文章！

使用VUE+SpringBoot+EasyExcel 整合导入导出数据的教程详解

目录 1 前端 2 数据库 3 后端 3.1 contrller 3.2 mapper 3.3 bean 3.4 listener 3.5 config 3.6 配置文件 4 启动测试创建一个普通的maven项目即可项目目录结构 1 前端存放在resources/static 下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo
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 的测试平台(练手项目)开发继续更新. 今天终于把已做的功能都重构完成了. 其中前端又做了个小调整,就是入参动态增删的控件,本来我是3个tab复用一个组件,后来不断发现一些问题,最后我决定还是分开写吧. 今天另一个重点是重做了编辑页发送接口请求的后端功能.这个功能重构之前是有的,但是现在我觉得之前那些做兼容不够. 因为我最近在工作中接入飞书的一些开放API,发现存在一些接口的入参是组合来的,比如 post 请求中,既有查询参数,也有请
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

目录需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so
一文教会你如何搭建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 的测试平台一.后端实现二.前端实现 1. 返回的数据放到 vuex 中 2. 从 vuex 中获取数据并展示基于 springboot+vue 的测试平台 (练手项目)开发继续更新. 在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等辅助信息,今天完成这个功能的开发. 一.后端实现后端主要是修改一下处理接口发送请求的方法apiTestRun,之前这个方法返回的直接就是一个响应体,现在修改成返回更多的内容. 如图所示,注释掉的部分
springboot+vue组件开发实现接口断言功能

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

在微信中开发使用vue框架,通过 wx-open-launch-app 微信自定义注册组件开发微信H5打开app功能 template <template> <div class="beva-home">  <div class="weixin-open-app" v-if="openAppState"> <img class
springboot vue项目管理前后端实现编辑功能

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

目录基于 springboot+vue 的测试平台开发一.前后端调通 1. 请求后端接口 2. 项目列表页面 3. 调整接口返回的时间格式问题二.实现列表数据显示 1. 使用element UI组件库 2. 修改复制来的代码三.实现分页 1.使用组件 2. 给分页相关字段赋值 3. 关于 .sync 修饰符基于 springboot+vue 的测试平台开发继续更新今天来完成项目列表的前端部分. 一.前后端调通开发前端页面,框架里有 2 个地方需要改动: src/views: 这
SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

一.简介这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2
springboot vue项目管理后端实现接口新增

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

目录基于 springboot+vue 的测试平台开发一.分页插件二.实现接口 1. 编写 Service 层 2. 编写 Controller 层三.测试接口 1. 测试分页 2. 测试条件查询基于 springboot+vue 的测试平台开发继续更新打开项目管理,就需要看到列表里展示项目数据,比如这样(截图是这个前端框架的demo,仅作示意): 那么对应到我们平台的项目管理功能,就需要有: 列表展示添加的项目数据可以通过项目名称查询指定的项目新增项目编辑项目其他功能..
深入浅析Vue组件开发

前言这里讲的主要是想谈谈基于Vue的一个组件开发.不得不说的一点就是,在实际的Vue项目中,页面中每一个小块都是由一个个组件(.vue文件)组成,经过抽离后,然后再合并一起组成一个页面.由于上家公司我负责多的是可视化这一块的开发,这边我也将带着大家进行一个Vue项目中的可视化组件的开发,这里用到的框架将是主流的可视化框架highcharts. 一.Vue环境的搭建 1.Mac用户首先安装包管理homebrew /usr/bin/ruby -e "$(curl -fsSL https://ra
Vue组件开发技巧总结

前言临近毕业,写了个简单个人博客,项目地址是点我访问项目地址(顺便求star),本篇是系列总结第一篇.接下来会一步一步模仿一个低配版的Element 的对话框和弹框组件. 正文 Vue 单文件组件开发当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式. // 注册 Vue.component('my-component', { template: '<div>A custom compo