一、什么是Mock

Mock在軟件開發領域，我們將其理解成 “模擬數據”、“虛假數據”。

二、Mock的好處

好處有很多，一句話概括，有了Mock，前后端人員只需要定義好接口文檔就可以開始并行工作，互不影響。

三、實現Mock

本地目錄結構

我們是如何在沒有真實接口的情況下進行開發的呢？

第一步： 本地構建一個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、rap2等等。

本地Mock的特點不依賴mockjs、easymock等，實現起來方便快捷。

轉載于:https://juejin.im/post/5bdbe92f6fb9a049bb7bc18f

總結

以上是生活随笔為你收集整理的非常便捷的本地Mock的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。