乐趣区

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

jiezi

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 反对 String、Number、Boolean、Array、Object、Array/String、Array/Number、Array/Boolean、Array/Object 等多种数据类型；根本满足绝大部分的开发场景。

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

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

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

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

退出移动版