一条命令解决接口Mock

背景

在前端或客户端开发中，经常需要依赖后端同学开发的API。为了能够前后端并行开发，前端通常会采用Mock数据的方法，通过模拟api假数据进行页面渲染。等到后端API开发完毕再接入真实API进行调试。

API数据Mock的方法有很多，常用的有以下几种：

前端打包工具安装Mock插件

比如Grunt, Gulp, Webpack等等都有相应的mock插件，开发者需要根据不同的项目类型来做配置。其原理是启动一个本地服务器实现接口请求。由于是模拟网络请求，所以有时还需要根据需求对一些打包脚本进行修改。该方法的缺点是针对不同的工具需要有不同的方案，有一定的安装和适配成本，并且只针对使用打包工具的项目。

外部Mock服务平台

业界有一些Mock的解决方案，提供一个第三方平台，开发者在平台上配置api接口，然后直接调用平台接口进行调试。比较出名的如 easy-mock。

这种方法的优点是无任何插件依赖，所有项目都可以直接访问使用，无需安装，所以对客户端也是通用的。但是带来另外一个问题是数据的泄露，一些隐私度比较高的项目可能会觉得把模拟数据放到其他平台上也是不安全的。当然easy-mock也考虑到这个问题，开源并支持用户直接部署项目到公司内网。但这个需要主机，数据库等资源的支持，落实难度较大。

写死数据

第三种是比较直接的，就是在前端写死数据，接口不发出请求而是直接返回。这种方法对于一些小的活动项目也许是不错的选择。但是构造的数据模式有限，也无法模拟真实的网络环境

在以前的开发中使用的基本是这三类方法，但是这些方法都有上述提到的明显的局限性。

另一种方式

为了避免以上方案中的缺点，本文介绍另外一种mock的思路

对于Mock数据，我们希望它在项目中的存在只是一个文件夹，里面定义了每个接口的返回数据。开发者不需要配置项目插件，每个项目都可以简单的通过一个命令启动mock服务，并监听这个目录。这个Mock服务需要具备以下功能：

模拟接口请求，灵活配置返回数据
在开发人员间共享模拟数据，而不是只存在本地，也不是放在外网
不要繁琐的安装配置，最好一个命令开启即用
对于所有类型的前端项目都是通用的
提供一些复杂需求的拓展功能

基于以上思路开发了一个工具 l-mock

实现数据mock只需三步：

全局安装
```
npm i l-mock -g
```
初始化mock目录, init命令在project根目录下生成mock目录，并放置demo接口
```
cd path/to/project
lmock init
```
运行, 进入生成的mock目录，运行start命令，直接访问localhost:3000/a 则可看到/a接口返回
```
cd mock
lmock start
```

第一次初始化后，后面的开发只需要在mock目录中运行lmock start就可以开启接口模拟。

对于有package.json的前端项目，可以直接配置在npm命令中，往后就运行 npm run mock

"scripts": {
  "mock": "cd mock && lmock start",
}

怎么来编写一个模拟接口呢？举一个例子: path/t0/project/mock/a.js 模拟了一个get请求

module.exports = {
  url: '/a',
  method: 'get',
  result: {
    'status|1': ["no_login", "OK", "error", "not_registered", "account_reviewing"],
    'msg': '@csentence()',
    'data': {
      a: 2
    }
  }
}

以上js返回的json内容如下

roadmap.path

params	description
url	配置API地址, 支持正则匹配模式
method	配置请求方法，支持RESTFUL
result	定义返回内容

result 可以直接返回json内容，通过Mockjs,可以生成动态的数据内容，比如上面的@csnetence()会随机生成一个段落的文字

Mockjs的语法很多，可以参考其文档。

该工具还有一些拓展功能，需要用到复杂接口逻辑的，可以在result返回方法中配置。

详细的使用方法可以参考工具文档 l-mock

如果你的项目中正好需要用到数据Mock，不妨试一试。

fwon / blog