我的 Mock Server - Meow Mock

呆戀小喵_sunmy發表於2018-07-13

MockServer

業餘時間基於 Node.js 搭建了 Mock Server 一枚，自娛自樂的產物。功能較簡易，非常非常非常小白級，但可滿足絕大多需求。

Meow Mock 原始碼

價值

便於自測：建立虛擬物件代替具備不確定性或不易構造的真實物件。
避免等待：前端與服務端的開發進度往往不同步。前端可使用 Mock Server 根據約定仿製假介面以不受服務端進度的約束。
代替介面文件：介面檔案可按業務型別劃分，文件內容可渲染於前臺方便查閱。

特性

請求型別支援 GET、POST。其中 GET 請求返回列表資料 支援分頁，兩套引數可選：page + count、start_num + count，具體差別稍後闡述。
資料型別支援數值、布林值、字串、圖片、富文字、字典、列表。所有資料均可 動態生成，但仍支援定義為固定值。

啟動方式

cd meow-mock
npm install
npm run start
複製程式碼

預設埠號 8888，可在 /bin/www 檔案中修改：

var port = normalizePort(process.env.PORT || '8888');
複製程式碼

未安裝 Node.js 的請先移駕此處下載並安裝。

未安裝 Npm 的請先執行：

curl -L https://npmjs.com/install.sh | sh
複製程式碼

使用方法

在 /data 資料夾內建立 .js 介面檔案，例如 example.js。開啟 route.js 新增如下程式碼：

var example = require('./data/example');
var requestGatherLst = [
    example
];
複製程式碼

可理解為在該服務中註冊了剛剛建立的介面檔案。我們可以建立多個介面檔案 module1.js、module2.jd、module3.js...

假定 example.js 程式碼如下：

var type = require('../type');
module.exports = {
    example1: {
        url: '/example1/_data',
        type: 'GET',
        data: function () {
            return {}
        }
    },
    example2: {
        url: '/example2/_data',
        type: 'POST',
        data: function () {
            return {}
        }
    }
}
複製程式碼

顯然，需要定義每一介面的 url 及 type，返回資料的講究在於 data 回撥函式的返回值。

舉個板栗：

所有資料均可動態生成

example1: {
    url: '/example1/_data',
    type: 'GET',
    data: function () {
        return {
            message: '請求成功',
            error: 0,
            data: {
                id: type.id(), // 返回 id
                number: type.number({ // 返回數值
                    min: 288,
                    max: 999
                }),
                bool: type.bool(), // 返回布林值
                string1: type.string([ // 返回字串
                    '文案一',
                    '文案二',
                    '文案三'
                ]),
                string2: type.string({ // 返回字串
                    minL: 5,
                    maxL: 16
                }),
                image1: type.image([ // 返回圖片連結
                    'http://oij8a9ql4.bkt.clouddn.com/default-fe.jpg',
                    'http://osm0bpix4.bkt.clouddn.com/thumb.jpg'
                ]),
                image2: type.image({ // 返回圖片連結
                    type: '-thumb'
                }),
                list1: type.list({ // 返回列表
                    length: 5,
                    data: function () {
                        return type.number()
                    }
                }),
                list2: type.list({ // 返回列表
                    length: 22,
                    index: {
                        name: 'idx',
                        format: '0\d'
                    },
                    data: function () {
                        return {
                            pro1: type.number(),
                            pro2: type.string()
                        }
                    }
                })
            }
        }
    }
}
複製程式碼

id -> 返回 id，為避免重複使用時間戳。

此處有坑！假定一列表長度為 n，列表項含欄位 id。生成每一列表項的時間差非常非常非常小，那麼：

id 怎麼可以重複...想辦法去重嘍~

module.exports = {
    timestamps: {},
    id: function () {
        var _this = this;
        var curtime = (new Date()).valueOf();
        var recursion = function (key) {
            if (_this.timestamps[key]) {
                var tmp = recursion(key + 1);
            } else {
                _this.timestamps[key] = 1;
                return key;
            }
            return tmp;
        };
        return recursion(curtime);
    }
}
複製程式碼

number -> 返回數值，可使用 min、max 配置項規定其取值範圍，預設範圍 1 ~ 11。
bool -> 返回布林值。
string1 -> 返回字串，可從配置列表中隨機選取一值。
string2 -> 返回字串，可使用 minL、maxL 配置項規定其長度範圍，預設範圍 1 ~ 11。
image1 -> 返回圖片連結，可從配置列表中隨機選取一值。
image2 -> 返回圖片連結，可使用 type 配置項規定圖片尺寸，目前支援：640 * 307（-w）、320 * 320（-half）、120 * 120（-thumb），預設值為 -half。
list1 -> 返回列表，可使用 length 配置項規定其長度，預設長度為 0。
list2 -> 返回列表，可使用 length 配置項規定其長度，預設長度為 0。

開啟 http://localhost:8888/example1/_data 檢視返回資料如下：

由於資料是 動態生成 的，你所看到的結果可能與我的不同嗷~

但在重啟服務之前，同一 URL 下，重新整理瀏覽器是不會影響返回資料的，除非改變引數值或新增新的引數。

開啟 http://localhost:8888/example1/_data?a=1 體會下！

再開啟 http://localhost:8888/example1/_data?a=2 體會下！

List 型別特殊說明

列表項 index

渲染列表資料時，往往需要渲染其序號，例如排行榜：

index 配置項便是為上述需求而生：

index: {
    name: 'idx',
    format: '\d',
    type: 'int'
}
複製程式碼

index.name -> 規定命名，預設值為 index。
index.format -> 規定格式，目前支援：\d、0\d、00\d，預設值為 \d。
index.type -> 規定變數型別，目前支援：int、string，預設值取決於 index 格式。

關於 format

\d 格式：index 值為 1, 2, 3, 4, ...（預設變數型別 int）
0\d 格式：index 值為 01, 02, 03, ... 10, 11, ...（變數型別僅有 string）
00\d 格式：index 值為 001, 002, ... 010, 011, ... 099, 100, 101, ...（變數型別僅有 string）

具體效果形如：

注意 data 配置項寫法

推薦：

list: type.list({
    length: 5,
    data: function() {
        return type.number()
    }
})
複製程式碼

返回列表值不同：

不推薦：

list: type.list({
    length: 5,
    data: type.number()
})
複製程式碼

返回列表值相同：

多數情況我們不喜歡這樣的結果~

GET 請求列表資料分頁

首先說明列表資料請求介面物件寫法：

example2: {
    url: '/example2/_data',
    type: 'GET',
    list_name: 'items',
    data: function () {
        return {
            message: '請求成功',
            error: 0,
            items: type.list({
                length: 36,
                index: {
                    name: 'idx',
                    format: '0\d'
                },
                data: function () {
                    return {
                        id: type.id(),
                        number: type.number(),
                        string: type.string(),
                        image: type.image()
                    }
                }
            })
        }
    }
}
複製程式碼