搜索
首页Javajava教程springboot vue组件开发怎么实现接口断言功能

基于 springboot vue 的测试平台

(练手项目)开发继续更新。

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

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

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

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

一、组件的关系

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

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

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

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

  • ApiAssertions:最外层的组件,主要是添加断言的入口,以及集成不同类型断言子组件的地方。

  • ApiAssertionsEdit:不同的断言组件都需要提供编辑功能,这里也作为集成不同类型断言编辑子组件的地方。

  • ApiAssertionJsonPath:这个组件就是对于JSONPath类型的断言,最底层的组件了。

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

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

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

  • el-select 选择器

  • el-rowel-col,这是 Layout 布局

  • el-input,输入框

  • el-tooltip,tips提示

  • el-button,按钮

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

二、组件的开发

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

1. ApiAssertions

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

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

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

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

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

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

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

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

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

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

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

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

2. ApiAssertionsEdit

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

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

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

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

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

3. ApiAssertionJsonPath

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

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

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

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

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

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

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

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

以上是springboot vue组件开发怎么实现接口断言功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:亿速云。如有侵权,请联系admin@php.cn删除
如何将Maven或Gradle用于高级Java项目管理,构建自动化和依赖性解决方案?如何将Maven或Gradle用于高级Java项目管理,构建自动化和依赖性解决方案?Mar 17, 2025 pm 05:46 PM

本文讨论了使用Maven和Gradle进行Java项目管理,构建自动化和依赖性解决方案,以比较其方法和优化策略。

如何使用适当的版本控制和依赖项管理创建和使用自定义Java库(JAR文件)?如何使用适当的版本控制和依赖项管理创建和使用自定义Java库(JAR文件)?Mar 17, 2025 pm 05:45 PM

本文使用Maven和Gradle之类的工具讨论了具有适当的版本控制和依赖关系管理的自定义Java库(JAR文件)的创建和使用。

如何使用咖啡因或Guava Cache等库在Java应用程序中实现多层缓存?如何使用咖啡因或Guava Cache等库在Java应用程序中实现多层缓存?Mar 17, 2025 pm 05:44 PM

本文讨论了使用咖啡因和Guava缓存在Java中实施多层缓存以提高应用程序性能。它涵盖设置,集成和绩效优势,以及配置和驱逐政策管理最佳PRA

如何将JPA(Java持久性API)用于具有高级功能(例如缓存和懒惰加载)的对象相关映射?如何将JPA(Java持久性API)用于具有高级功能(例如缓存和懒惰加载)的对象相关映射?Mar 17, 2025 pm 05:43 PM

本文讨论了使用JPA进行对象相关映射,并具有高级功能,例如缓存和懒惰加载。它涵盖了设置,实体映射和优化性能的最佳实践,同时突出潜在的陷阱。[159个字符]

Java的类负载机制如何起作用,包括不同的类载荷及其委托模型?Java的类负载机制如何起作用,包括不同的类载荷及其委托模型?Mar 17, 2025 pm 05:35 PM

Java的类上载涉及使用带有引导,扩展程序和应用程序类负载器的分层系统加载,链接和初始化类。父代授权模型确保首先加载核心类别,从而影响自定义类LOA

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。