Awesome Open Source
Awesome Open Source

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

轻量级数据模拟

DataMock

download npm GitHub license

它是什么

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

优势

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

下载

建议全局安装,随起随用

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 🎉🎉🎉🎉


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Js (1,160,036
Typescript (307,783
Reactjs (175,624
Vue (73,249
Mock (8,128
Mockjs (89
Webapck (4
Data Mock (4