data-mock-react
v0.0.8
Published
a library to mock data for demo purpose
Downloads
2
Readme
Data Mocker
背景
前端框架
- 页面渲染: react
- 脚手架: umijs
- 同步/异步请求: umi-request
业务需求
- 对组件的state的值进行替换
基于上述技术框架和业务需求,本项目支持基于mocker data来对state做全局替换
功能
- [x] Basic Processor: 对string、number、Array类型数据作出替换(未标明的字段保留,不做变动)
- [x] Patch Processor: 对数组对象,支持按照字段筛选,将符合条件的对象作出支持将其中部分对象作出替换
- [x] Custom Processor: 支持用户自定义Processor,来做对应的替换
- [x] 通过静态变量进行配置
- [x] 通过local storage进行配置,支持动态修改
- [x] Batch Processor: 对数组对象,批量的将某一字段替换成对应值
安装
yarn
yarn add data-mock-react
npm
npm install --save data-mock-react
使用
假设在model文件里,我们在某个reducer中对state作出了更改,样例如下 mode/global.js
export default {
namespace: 'global',
state: {},
reducers: {
save(state, { payload: data }) {
return Object.assign(state, data);
}
}
}
此时state值如下
{
"user": {
"code": "200",
"res": {
"data1": {
"list": [
1,
2,
3
]
},
"keyStr": "1111",
"keyInt": 1
}
},
"workshop": {
"code": "200",
"res": {
"shopInfo": [
{
"name": "车间1",
"status": "异常",
"val": 10
},
{
"name": "车间2",
"status": "异常",
"val": 22
},
{
"name": "车间3",
"status": "异常",
"val": 33
}
]
}
}
}
现在我们想做以下两件事:
- 将user这个state里的部分数值作出全量替换
- 将workshop这个state里的某个数组中的部门元素作出替换 即期待将state变成以下内容
{
"user": {
"code": "200",
"res": {
"keyStr": "222",
"data1": {
"list": [
3,
3,
3
]
},
"keyInt": 1
}
},
"workshop": {
"res": {
"shopInfo": [
{
"name": "车间1",
"fff": 1,
"status": "正常",
"val": 10
},
{
"val": 22,
"name": "车间2",
"ddd": 2,
"status": "正常"
},
{
"val": 33,
"name": "车间3",
"status": "异常"
}
]
},
"code": "200"
}
}
支持以下替换的processor:
- Basic Processor: 对string, number, Array等type的字段做全量替换
- Patch Processor: 对Array里的部分元素作出替换
- Batch Processor: 对Array里所有元素的特定字段进行替换
- Custom Processor: 自定义的processor
Basic Processor: 对string, number, Array等type的字段做全量替换
注意:
- 不支持将对象替换成数组, 0.0.8起
需求如下,对于global这个namespace而言,将user这个state里的部分元素作出替换,样例配置如下
{
"global": {
"user": {
"type": "replace",
"value": {
"res": {
"keyStr": "222",
"data1": {
"list": [
3,
3,
3
]
}
}
}
}
}
}
在这个例子中我们将对user这个state作出如下替换
res.keyStr
替换成字符串2222res.data1.list
替换成数组[3,3,3]
对应的结果如下 输入
{
"user": {
"code": "200",
"res": {
"data1": {
"list": [
1,
2,
3
]
},
"keyStr": "1111",
"keyInt": 1
}
}
}
输出
{
"user": {
"code": "200",
"res": {
"keyStr": "222",
"data1": {
"list": [
3,
3,
3
]
},
"keyInt": 1
}
}
}
对Array里的部分元素作出替换
需求如下,对于global这个namespace而言,将workshop这个state下的某shopInfo数组里的部分元素作出替换,样例如下
{
"global": {
"workshop": {
"type": "patch",
"selectPath": "res.shopInfo",
"value": {
"res": {
"shopInfo": [
{
"fff": 1,
"status": "正常",
"name": "车间1"
},
{
"name": "车间2",
"ddd": 2,
"status": "正常"
}
]
}
},
"matchKey": "name"
}
}
}
在这个例子中,我们坐了如下的事情
- 按照
res.shopInfo
来定位要修改的数组的位置 - 按照
name
字段来对数组元素作出匹配,并修改其他值 - 将name为
车间1
的对象的status字段修改为字符串正常,fff字段修改为1 - 将name为
车间2
的对象的status字段修改为字符串正常,ddd字段修改为2 输入
{
"workshop": {
"code": "200",
"res": {
"shopInfo": [
{
"val": 10,
"name": "车间1",
"status": "异常"
},
{
"status": "异常",
"name": "车间2",
"val": 22
},
{
"name": "车间3",
"status": "异常",
"val": 33
}
]
}
}
}
输出
{
"workshop": {
"code": "200",
"res": {
"shopInfo": [
{
"fff": 1,
"val": 10,
"name": "车间1",
"status": "正常"
},
{
"status": "正常",
"name": "车间2",
"val": 22,
"ddd": 2
},
{
"name": "车间3",
"status": "异常",
"val": 33
}
]
}
}
}
对Array里所有元素的特定字段进行替换
需求如下,对于global这个namespace而言,将dashboard这个state下的data数组里所有元素的score字段替换成99,样例如下
{
"global": {
"workshop": {
"type": "batch",
"selectPath": "res.data",
"selectKey": "score",
"value": 99
}
}
}
在这个例子中,我们坐了如下的事情
- 按照
res.data
来定位要修改的数组的位置 - 按照
score
字段来确定要修改的数组对象的字段 - 将所有数组元素的score字段修改成99 输入
{
"workshop": {
"code": "200",
"res": {
"data": [
{
"score": 88,
"label": "大屏1"
},
{
"score": 80,
"label": "大屏2"
},
{
"score": 87,
"label": "大屏3"
}
]
}
}
}
输出
{
"workshop": {
"code": "200",
"res": {
"data": [
{
"score": 99,
"label": "大屏1"
},
{
"score": 99,
"label": "大屏2"
},
{
"score": 99,
"label": "大屏3"
}
]
}
}
}
使用自定义的Processor
除了上述三个内置的Processor,本项目还支持自定的Processor,详细介绍如下 将每一个替换的工作定义为MockJOb
对象
export interface MockJob {
selectPath: string; // 用于选择object中特定的字段
selectKey: string; // 在数组替换中,用于指定数组里元素的值
matchKey: string; // 在数组patch中,用于匹配数组元素
type: string; // job类型,用于读取相关的processor
value: Array<object> | object; // 替换的值
[key: string]: any; // 自定义processor,用于自定义的字段
}
用户可以参考下述代码来使用Custom Processor
import { DataMocker } from 'data-mock-react';
let dm = new DataMocker();
console.log('查询支持的Job列表', dm.getSupportJobType());
const customProcessor = (obj, mockJob) => {
const { value } = mockJob;
return obj['custom'] = value;
};
dm.registerProcessor('customProcessor', customProcessor);
const config = {
global: {
user: {
type: 'customProcessor',
value: 666
}
}
};
const data = {};
const val = dm.mockData(data, 'global', config);
console.log(val);
上述代码定义了一个名为customProcessor
的处理器,作用是将配置里的val字段添加/覆盖原数据的custom字段
使用local storage
使用JSON.strinify
将配置Json序列化成字符串,放到将配置存放在local storage里的codeMap
值,然后直接调用即可
import { DataMocker } from 'data-mock-react';
export default {
namespace: 'global',
state: {},
reducers: {
save(state, { payload: data }) {
let dm = new DataMocker();
let val = dm.mockData(data, 'global');
return Object.assign(state, md);
}
}
}
使用静态变量
在代码里将配置项写成静态变量,然后直接调用即可
import { DataMocker } from 'data-mock-react';
const mockConfig = {
global: {
user: {
type: 'replace',
value: {
res: {
data1: {
list: [3, 3, 3],
},
keyStr: '222',
},
},
},
workshop: {
type: 'patch',
selectPath: 'res.shopInfo',
matchKey: 'name',
value: {
res: {
shopInfo: [
{
name: '车间1',
fff: 1,
status: '正常',
},
{
name: '车间2',
ddd: 2,
status: '正常',
},
],
},
},
},
},
};
export default {
namespace: 'global',
state: {},
reducers: {
save(state, { payload: data }) {
let dm = new DataMocker();
let val = dm.mockData(data, 'global', mockConfig);
return Object.assign(state, val);
}
}
}
配置项相关
DataMocker类提供以下方法
import { DataMocker } from 'data-mock-react';
export default {
namespace: 'global',
state: {},
reducers: {
save(state, { payload: data }) {
let dm = new DataMocker();
console.log(dm.getSupportJobType()) // 获得当前支持的替换类型
console.log(dm.getConfig()) // 获得当前mocker的配置
console.log(dm.setConfig({}))// 设置当前mocker的配置
console.log(dm.reset()) // 重置mocker
let val = dm.mockData(data, 'global');
return Object.assign(state, md);
}
}
}