YApi

现状

首先，先看下在 前后端分离 模式下，前端开发同学一直面临着这些问题：

文档编写难以开展，更难以维护
缺少接口文档，前端开发时间点滞后，影响项目进度
没有一个即时调用的后端服务，需要不断在页面中写假数据，增加开发量
即使有了接口文档，往往因为不清晰的描述，无法准确使用字段，增加沟通成本

什么是 YApi

旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API。

它的 可视化的接口管理界面，集成 Mock 服务，足够轻松解决上述这些问题。

Github 上 20k 的 Star 数足以证明它在接口管理领域大家对它的认可。

同时，它还有如下出众的特性：

支持 权限管理，私有化部署：方便，安全的在公司内部进行搭建，和人员管理
支持 数据导入：对于导入 Swagger、Postman 数据，方便迁移历史项目文档
支持 自动化测试：为测试团队进行赋能

环境安装

因为 YApi 主技术栈为前端，只要准备好 nodejs 和 mongodb 环境即可通过 yapi-cli 方便的完成，这里不做赘述。

更多详见：Yapi 安装

基本使用

成功安装后，下面展示如何简单的维护一个接口 api：

首先在指定空间下新建一个新项目
为新项目设置统一的接口前缀等基础信息
对不同模块的接口设置不同的文件夹进行分类
创建第一个接口

定义接口的 Http 方法 和 请求 URL（还有所属分类，以及接口名称）
编写参数

按照 Http 协议（主要是 Content-Type ），定义后端需要的请求参数和响应参数
运行

这里的运行是基于 YApi 的 Mock 服务，依靠此服务，能让完全前端独立出来，不在依赖后端服务
预览

作为文档供所有开发人员阅览

数据 Mock

Mock.js

参考“基本使用”，只是完成了接口文档的阅读，及基础调用。下面来介绍 YApi 的核心功能：数据 Mock。

数据 Mock 的功能基于 Mock.js 实现，是由墨智大佬打造的。

下面配合一些使用场景来看下 Mock.js 与 YApi 的进阶使用方法：

Mock 占位符

Mock.js 内置很多 Random 功能，便于我们能快速定义一些有意义的假数据。

比如：

@boolean: 返回一个随机的布尔值
@natural: 返回一个随机的自然数（大于等于 0 的整数）。
@integer: 返回一个随机的整数。
@string: 返回一个随机字符串。
@word: 随机生成一个单词。
@province: 随机生成一个（中国）省（或直辖市、自治区、特别行政区）。
@email: 随机生成一个邮件地址。
@id: 随机生成一个 18 位身份证。
…

以上这些都可以在 https://github.com/nuysoft/Mock/wiki/Mock.Random 快速查阅到。

比如有一个 “用户列表” 接口，含有用户名，年龄，用户 id 等字段。当我们没有 mock 时，将返回如下数据：

{
  "code": 200,
  "data": [
    {
      "name": "Lorem adipisicing in",
      "age": 18412897.588101894,
      "company": "r",
      "id": "eiusmod"
    },
    {
      "name": "ut eiusmod in",
      "age": 68070733.33913586,
      "company": "culpa quis",
      "id": "min"
    }
  ]
}

上述数据在实际使用毫无意义。我们更期望得到如下数据：

{
  "code": 200,
  "data": [
    {
      "name": "是说林",
      "age": 64,
      "company": "non dolor magna minim sed",
      "id": "c970CE5A-B1b4-1faF-c52e-1171Cc6b946A"
    },
    {
      "name": "物南来",
      "age": 57,
      "company": "enim",
      "id": "4EC6Ec4b-b88A-d6Df-78A7-2457Af249Fb2"
    }
  ]
}

下面示意，如何使用 mock 占位符对字段进行修饰：

运行后，将得到 “看得懂” 的数据，这样维护的文档对前端和测试人员的体验感将提升很多：

高级 Mock

期望

比如在 用户登录场景，我们希望输入 A 账户 可以正常登录，其他账户则登录失败。

但在开发阶段，后端接口逻辑都没实现，甚至数据库连表都不存在，那前端怎么做？

这时就可以使用 YApi 的 高级 Mock 期望 特性：

通过定义 参数过滤 来指定可以正常登录的账户信息：

在运行界面，当 username/password 为 eminoda/123456 时才返回预期的成功报文：

脚本

单靠 Mock 内置的占位符，和简单的期望规则无法模拟出实际预期的效果。

比如，希望在 “用户列表” 接口中 company 字段从某个数组集合中挑选某个作为返回结果值。

这时就需要开发掌握一些 Mock.js 技巧以及 javascript 的语法来完成模拟逻辑（但这些对于经历过 jsp 的后端来说都不是问题，这和前端如今 vue，react 扯不上关系）：

mockJson.code = 200;

params.page = params.page || 1;
params.pageSize = params.pageSize || 10;

const buildData = function (size) {
  let c = 0;
  const list = [];
  while (c < size) {
    list.push({
      name: Random.cword(3),
      age: Random.natural(10, 99),
      id: Random.guid(),
      company: Random.pick(['alibaba', 'bytedance', 'tencent']),
    });
    c++;
  }
  return list;
};
if (params.page < 2) {
  mockJson.data = buildData(10);
} else {
  mockJson.data = buildData(5);
}

运行后，将得到如下数据：

{
  "code": 200,
  "data": [
    {
      "name": "六查山",
      "age": 30,
      "id": "67d2f1Fe-D276-fBF2-AdBF-b1FEBA28Dee3",
      "company": "bytedance"
    },
    {
      "name": "次养打",
      "age": 22,
      "id": "cbfF7e85-3CCB-98c4-5ff0-f4F2ee0D5ED6",
      "company": "tencent"
    }
  ]
}