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