@bwrong/mock
v0.0.14
Published
简单实用的前端数据mock方案
Downloads
27
Readme
MOCK
数据mock工具，可在express和webpack环境下使用。有如下功能：
- 自动更新：该工具会监听响应mock文件，当文件改动时自动更新mock数据。
- 延迟响应：可以设置延迟响应时间，应对调试loading的场景。
- 自定义header：可以全局设置header，也可以为某个mock接口设置header。
使用方法
- 安装
npm i -D @bwrong/mock- 使用 webpack:
devServer: {
before(app) {
const mockServer = require('@bwrong/mock');
mockServer(app, resolve('./mock/'), {
pattern: '**/[^_]*.js',
delay: 0,
prefix: '/api',
debug: true,
headers: {},
watchOptions: {}
});
}
}express:
const express = require('express');
const { resolve } = require('path');
const mockServer = require('@bwrong/mock');
const app = express();
mockServer(app, resolve(__dirname, './mock/'), {
pattern: '**/[^_]*.js',
delay: 0,
prefix: '/api',
debug: true,
headers: {},
watchOptions: {}
});
app.listen(3000);参数说明
mockServer(app, mockFolder,options):
app: express实例mockFolder: 设置mock的数据文件，该目录下面所有的非_开头的js文件都会被载入，并根据文件内容创建mock数据和对应路由。 文件格式如下：
const list = {
code: 0,
msg: '',
'data|10': [
{
id: '@id',
name: '@cname',
des: '@csentence',
web: '@url',
photo: '@image',
address: '@county(true)',
email: '@email',
lastIp: '@ip',
date: '@datetime(yyyy-MM-dd hh:mm:ss)'
}
]
};
const info = {
code: 0,
msg: '',
data: {
id: '@id',
name: '@cname',
department: 'xxx',
jibTitle: 'yyy',
org: 'zzzzz',
count: {
sum: '@integer(0,10000)',
score: '@float(0,5,0,2)',
today: '@integer(0,200)',
reservation: '@integer(0,200)'
}
}
};
module.exports = [
{
url: '/user',
response: list
},
{
url: '/user/html',
method: 'get',
headers: {
'Content-Type': 'text/html'
},
response: '<html><h1>html测试</h1><a href="https://www.bwrong.com">bwrong</a></html>'
},
{
url: '/user/info/:id',
response: (req,res) => {
return {
...info,
id: req.params.id
}
}
}
];注意：
- 需要导出一个数组，数组每一项会根据其内容创建对应的mock路由及返回数据。
url：mock的路由，最后生成的路由是options.prefix拼接上这里的url。method：请求方法，默认为get，为get时可以不设置。headers：当前mock路由的header，优先级比全局设置高，不需要可以不设置。response：返回的数据，支持object和function两种形式，function时接收两个参数（req,res），req中可以取到query、params、body等数据，返回值会作为最后接口的响应数据。支持mockjs语法。
- 一般情况建议使用mockjs语法生成数据，如果数据较多，可以将数据分离到一个单独的json文件中，在载入的文件中导入引用即可。
- 如果目录下有些文件中的内容不希望被注册为mock路由，可将文件名称改为
_开头，也可也以修改options.pattern文件匹配规则。
options: 配置pattern:'**/[^_]*.js': 文件匹配规则，被规则命中的文件才会载入，使用glob语法。delay:0: 接口响应延迟时间。prefix:'': 接口baseurl，会在所有接口url前面拼接上此路径。headers:{}: 全局header设置，默认设置如下，如下修改覆盖即可。
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'POST, GET, PATCH, OPTIONS, PUT, DELETE', 'Access-Control-Allow-Headers': 'Content-Type, X-Requested-With,' + (req.header('access-control-request-headers') || ''), 'Access-Control-Allow-Credentials': 'true',watchOptions:{}: 文件监听设置，请查看chokidar。debug: true: 是否开启debug模式，开启后当文件有变动，会在终端进行提示。