個人 Mock Server - Meow Mock

時間 2019-11-15

標籤個人 mock server meow 简体版

原文原文鏈接

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

Meow Mock 源碼前端

價值

便於自測：建立虛擬對象代替具有不肯定性或不易構造的真實對象。node
避免等待：前端與服務端的開發進度每每不一樣步。前端可以使用 Mock Server 根據約定仿製假接口以不受服務端進度的約束。git
代替接口文檔：接口文件可按業務類型劃分，文檔內容可渲染於前臺方便查閱。github

特性

請求類型支持 GET、POST。其中 GET 請求返回列表數據 支持分頁，兩套參數可選：page + count、start_num + count，具體差異稍後闡述。npm
數據類型支持數值、布爾值、字符串、圖片、富文本、字典、列表。全部數據都可 動態生成，但仍支持定義爲固定值。瀏覽器

啓動方式

cd meow-mock
npm install
npm run start
複製代碼

默認端口號 8888，可在 /bin/www 文件中修改：bash

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

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

未安裝 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()
                    }
                }
            })
        }
    }
}
複製代碼