个人 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()
                    }
                }
            })
        }
    }
}
复制代码