Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据
mock.js 的文档 http://mockjs.com/0.1/
使用步骤:
第一步: 参考文档上的示例, 直接 npm install mockjs 安装
第二步: 要学会看文档! 很多人都会犯一个毛病,集成完之后,完档都不看,然后就去使用,或者说各种百度XXX.使用教程........其实文档才是最好的教程好不,只是说遇到了某些文档描述不详细的点,然后一头雾水了,这时候你再去百度.
所以.可以把文档大致给过滤一遍,知道都是干啥的,起码有个印象.
第三步: 使用: 首先你要明确要你的哪个页面需要模拟数据. 然后,你是想模拟成 ajax 请求的方式,还是模拟其他方式? 我这里是模拟ajax 请求的方式来处理的.
1. 首先. 配置在全局配置文件夹中 配置mock. 比如 const mock = require('./mock.js'); 你可以把它当成一个serve来处理:
server: { middleware: mock.data();} 注:(我这里是用的gulp构建的项目)
2.既然第一步导入了,那么我看来看看mock.js 这个文件夹里面的内容是什么鬼
const room = require('./app/mock/room.js'); //拿到room页面模拟创建的数据
const admin = require('./app/mock/admin.js'); //拿到admin页面模拟创建的数据
exports.data = function(){ return [...room, ...admin] }; // data方法中的代码是 把这些数据整合到一个数组当中
mock.js 这个文件夹 我把它当成了全局的mock配置文件夹. 因为很多页面都需要模拟数据,那么一个页面我就可以绑定一个自定义的 mock.js文件夹去模拟常见数据(例如room admin 这两个就是room页面 和admin页面模拟数据的文件夹 ).
第四步:看看我们每个模拟数据的页面时如何模拟数据的
const Mock = require('mockjs');
const url = require('url'); 这样个是必须要导入的, 参考文档. 别问为什么! 规定!
然后就开始创建自定义数据, 看不懂的话 那是你没看文档定义的格式规范
let area = Mock.mock({ 'data|5':[{'id|+1': 1 , name: '区域@cword("一二三四五六七八九", 1)', nums: 0 }]});
代码本来很长,怕写太长太乱.就简单写了几条数据
然后 参考文档, 如模仿类似ajax请求,返回模拟的数据 (因为一个页面有很多模块,所以我们分模块把模拟额数据撞到数组里)
module.exports = [ {头部模块}, {尾部模块}, { //中间区域模块
route:'/rooms', //路由
handle:function (req,res,next) { //请求头
res.writeHead(200,{
"Content-type":"application/json;charset=UTF-8"
});
res.write(JSON.stringify({ //可以输出 你模仿的数据
success: true, code: 1, area: area.data, //area.data 就是上面所模仿的数据
})); res.end(); } } ];
//你可以把它理解成 数组里装了三个路由.
//第五步.使用 (就想正常的ajax一样)
fetch.prototype.get = function(url,callBack) {$.get(this.server+url,function(data){ callBack(data);})} //封装的get请求
//输入路径,在回调函数中返回数据
fetchs.get('/dragTree',function(res) {
// console.log(res.success);
// console.log(res.data);
return res.data;
});
收尾: 我只是详细给你展示整个流程是什么样的. 里面的代码你可能看不懂, 但是你可以感受写整个使用过程. 只要慢慢学会了看文档,其实你会发现 集成任何第三方的东西,原理都是一样的. 无非就是install , 配置导入, 熟悉文档语法 , 使用.