快速搭建本地mock服務器

mock-server是一個爲開發環境快速搭建數據服務器的腳本工具，啓動服務器僅只須要一個mockjs格式的模板文件便可。

腳本將啓動本地服務器，而後匹配mock模板內的url返回對應的數據

使用

# 全局安裝
npm i @shymean/mock-server -g
# 快速啓動mock服務器
mock -p 9999 -f ./_mock.js
複製代碼

參數說明

• port，服務器端口號，默認7654，簡寫 -p
• file，mock模板文件路徑，默認./_mock.js，簡寫 -f

mockjs模板語法

使用該工具只須要準備一個mock模板文件，其語法參考

• 內部使用@shymean/koa-mock`，這是一個快速搭建koa的mock服務器的中間件
• mock模板使用mockjs語法，並擴展了相關的功能

// _mock.js
// 對應的rurl會被中間件攔截，並返回mock數據
// ANY localhost:9999/
Mock.mock('/', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 能夠mock指定的請求方法
// POST localhost:9999/test
Mock.mock('/test', 'POST', {
    data: [],
    msg: "hello mock",
    "code|1-4": 1,
})

// 擴展rtype，支持jsonp形式，使用param傳入對應的回調名
// GET JSONP localhost:9999/test
Mock.mock('/test', {
    type: 'jsonp',
    param: 'callbackName'
},{
    code: 0,
    msg: 'hello from mock jsonp',
    data: {
        "id|1000-9999": 1,
    }
})

// 默認回調名稱 callback
Mock.mock("/test2", "jsonp", {
    code: 0,
    msg: "hello from mock jsonp2",
    data: {
        "id|1000-9999": 1,
    }
});
複製代碼

自定義請求頭匹配

有時候某個相同的url請求，根據業務參數須要返回不一樣的模擬數據，所以提供了自定義匹配請求url的功能，須要在模板文件中實現Mock.parseUrl方法便可，該方法返回一個用於匹配的rurl

Mock.parseUrl = function(ctx){
    // ctx爲koa上下文對象
    return 'someUrl'
}

Mock.mock('someUrl', {code: 0})
複製代碼

nginx配置

爲了不在業務代碼中使用localhost域名，最佳實踐方案是開發時將業務域名（如xxx.test.com）指向本地

127.0.0.1 xxx.test.com
複製代碼

而後經過nginx配置反向代理到mock服務器

server {
    listen 80;
    server_name xxx.test.com;

    # 根據location判斷須要使用mock數據的接口
    location /j/cn/control/api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:9999; # mock -p 9999 指令啓動的服務器的端口號
    }
}
複製代碼

Feature

• 與mockjs瀏覽器端共用同一套mock模板，方便遷移和代碼維護
• 支持jsonp請求
• 數據模板熱更新，修改模板文件後，將自動重啓服務器

Todo

• 支持映射本地文件，好比樣式表、圖片等