前端开发同学,VirAPI你应该了解一下!

VirAPI -- 非侵入式虚拟数据在线请求响应生成接口,支持MockJs语法,请求即可得自定义规则的响应数据。

恭喜你发现了这么一款好的工具 -- VirAPI,具体VirAPI是干嘛的?有什么用?这里简单介绍一下它创建的初衷,以及它可以在你的开发过程中为你带来哪些便利与功能。

VirAPI官网截图

从MockJS谈起

如果你是前端开发人员测试人员,应该对MockJS有所耳闻,甚至在实际开发工作中有接触使用到它。MockJS是一款功能强大的虚拟随机数据生成及模拟Ajax请求的框架。官方为其给出了六大特点:

  • 前后端分离
  • 开发无侵入
  • 数据类型丰富
  • 增加单元测试的真实性
  • 用法简单
  • 方便扩展

确实很是美好,但在使用过程中其中有一环节在我看来并不友好,说是“开发无侵入”,但在使用时需要引入MockJS包,然后还要在项目中通过Mock.mock定义模拟的响应数据结构,再借助拦截Ajax请求的机制来实现整个响应请求生成虚拟数据的过程。单独这一点在我看来就不够优雅友好,现实开发过程中引入生产环境不需要的Js包定义本地测试才需要的JS代码,都是一种侵入式的污染,对我这种有代码洁癖,及考虑线上线下正式环境与本地开发环境一致性的开发者来说,确实有些顾虑。

// 引入mockjs
import Mock from 'mockjs'

const url = '/custom_request_url_01';

// 使用mockjs定义模拟响应数据
Mock.mock(url, {
    "code": 0,
    "data": {
        "mtime": "@datetime",   //随机生成日期时间
        "score|1-800": 800, //随机生成1-800的数字
        "rank|1-100": 100, //随机生成1-100的数字
        "stars|1-5": 5, //随机生成1-5的数字
        "nickname": "@cname",   //随机生成中文名字
    }
});

// 这里省略部分逻辑...

// 真正需要的逻辑:拦截网络请求返回随机虚拟响应数据
axios.get(url).then(res => {
    // 这里即可获得 Mock 随机虚拟数据
    // res.data = {code:0, data:{...}}
})
.catch(error => {
    // ...
});

为此,VirAPI应运而生,它站在MockJS的肩膀之上,采用 “云定义” “云引用”的方式,达到完全 “零入侵” “零污染”。那么VirAPI是怎么做到的呢?

我们先来想想真实开发过程是怎样的,是不是后端开发同学准备好前端所需的开发接口,然后前端同学通过请求一个URL,按照接口的要求和规范(携带什么参数、使用什么请求方式等等),去请求这个接口URL,然后服务端接口对请求进行必要的验证(参数是否正确是否合法等),再返回对应的响应结果或响应数据?

这才是真实开发过程中真实的模样和流程。而VirAPI正是尊重并遵循这个既定事实,将MockJS打造成为一个提供接口URL,验证请求数据,响应返回模拟数据的更加合理的场景化的在线虚拟数据云接口平台

VirAPI的使用介绍

1. 三步快速创建在线云虚拟数据接口

1.1 创建应用

就像实际项目开发,都是针对一个个项目应用进行开发,而其具体的接口都是在这个项目应用下创建的。VirAPI的虚拟接口也是通过项目应用来区分管理的。

创建应用示图

1.2 创建虚拟接口

创建一个项目应用后,然后再在该项目下创建接口。目前支持创建POST,GET,PUT,DELETE四种请求类型虚拟接口;支持自定义请求路由(包括动态路由)、请求参数、请求数据合法性验证规则,及预期请求响应返回数据结构。

创建接口.png

其中接口响应数据即为MockJs的Mock.mock方法中定义的虚拟响应数据结构;熟悉MockJS语法的同学能快速适应上手,定义出或复杂或丰富的想要的响应数据。

若是对MockJS语法不是很了解的也不需要担心,其语法很是简单,基本就是JSON的结构,只不过提供了丰富的方法(方法用 @ 引出,且还可以为方法传参进行调整)。具体MockJS支持的方法及参数可见http://mockjs.com/examples.html;而且几乎对着该文档说明就能马上上手。

1.3 请求接口URL获取虚拟数据

获取应用对应的Token,提交请求参数给虚拟接口URL,即可获取目标虚拟响应数据。就是这么简单!

请求接口URL获取虚拟数据示图

而且更为重要的是,在你的项目中你只需要在获取请求或发送请求的地方,将请求URL换为虚拟接口URL,即可在你的项目中使用了!
若后端开发同学的接口URL命名规则一致,则在生产环境下只需替换一下接口的请求域名即可。几乎就不用再做任何的修改,以及删除不需要的代码或做生产环境的大的适配。

2. 更加丰富的功能支持

真实项目接口总会有对提交的数据进行验证,比如是否必须、数据类型、长度范围等。而VirAPI都给予了这些支持,在创建接口时,声明接收哪些数据参数,并对其可设置验证规则。若请求传递过来的数据不合符请求数据规则,即会得到请求失败的提示。如:

请求虚拟接口验证错误.png

当前VirAPI支持 StringNumberBooleanArrayObjectArray/StringArray/NumberArray/BooleanArray/Object 等多种数据类型;基本满足绝大部分的开发场景。

POST请求Body数据定义示例

此外,VirAPI还提供了接口文档,在线测试,以及接口请求日志及统计的功能,以帮助开发者更好的管理与分析自己的项目。


以上就是VirAPI https://www.virapi.com的简单介绍,感兴趣或有需要的同学可以去尝试一下。

VirAPI是借助了MockJS的核心功能进行的扩展,在此也感谢MockJS。当前VirAPI也还存在很多不足,衷心的欢迎各位小伙伴的批评与建议。

期待VirAPI能为你的日常开发过程带去一丝帮助。谢谢~

你可能感兴趣的:(前端,mockjs,前后端分离,测试工具)