使用nodejs搭建api的mock服务

  1. 介绍     

　　公司的业务开发都是静态页面，开发前期老是避免不了获取api的问题。在vue中有一些mockjs的方案，方案都是注入性质的，和最终部署老是有差异，并且业务大部分还在zepto下，很难找到合适的方案。而开发前期调整css样式须要真实的dom，不能老是写个静态页面来调试。正好利用koa2的便利性，搭建一个mock服务。

       在线的mock服务其实仍是很多的，大部分都是以 url路径做区分API的名字，对于普通的API是够用了，但对于根据输入参数做为API名称的状况，就没有办法了。好比咱们公司的API: 

@url
/api

@params
{
   func: "myapi",
   params: '{"name": "3333"}'
}

 

       这种奇特的API根本就无法用普通的mock实现好么。。。

       因此本身开发了一套mock服务，github地址：https://github.com/wenlonghuo/xmocker-cli 。 也能够经过npm进行安装： npm i -g xmocker-cli。预览界面地址：http://xmocker.wlhot.top/#/about

　　设计的目标为：

　　　　1. 本地随意修改，不影响其余人

　　　　2. 能开个代理，当本地数据不足，把API请求转发到其余服务器上

　　　　3. 安装要方便，界面化操做。

 2 实现

      框架使用koa2进行开发，使用babel转换代码便于支持nodejs 6 的版本。本地化数据库，只要一个npm安装就直接使用。

      总体结构为：

             项目 -> API基础信息 -> API分支

      添加项目、API后，可在界面上操做进行启动，重启等，同时还提供命令式启动文件服务器。

 2.1 结构

　　项目：名称，路径，端口，代理

　　API基础信息： 名称，方法，URL，二级路径，二级路径对应值

　　API分支：名称，判断条件，数据

 

 2.2 实现不一样API的区分

　　将koa的middleware注册到全部的router上，使用koa-bodyparse获取post相关数据，整合全部的输入参数：

　　

Object.assign({}, ctx.params, ctx.query || {}, ctx.request.body)

       而后遍历api基础信息列表，判断指定的键值是否和预约的值相等，得到请求所属的API

 

 2.3 对API进行二级区分

　　要实现更加灵活的数据返回，只能添加自定义的函数了。在API配置中添加判断条件，经过 new Function形式生成函数，根据返回值判断，若是不为真，则检测下一分支，不然认定当前分支是目标值，取得mock数据，请求返回

 

 2.4 代理的实现

　　实现代理使用http-proxy模块。为方便使用，须要两种形式的代理： 指定api路径代理至服务器和未找到api时代理至服务器。前者很简单，使用koa-router直接注册添加中间件就好，后者须要利用koa的洋葱圈模型，在请求结束后判断http status为404，再代理至指定服务器

 

 2.5 开启文件服务器

　　光有API服务不行，毕竟我开发的是静态页面，总归要个文件服务，便于边写边调。使用koa-send模块实现文件服务，利用npm link或者npm install会在全局注册命令，方便的开启文件服务。

 

 2.6 界面服务

　　利用框架快速开发，使用iview框架，vue-cli生成脚手架，build生成dist文件，使用文件服务，监听6001端口，浏览器访问就能够控制服务了。

      预览界面参见：http://xmocker.wlhot.top/#/about

 

3 使用

　　利用npm link就能注册全局命令，简单的mocker start就能启动服务啦。固然，后续又加了一些实用的功能，稳定性之类的还有待优化，至少在开发速度上的提高仍是比较大的。鉴于公司还不写测试用例，写完页面就算结束，这套API服务已经成为咱们公司前端开发必用工具，至少mac和windows都能正常运行，也算没白花时间写了（反正只是练手）。欢迎使用这套工具，有什么问题能够在github上提issue，有互动才有更新的动力。