非常便捷的本地Mock

Eddiezsl發表於2018-11-06
Mock

一、什麼是Mock

Mock在軟體開發領域，我們將其理解成 “模擬資料”、“虛假資料”。

二、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等，實現起來方便快捷。

相關文章