一、mockjs使用场景
前后端分离的开发模式当中，前台一般都会比较依赖后端的接口数据以及数据格式，常常会出现没有接口，前台很多工作都没法开展的情况，这时候前端如果能模拟一些假数据，并模拟真实请求，就能不用等待后端接口完成之后，就能把功能完善掉。下面给大家介绍下mockjs在项目当中的基本使用方法。（前提是前端和后端要把数据格式和字段规定好！）
二、mockjs在项目当中的初步测试
①安装依赖
// 安装mockjs
cnpm i mockjs --save-dev
// 安装axios http请求库
cnpm i axios --save
// 安装json5 可以再json中写注释，而且有自带api解析json格式的数据
cnpm i json5 --save-dev②首先附mockjs的官网：http://mockjs.com/examples.html （详细用法请到官网上自行尝试）
项目根目录下新建mock文件夹，其下在新建testMock.js文件，写入：
// 引入mockjs
const Mock = require('mockjs');
// 生成随机id
let id = Mock.mock('@id');
console.log(id);
// 生成随机用户信息
let obj = Mock.mock({ id: '@id', username: '@cname', data: '@date', avatar: '@image("200x200","red","#fff","avatar")', description: "@paragraph()", ip: '@ip', email: '@email' });
console.log(obj)
③在mock文件夹下执行:nodemon testMock.js，可以看到控制台打印的数据：(cnpm i nodemon -g)可以安装nodemon，可以看到如下生成了一个随机ID以及一条自动生成的用户信息。
avatar打开是一条真实的图片地址，分辨率是200*200，当然，mockjs远远不如返回死数据这么简单，还可以模拟后端增删改查等部分简单的业务，一定程度上来说有时候会用得到。
三、介绍json5
一般JSON文件不能有注释，且key value中的key必须带双引号，为了弥补这个缺陷，我们使用json5。
①mock文件夹下新建testJSON5.js和userinfo.json5和userinfo.json文件。
②userinfo.json文件中粘贴mockjs的一段json规则，则可以发现，文件报红。
3⃣️将上面这段json粘贴到userinfo.json5中，显示正常，默认不会高亮，需要安装json5的扩展，
4⃣️testJSON5.js中写入：
// 引入nodejs的fs模块 读写文件的
const fs = require('fs');
// 引入nodejs的path模块 操作路径的
const path = require('path');
// 引入JSON5
const JSON5 = require('json5');
// 读取userInfo.json5文件内容赋值给json 得一个json字符串
let json = fs.readFileSync(path.join(__dirname, './userInfo.json5'), 'utf-8');
// 再利用json5的parse方法将json字符串解析成真正的JSON
console.log(JSON5.parse(json));运行可得：将读取到的json打印了出来。
明天再说说在项目当中mockjs配合webpack-dev-server发挥它真正的作用！！！！！！
碎碎碎
来源：oschina
链接：https://my.oschina.net/u/4446873/blog/4313804