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，有互動才有更新的動力。