搜索
首页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删除
Vue常见面试题汇总(附答案解析)Vue常见面试题汇总(附答案解析)Apr 08, 2021 pm 07:54 PM

本篇文章给大家分享一些Vue面试题(附答案解析)。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

5 款适合国内使用的 Vue 移动端 UI 组件库5 款适合国内使用的 Vue 移动端 UI 组件库May 05, 2022 pm 09:11 PM

本篇文章给大家分享5 款适合国内使用的 Vue 移动端 UI 组件库,希望对大家有所帮助!

vue中props可以传递函数吗vue中props可以传递函数吗Jun 16, 2022 am 10:39 AM

vue中props可以传递函数;vue中可以将字符串、数组、数字和对象作为props传递,props主要用于组件的传值,目的为了接收外面传过来的数据,语法为“export default {methods: {myFunction() {// ...}}};”。

手把手带你利用vue3.x绘制流程图手把手带你利用vue3.x绘制流程图Jun 08, 2022 am 11:57 AM

利用vue3.x怎么绘制流程图?下面本篇文章给大家分享基于 vue3.x 的流程图绘制方法,希望对大家有所帮助!

如何覆盖组件库样式?React和Vue项目的解决方法浅析如何覆盖组件库样式?React和Vue项目的解决方法浅析May 16, 2022 am 11:15 AM

如何覆盖组件库样式?下面本篇文章给大家介绍一下React和Vue项目中优雅地覆盖组件库样式的方法,希望对大家有所帮助!

聊聊vue指令中的修饰符,常用事件修饰符总结聊聊vue指令中的修饰符,常用事件修饰符总结May 09, 2022 am 11:07 AM

本篇文章带大家聊聊vue指令中的修饰符,对比一下vue中的指令修饰符和dom事件中的event对象,介绍一下常用的事件修饰符,希望对大家有所帮助!

通过9个Vue3 组件库,看看聊前端的流行趋势!通过9个Vue3 组件库,看看聊前端的流行趋势!May 07, 2022 am 11:31 AM

本篇文章给大家分享9个开源的 Vue3 组件库,通过它们聊聊发现的前端的流行趋势,希望对大家有所帮助!

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

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.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。