簡介

剛開始接觸vue-cli，發現用它生成的框架程式碼是缺少Mock模擬的，於是自己摸索了許久，將自己的摸索的結果通過過程記錄下來，希望對別人有所幫助，能少走彎路。

這不是關於vue-cli的，是單純的模擬資料服務 這不是關於vue-cli的，是單純的模擬資料服務 這不是關於vue-cli的，是單純的模擬資料服務

同時希望獲得更好的解決方案，有更好方案的不要吝嗇分享啊。

實現目標

• 1.ajax資料模擬，靈活的介面配置
• 2.熱更新（不用手動重啟mock的服務，自動重啟不知道算不算O(∩_∩)O哈哈~）

搭建

過程變化

• 1.簡單mock服務
• 2.可配置的mock服務
• 3.熱更新的可配置的mock服務

簡單mock服務

目錄結構

project

• node_modules
• mockServer.js
• package.json

程式碼

用到的node_modules

• express
• mockjs

程式碼如下mockServer.js

const express = require('express'); //引入express模組
const Mock = require('mockjs'); //引入mock模組
const app = express(); //例項化express

// 路由api對應的模擬資料
app.all('/api', function (req, res) {
// mockjs中屬性名‘|’符號後面的屬性為隨機屬性，陣列物件後面的隨機屬性為隨機陣列數量，正規表示式表示隨機規則，+1代表自增

  res.json(Mock.mock({
    "status": 200,
    "data|1-9": [{
      "name|5-8": /[a-zA-Z]/,
      "id|+1": 1,
      "value|0-500": 20
    }]
  }));
});

// 監聽8090埠
app.listen('8090');
複製程式碼

執行結果

---

可配置的mock服務

最簡單的mock服務實現了，但是想想加入後期介面數量增加，那程式碼函式豈不是函式式增長!!!∑(ﾟДﾟノ)ノ。還能不能愉快的維護了。

所以改良版就來了，這裡我通過多個json檔案來模擬多個請求的資料，通過一個配置檔案來對映檔案和介面

用到的模組

• express
• mockjs
• path
• fs

目錄結構

程式碼

mockServer.js

const express = require('express'); //引入express模組
const Mock = require('mockjs'); //引入mock模組
const app = express(); //例項化express
const path = require("path"); //引入path模組 核心模組不許要npm
const fs = require('fs'); // 引入fs模組 核心模組不許要npm

// 讀取配置檔案 將路由和檔案對應上
fs.readFile(__dirname + '/test/conf.json', 'utf-8', function (err, data) {
  if (err) {
    console.log(err);
  } else {
    let dataObject = JSON.parse(data);
    for (let key in dataObject) {
      app.all(dataObject[key].url, function (req, res) {
        fs.readFile(path.join(__dirname + '/test', dataObject[key].path), 'utf-8', function (err, data) {
          if (err) {
            console.log(err);
          } else {
            res.json(Mock.mock(JSON.parse(data)));
          }
        })
      });
    }
  }
});
// 監聽8090埠
app.listen('8090');
複製程式碼

---

conf.json

{
  "api1":{
    "url":"/api1",
    "path":"./api1/api1.json"
  },
  "api2":{
    "url": "/api2",
    "path": "./api2/api2.json"
  }
}
複製程式碼

---

api1.json

{
  "data":"i am api1"
}
複製程式碼

---

api2.json

{
  "api2":"hahah"
}
複製程式碼

執行結果

熱更新的可配置的mock服務

經過上面的修改，終於不用寫那麼多行程式碼了O(∩_∩)O哈哈~ 但是人（我）是很懶的生物，如果每次改個配置檔案，改個模擬資料檔案手動重啟才能生效豈不是好累 所以我們來模擬一下熱更新，有木有好高大上的感覺O(∩_∩)O哈哈~

目錄結構

你沒有看錯，就新增了一個mockStart.js檔案而已哦

程式碼

這裡借用了nodemon來檢檢測json檔案，然後重啟mock服務

mockStart.js

var nodemon = require('nodemon'); //引入nodemon模組

/**
 * script 重啟的指令碼
 * ext 檢測的檔案
 */
nodemon({
  script: 'mockServer.js',
  ext: 'json'
});

nodemon.on('start', function () {
  console.log('mockServer has started');
}).on('quit', function () {
  console.log('mockServer has quit');
  process.exit();
}).on('restart', function (files) {
  console.log('mockServer restarted due to: ', files);
});
複製程式碼

執行結果

還是熟悉的介面，還是不一樣的味（數）道（據），我沒有手動重啟服務哦O(∩_∩)O哈哈~，是不是很方便。

參考資料

• https://github.com/nuysoft/Mock/wiki
• https://github.com/remy/nodemon/blob/master/doc/requireable.md