一、什么是Mock
现在web开发基本都是前后端完全分离的状态，所以为了业务更好的并行开发，Mock在开发中就有很大的作用了，和后端定义好借口后，就可以用 “模拟数据”开始开发了。
二、Mock的好处
好处有很多，一句话概括，有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响。
mock.png
三、实现Mock
本地目录结构
file.png
我们是如何在没有真实接口的情况下进行开发的呢？
第一步： 本地构建一个web服务
本地安装nodejs，配置package.json：
{
"name": "mock",
"scripts": {
"dev": "node server.js"
},
"dependencies": {},
"devDependencies": {
"express": "^4.14.1"
}
}
配置server.js：
// 这里使用了express, 执行npm i express 或者 cnpm i express安装依赖
var express = require('express');
var app = express();
// 指定html
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
});
// 监听端口
app.listen('3737', function () {
console.log('localhost:3737/index.html');
});
命令行执行node serser.js ，浏览器打开localhost:3737/index.html，页面就可以访问了。
第二步： 配置Mock数据
修改server.js
var express = require('express');
var app = express();
// 指定html
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
});
// 配置Mock数据
var fs = require('fs');
app.post('/home', function(req, res) {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
fs.readFile('./mock/home.json', function(err, data) {
if (err) throw err;
res.json(JSON.parse(data));
});
});
// 监听端口
app.listen('3737', function () {
console.log('localhost:3737/index.html');
});
命令行重新执行node serser.js ，我们发现页面可以访问'/home'这个接口了；
第三步：优化
一个项目中不可能只有一个接口，为了方便配置，在mock文件下加入了mock.js去做统一配置
/**
* @note setOnline 线上接口 配置
* @param name 本地接口名
* type 接口类型
* url 线上接口地址
*/
var fs = require('fs');
var setOnline = [
{
name: 'home',
type: 'post',
url: '/home'
}
// 第二个接口... 第三个接口
];
// 输出配置项
exports.setOnline = setOnline;
// 遍历输出json数据
for (var i = 0, len = setOnline.length; i < len; i++) {
(function() {
var name = setOnline[i].name;
exports[name] = function(req, res) {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
fs.readFile('./mock/' + name + '.json', function(err, data) {
if (err) throw err;
res.json(JSON.parse(data));
});
};
})(i);
}
修改server.js
var express = require('express');
var app = express();
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
});
// Mock数据
var mock = require('./mock/mock.js');
var setOnline = mock.setOnline;
setOnline.forEach(function(m) {
app[m.type](m.url, mock[m.name]);
});
app.listen('3737', function () {
console.log('localhost:3737/index.html');
});
重启web服务，大功告成
四、总结
实现Mock数据的方式还有很多种，比如mockjs、easymock等等。
本地Mock的特点不依赖mockjs、easymock等，实现起来方便快捷。
