項目中使用的是RESTFUL接口規範，項目框架用的是vue，項目開始時，調研了幾個比較有名的mock數據的插件：比如webpack的中間件api-mock，json-server，mockjs，還有express。結合我們項目的情況，逐一嘗試，最後選擇了express。mock方式很簡單，以下為使用方式：

1. 安裝node/express

2. package.json 中：

npm run mock 為單獨開啟node的mock服務；

由於項目中同時需要編譯本地代碼，於是寫了一個shell腳本文件，同時開啟本地代碼編譯及mock服務；

以下為shell腳本中內容：

 #!/bin/bash

 npm run mock 
 
&
 npm run dev &

終止程序必須全局終止node進程，需要全局命令：taskkill /f /t /im node.exe

3. 創建 mock 文件夾，準備server代碼編寫，此處命名為 mock.js：

以下為 mock.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(‘3000‘, function () {
  console.log(‘mock app listening at http://localhost:3000‘);
});
 

優化：

一個項目中不可能只有一個接口，為了方便配置，在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);
}

修改後的 mock.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‘);
});

4. 完成後，啟動服務 npm run mock 即可

前端使用express mock數據