个人 Mock Server - Meow Mock

时间 2019-12-10

标签个人 mock server meow 繁體版

原文原文链接

业余时间基于 Node.js 搭建了 Mock Server 一枚，自娱自乐的产物。功能较简易，很是很是很是小白级，但可知足绝大多需求。html

Meow Mock 源码前端

价值

便于自测：建立虚拟对象代替具有不肯定性或不易构造的真实对象。
避免等待：前端与服务端的开发进度每每不一样步。前端可以使用 Mock Server 根据约定仿制假接口以不受服务端进度的约束。
代替接口文档：接口文件可按业务类型划分，文档内容可渲染于前台方便查阅。

特性

请求类型支持 GET、POST。其中 GET 请求返回列表数据 支持分页 ，两套参数可选：page + count、start_num + count，具体差异稍后阐述。
数据类型支持数值、布尔值、字符串、图片、富文本、字典、列表。全部数据都可 动态生成 ，但仍支持定义为固定值。

启动方式

cd meow-mock
npm install
npm run start

默认端口号 8888，可在 /bin/www 文件中修改：node

var port = normalizePort(process.env.PORT || '8888');

未安装 Node.js 的请先移驾此处下载并安装。git

未安装 Npm 的请先执行：github

curl -L https://npmjs.com/install.sh | sh

使用方法

在 /data 文件夹内建立 .js 接口文件，例如 example.js。打开 route.js 添加以下代码：npm

var example = require('./data/example');
var requestGatherLst = [
    example
];

可理解为在该服务中注册了刚刚建立的接口文件。咱们能够建立多个接口文件 module1.js、module2.jd、module3.js... 浏览器

假定 example.js 代码以下：bash

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 回调函数的返回值。curl

举个板栗：函数

全部数据都可动态生成

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/example... 查看返回数据以下：

因为数据是 动态生成 的，你所看到的结果可能与个人不一样嗷~

但在重启服务以前，同一 URL 下，刷新浏览器是不会影响返回数据的，除非改变参数值或添加新的参数。

打开 http://localhost:8888/example... 体会下！

再打开 http://localhost:8888/example... 体会下！

List 类型特殊说明

列表项 index

渲染列表数据时，每每须要渲染其序号，例如排行榜：

index 配置项即是为上述需求而生：

index: {
    name: 'idx',
    format: '\d',
    type: 'int'
}

index.name -> 规定命名，默认值为 index。
index.format -> 规定格式，目前支持：d、0d、00d，默认值为 d。
index.type -> 规定变量类型，目前支持：int、string，默认值取决于 index 格式。

关于 format

d 格式：index 值为 1, 2, 3, 4, ...（默认变量类型 int）
0d 格式：index 值为 01, 02, 03, ... 10, 11, ...（变量类型仅有 string）
00d 格式：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()
                    }
                }
            })
        }
    }
}

list_name 配置项决定了返回数据中究竟哪一个字段是待分段的 list，其默认值为 data。

两套分页参数

page + count

假如数据总长 36，每一分页数据长度 count=10，那么：

page=1 时，返回第 1 ~ 10 条数据；

page=2 时，返回第 11 ~ 20 条数据；

page=3 时，返回第 21 ~ 30 条数据；

page=4 时，返回第 31 ~ 36 条数据；

page > 4 时，返回空列表。

打开 http://localhost:8888/example... 体会下！

start_num + count

截取列表中第 start_num + 1 至 start_num + count 条数据。假如 ?start_num=6&count=5，那么返回第 7 ~ 11 条数据。

打开 http://localhost:8888/example... 体会下！

备注：

无分页参数时默认返回全部数据。
无 count 参数时默认返回 10 条数据。

做者：呆恋小喵

个人后花园：https://sunmengyuan.github.io...

个人 github：https://github.com/sunmengyuan

原文连接：https://sunmengyuan.github.io...