接口管理平台调研

背景

  • 后端接口没开发完的时候,前端又有接口方面的需求。
  • 开发前期没有详细的接口文档给前后端开发带来一些不必要的工作量。
  • 接口更新了,没及时通知前端。
  • 最好本身集成测试能力。

希望实现

  • ui和操作一定要简洁。
  • 提供mock数据的能力。
  • 提供接口描述及详细文档。
  • 按模块管理。
  • 团队管理、消息通知。
  • 接口测试能力。
  • 为保证业务安全,最好是具备本地部署的能力。

方案选择

纯前端控制(Mockjs、Jquery-mockjax、Pretender、APItizer等)

嵌入式

直接在代码里需要数据的地方mock数据,难维护,不建议。

1
2
3
4
5
6
7
8
9
10
11
var Mock = require('mockjs')
var data = Mock.mock({
'list|2-10': [{
'id': ()=>Mock.Random.integer(20,100),
'name': ()=>Mock.Random.ctitle(),
'date':()=>Mock.Random.date("yyyy-MM-dd")
}]
});

// 输出结果
console.log(JSON.stringify(data, null, 4))

拦截ajax式

优点很明显,可以将mock数据文件单独拆分,然后可以根据项目环境&开关判断是否需要mock
mockjs-test2.js

1
2
3
4
5
6
7
8
9
10
11
12
var axios = require('axios')

const env = 'dev'//从全局配置读取
const openMock = true//从全局配置读取

if (env === "dev" && openMock) {
require('./mockjs-test2data')
}

axios.get('/get-name2').then(function (res) {
console.log(res.data)
})

mockjs-test2data.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var axios = require('axios')
var MockAdapter = require('axios-mock-adapter')
var Mock = require('mockjs')

// 设置模拟调试器实例
var mock = new MockAdapter(axios);
// 模拟任意GET请求到 /users
//reply的参数为 (status, data, headers)
mock.onGet('/users').reply(200, {
users: [
{ id: 1, name: 'John Smith' }
]
});

mock.onGet('/get-age').reply(200, {
users: [
{ id: 1, age: 18}
]
});

mock.onGet('/get-name').reply(200, Mock.mock({
'list|2-10': [{
'id': ()=>Mock.Random.integer(20,100),
'name': ()=>Mock.Random.ctitle(),
'date':()=>Mock.Random.date("yyyy-MM-dd")
}]
}));

mock.onGet('/get-name2').reply(200, Mock.mock({
"boolean|1": true
}));

在线平台

显然不符合,容易泄露数据,类似的平台有:

开源的Mock平台

从七个维度进行比较

对比 rap2 Yapi swagger easy-mock nei Eolinker DOClever
ui/操作简洁 简洁 不懂开发,上手也是没有难度 比较分散,主要是做接口文档维护 涉及到工具配合使用,成本会稍大 整体流程比较复杂 操作有点复杂,response和mock分开 简洁
mock能力 mockjs mockjs 需要安装扩展 mockjs 自己一套+mockjs 支持 支持
接口描述 支持markdown 富文本 文本 文本,高级需要借助swagger 文本 支持 支持
接口模块管理 支持 支持 不支持 支持 支持 支持 支持
团队管理/消息通知 只支持简单的团队管理 支持 不支持 支持 支持 支持 支持
接口测试能力 不支持 支持 很简单的测试 需要借助swagger 需要chrome插件支持 支持 简单支持
本地部署 部署复杂,有前端和后端两套项目(React / Redux / Saga / Router、Mock.js、Koa、Sequelize、node) nodejs、mongodb 如果需要完整功能,需要部署多个组件,比较依赖yaml和json配置 nodejs、mongodb、redis nodejs、mongodb、redis、mysql 开源版阉割了部分功能 支持
demo http://rap2.taobao.org/ http://47.99.218.193/ https://petstore.swagger.io/ https://nei.netease.com/ https://ldtcorp.w.eolinker.com/ http://doclever.cn/

推荐Yapi

mock接口与非mock接口的切换方案

新项目

  1. 如果我们只用mock.js+拦截ajax mock数据,在代码里可以根据env和openMock这两个全局变量来判断是否导入mock数据。
  2. 使用mock平台且接口定义规范,比如:
    https://mockapi.com/api/user/get-user-info // mock地址
    https://devliudutui.com/api/user/get-user-info // 真实地址
    我们就可以在代码里根据env和openMock设置全局变量BASE_API。

旧项目

  1. 前端定义一个MockApi,在有需要接口mock的地方写出MockApi,送测上线时全局搜索MockApi改掉。
  2. 利用webpack-dev-server提供的proxy配置(https://webpack.docschina.org/configuration/dev-server/#devserverproxy)。
  3. 前端判断,在底层ajax请求框架中,如果发现请求接口失败(404),则请求继续请求对应的mock接口(替换base_api)。
  4. 后端判断,如果接受到的请求不存在handler,则反向代理到mock接口。

YApi要点

数据MOCK

  1. 普通Mock(mockjs、jsonschema)
  2. Mock期望
  3. 自定义Mock脚本
  4. 项目全局mock脚本

优先级:Mock期望>自定义Mock脚本>项目全局mock脚本>普通Mock

自动化测试

  1. 通过跨域插件测试
  2. 通过接口获取token测试
  3. 手动设置相关session值测试
  4. 请求数据mock(接口返回、mock数据)
  5. 自定义规则测试
  6. 全局规则测试
  7. 高级请求配置(改请求参数、存cookie数据、改响应数据等高级操作)