乐趣区

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

VirAPI — 非侵入式虚构数据在线申请响应生成接口,反对 MockJs 语法,申请即可得自定义规定的响应数据。

祝贺你发现了这么一款好的工具 — 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 四种申请类型虚构接口;反对自定义申请路由(包含动静路由)、申请参数、申请数据合法性验证规定,及预期申请响应返回数据结构。

其中接口响应数据即为 MockJs 的 Mock.mock 办法中定义的虚构响应数据结构;相熟 MockJS 语法的同学能疾速适应上手,定义出或简单或丰盛的想要的响应数据。

若是对 MockJS 语法不是很理解的也不须要放心,其语法很是简略,根本就是 JSON 的构造,只不过提供了丰盛的办法(办法用 @ 引出,且还能够为办法传参进行调整)。具体 MockJS 反对的办法及参数可见 http://mockjs.com/examples.html;而且简直对着该文档阐明就能马上上手。

1.3 申请接口 URL 获取虚构数据

获取利用对应的 Token,提交申请参数给虚构接口 URL,即可获取指标虚构响应数据。就是这么简略!

而且更为重要的是,在你的我的项目中你只须要在获取申请或发送申请的中央,将申请 URL 换为虚构接口 URL,即可在你的我的项目中应用了!
若后端开发同学的接口 URL 命名规定统一,则在生产环境下只需替换一下接口的申请域名即可。简直就不必再做任何的批改,以及删除不须要的代码或做生产环境的大的适配。

2. 更加丰盛的性能反对

实在我的项目接口总会有对提交的数据进行验证,比方是否必须、数据类型、长度范畴等。而 VirAPI 都给予了这些反对,在创立接口时,申明接管哪些数据参数,并对其可设置验证规定。若申请传递过去的数据不合符申请数据规定,即会失去申请失败的提醒。如:

以后 VirAPI 反对 StringNumberBooleanArrayObjectArray/StringArray/NumberArray/BooleanArray/Object 等多种数据类型;根本满足绝大部分的开发场景。

此外,VirAPI 还提供了接口文档,在线测试,以及接口申请日志及统计的性能,以帮忙开发者更好的治理与剖析本人的我的项目。


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

VirAPI 是借助了 MockJS 的外围性能进行的扩大,在此也感激 MockJS。以后 VirAPI 也还存在很多有余,衷心的欢送各位小伙伴的批评与倡议。

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

退出移动版