一覆积、什么是Mock
現(xiàn)在web開發(fā)基本都是前后端完全分離的狀態(tài)听皿，所以為了業(yè)務更好的并行開發(fā)，Mock在開發(fā)中就有很大的作用了宽档，和后端定義好借口后尉姨，就可以用 “模擬數(shù)據(jù)”開始開發(fā)了。
二吗冤、Mock的好處
好處有很多又厉，一句話概括，有了Mock椎瘟，前后端人員只需要定義好接口文檔就可以開始并行工作覆致，互不影響。
mock.png
三肺蔚、實現(xiàn)Mock
本地目錄結構
file.png
我們是如何在沒有真實接口的情況下進行開發(fā)的呢煌妈？
第一步： 本地構建一個web服務
本地安裝nodejs，配置package.json：
{
"name": "mock",
"scripts": {
"dev": "node server.js"
},
"dependencies": {},
"devDependencies": {
"express": "^4.14.1"
}
}
配置server.js：
// 這里使用了express, 執(zhí)行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);
});
// 監(jiān)聽端口
app.listen('3737', function () {
console.log('localhost:3737/index.html');
});
命令行執(zhí)行node serser.js 宣羊，瀏覽器打開localhost:3737/index.html璧诵，頁面就可以訪問了。
第二步： 配置Mock數(shù)據(jù)
修改server.js
var express = require('express');
var app = express();
// 指定html
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + req.path);
});
// 配置Mock數(shù)據(jù)
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));
});
});
// 監(jiān)聽端口
app.listen('3737', function () {
console.log('localhost:3737/index.html');
});
命令行重新執(zhí)行node serser.js 仇冯，我們發(fā)現(xiàn)頁面可以訪問'/home'這個接口了之宿；
第三步：優(yōu)化
一個項目中不可能只有一個接口，為了方便配置赞枕，在mock文件下加入了mock.js去做統(tǒng)一配置
/**
* @note setOnline 線上接口 配置
* @param name 本地接口名
* type 接口類型
* url 線上接口地址
*/
var fs = require('fs');
var setOnline = [
{
name: 'home',
type: 'post',
url: '/home'
}
// 第二個接口... 第三個接口
];
// 輸出配置項
exports.setOnline = setOnline;
// 遍歷輸出json數(shù)據(jù)
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數(shù)據(jù)
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服務澈缺，大功告成
四、總結
實現(xiàn)Mock數(shù)據(jù)的方式還有很多種炕婶，比如mockjs姐赡、easymock等等。
本地Mock的特點不依賴mockjs柠掂、easymock等项滑，實現(xiàn)起來方便快捷。
