前端开发中mock数据的几种办法

发表于 | 分类于 | 阅读次数
主要讲的是在后台接口还没有搭建完成，或者说根本还没有api的时候，或者说有api但是没数据的时候，前端怎么模拟数据，我这里只给一个小的demo，真正要构建一套还是要根据业务来

概述

在项目开发中，有很多时候是在后台接口还没开发好，有的是 api 接口都没写，有的是有 api 接口但是没有数据，不管是那种，都是在大家都对数据格式，接口的方式都是有统一了的，才能做 mock 数据，不然的话数据格式变化，接口内容变化，基本上前端 mock 不 mocK 数据基本上没什么用，还是等于对接两遍。

  • 我自己的建议，当有接口 api 的时候，但是没有真实数据的时候，我推荐用mock.js来解决问题，不需要自己再用 express，或者别的框架自己发布本地接口，直接在 ajax 返回数据的时候改变 response 的 data 数据
  • 另一种就是完全都没有后台接口的时候，要自己本地跑起来接口或者别的地方要有接口 api 才可以 mock 数据，建议使用easy-mock

mock.js

  • 首先：
    可以在自己项目中的 package.json 中添加 mock.js 和版本号"mockjs": "^1.0.1-beta3"可以通过在 github 中看他的 tag 号，使用他最稳定的版本，通过npm installorcnpm installoryarn都是可以的，这个完全看自己的网络了。
  • 然后：
    在自己的api同级创建一个mock 文件夹在里面再创建一个叫做，mock.js 的文件。我只是简单的做一个 demo,具体的 mock 怎么构思和构建要看自己的业务，可以见一个总开关来控制是否 mock 数据，和子开关来控制是否 mock 子接口，如process.env.NODE_ENV 或者别的全局来判断是否开启 mock 数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Mock from 'mockjs';
let Random = Mock.Random; // 这个只是 其中的一种形式 还有其他两种
const oMsgData = Mock.mock({
    'list|10': [{
    name: '@cname',
    id: '@increment',
    content: '@csentence',
    createTime: '@date',
    isRead: Number(Random.boolean()),
    isTop: Number(Random.boolean()),
    state: Number(Random.boolean()),
    type: '@increment'
    }]
});
// console.log(JSON.stringify(oMsgData, null, 4));
// console.log(oMsgData);
/**
 * @param {String} rurl 要替换的接口路径名
 * @param {String} rtype 要替换的接口请求方式
 * @param {Object} data 要替换的接口的response的data
/
// 他会自动帮你填写 域名和端口号 rurl rtype response.data
Mock.mock('/api/notice/noticeListAdmin', 'post', {oMsgData});

具体的参数我这个就不讲了，首先引入Mock.js,然后可以通过'@cname'生成随机的名字，也可以通过Mock.Random.cname()生成随机名字。
[参考] http://mockjs.com/ 这个是 mock.js 的官方文档，里面有 mock 的具体用法.

easy-mock

这种是在线方式的，完全可以在他这个里面创建一套符合自己的 api 接口，具体当可以看下面的连接，这个我感觉没什么好讲的了，因为感觉自己归纳的也没有人家文档好，反正是挺好的。
[easy-mock] https://easy-mock.com/docs