快速搭建本地mock伺服器

橙紅年代發表於2019-04-12
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

  • 支援對映本地檔案，比如樣式表、圖片等

相關文章