Eolink深度体验-前端mock数据


前言

在前端分离的项目中,前端完成静态页面,等后端完成接口之后对接口联调,两边进度不一样,有时页面完成但还得等着接口出来,到了要做一些动态渲染页面的地方,这时就想有个接口渲染看效果以便更好调整页面,这时候有mock api就能很好的调试。也有一些能提供mock数据的javascript库,例如mock.js,实际使用时需要自己编写代码也要熟悉其中语法,上手较慢,在体验了eolink接口管理工具后,我发现它真的好用,不用去记一些数据模板,占位符,很容易生成想要的数据


一、eolink快速上手

1.创建api

eolink创建api有多重方式,可以手动创建,还是根据注解或模板生成, 各种类型,支持RESTful 风格 api,http和https都可以

  1. 在api菜单中,可以添加分组分类api,也可以直接创建api。多种创建的方式可供选择,兼容从多个平台api文件导入api过来,方便转移。
  2. api编辑

支持常见的请求方式,可以依RESTful 风格选择类型。
可设置请求头,设置Content-Type
可设置请求体,query参数或rest参数
权限校验,可根据需要添加jwt,basic或oauth2.0 的校验
前置脚本,在api请求前执行javascript脚本,改变请求参数,进行签名加密等操作
后置脚本,api请求后可以加工数据,或进行签名解密的操作
高级脚本,设置cookie

在这里插入图片描述

2.mock数据

在前端开发中,前期没有接口时,使用假数据可以更方便演示产品,别人看得到自己工作产出,自己也好方便做交互逻辑。在编辑api时,需要自己自定义返回数据,使用数据模板定义想要的假数据
在这里插入图片描述

这里真的得说一下这个数据模板是真的好用,下拉选项中有全部类型,还可以筛选,有中文释义,不用去记忆模板写法,之前也有使用一些其他的工具,自己手动编写数据,不熟悉数据模板慢得很,eolink的工具直接上手就用,对新手十分友好。这里编写一条商品列表的api,快速保存后在api文档最下面可以复制到mock接口地址,测试得到伪造的分页数据。
在这里插入图片描述
在测试栏粘贴链接,添加query参数page和size,发送查看伪造的mock数据
在这里插入图片描述
这里还可以添加成测试用例,保存后方便日后再查看,更重要的是可以进行断言设置,批量测试。当后端完成api后就可以将mock-api地址换成实际接口地址,用断言测试数据返回类型否是正确。
在这里插入图片描述

3.多种响应结果

mock结果可以提供三种数据类型,模板数据,静态数据,javascript mock.js高级处理的数据,如果需要更更丰富的演示效果,需要高级处理。

二、使用和管理接口

1.更新通知

eolink有网站的消息通知,也有邮件通知;当你页面渲染交互都做好后,已经确保没问题有一天测试有说bug,结果检查一番后发现是返回数据改变了,心里很糟糕,没有通知,这又不是真正意义上的bug,这样的失误往往是缺少沟通导致了,但是在使用eolink时不会有这样的问题,每次api修改都能使用消息通知到别人,能避免细节交流的遗漏

2.测试记录

每次的测试结果都会有历史记录,记录了详情的细节,当批量测试时,就可以等接口跑完之后直接看结果了

总结

当创建了 API 文档之后,您可以随时查看 API 的改动情况、根据 API 文档发起 API 测试、编写 API 测试用例、使用 Mock API等。使用mock数据演示页面,测试可以自动化测试,可以服务到开发的整个流程中

猜你喜欢

转载自blog.csdn.net/weixin_44908612/article/details/128008328