██████╗ ███╗   ███╗
██╔══██╗████╗ ████║
██║  ██║██╔████╔██║
██║  ██║██║╚██╔╝██║
██████╔╝██║ ╚═╝ ██║
╚═════╝ ╚═╝     ╚═╝

轻量级数据模拟

DataMock

它是什么

• 旨在帮助广大泛前端开发人员，解决数据模拟、数据对接等开发瓶颈，提高开发效率
• 一款基于 Express 的轻量级数据模拟服务
• 引入了业界优秀的数据模拟工具 Mockjs，如果你可以跳墙，也可以试试这个神器 Faker.js、chancejs

优势

• 轻量，随起随用
• 支持自定义模拟请求参数响应回调
• 支持绑定 web 前端框架 React、 Vue 等，实现模拟功能
• 降低不可抗力带来的开发失落感，如：断网、停电、服务器挂掉等诸如此类 😁
• 了解后端逻辑，成为优秀的全栈开发大牛奠定思维逻辑基础

下载

建议全局安装，随起随用

npm

npm install -g data-mock

yarn

yarn add global data-mock

如何用

目标服务目录

该目录下的所有 js 文件都会被监听以及读取载入挂在到路由上，具体写法可以参考这个 example

.开头的文件（如：.store.js）则会被载入到 node 中的 global.DM 对象上，主要是用来存储各个请求的默认数据，可以用来做更多好玩的东西，如：关联数据模拟等

目标服务目录的 js 格式，建议采用 es6

PS: 请提前检测下自己电脑安装的 node 支持何种程度的 es6，可以使用这个工具来检测 es-checker

数据格式：[请求方式 请求接口]: 响应函数

// 模拟数据格式
['GET /test']: function(req, res) {
  return res.json({
    name: Random.cname(),
    time: Random.date()
  });
}

现代前端框架 webpack 中使用

2.0 使用方法如下

const DataMock = require('data-mock');
const path = require('path')

// ...

// webpack 中webpack-dev-server 配置
devServer: {
    //  绑定mock server
    after: server => {
      
      	new DataMock(server，{
            target: path.resolve(__dirname, './src/mocks/'),
          
            // 监控目录（这里声明的目录有变动，则服务数据刷新，主要用来监控api变动）
            // 如果不需要则不写
            // 和上面target一样，必须通过 path.resolve 找到相对于项目的真实路径，否则可能出现监控不准确
            watchTarget: []
        })
 
    };
}

1.0使用方法

data-mock 暴露一个方法 bindServer，用来绑定 webpack-dev-server 暴露的 server 对象

const { bindServer } = require('data-mock');
const path = require('path')

// ...

// webpack 中webpack-dev-server 配置
devServer: {
    //  绑定mock server
    after: server => {
        bindServer({
            server,
            target: path.resolve(__dirname, './src/mocks/')

            // 监控目录（这里声明的目录有变动，则服务数据刷新，主要用来监控api变动）
            // 如果不需要则不写
            // 和上面target一样，必须通过 path.resolve 找到相对于项目的真实路径，否则可能出现监控不准确
            watchTarget: []
        });
    };
}

watchTarget 搭配 api-manage 使用效果更佳

命令

server

| CMD | 缩写 | 介绍 | | --------------- | ---- | ---------------------------- | | --target | -t | 指定目标服务目录 (相对位置) | | --watchTarget | -w | 监听目录 | | --open | -o | 打开浏览器 | | --port | -p | 指定端口 默认1024 |

# 当前目录为目标服务目录 并启动服务
dm server

# 指定mocks文件夹为目标服务目录 并启动服务
dm server -t ./mocks/

# 指定mocks文件夹为目标服务目录，并且监听api文件夹
dm server -t ./mocks/ -w ./api/

# 指定mocks文件夹为目标服务目录，并且监听api文件夹、指定端口为2000、打开浏览器
dm server -t ./mocks/ -w ./api/ -p 2000 -o

doc

| CMD | 缩写 | 介绍 | | ---------- | ---- | ------------- | | --target | -t | 指定api文件夹 | | --dist | -d | 监听目录，默认为api文件地址中生成的 DM-DOC |

# 指定当前运行目录为api目录
dm server

# 指定api文件夹为api目录
dm doc -t ./api/

# 指定api文件夹为api目录，并且输出值docs文件夹中
dm doc -t ./api/ -d /docs

License

MIT

🎉🎉🎉🎉 如果您觉的还可以，求点个 star 🎉🎉🎉🎉