在vue中使用express-mock搭建mock服務

首先安裝 nodemon ，如果是全局安裝，那么所有的項目都可以使用mock服務

npm install nodemon

再安裝express-mockjs

npm i -D express-mockjs

接下來按照以下的步驟來　　

第一步 在項目根目錄下建立api-interface文件，再建立一個文件夾叫mocks,這里面放json或者js都可以，然后再在mocks同級目錄下建立app.js文件

第二步編寫app.js

第三部 在mocks文件中編寫一個叫test的json文件，文件中代碼如下

然后寫入
/**
 * 測試接口
 *
 * @url /test-demo
 *
 * 詳細的說明
 * uid: userID
 * name: username
 * email: 郵件
 */

{
  "code": 0,
  "result|5": [
    {
      "uid|+1": 1,
      "name": "@name",
      "email": "@email"
    }
  ]
}

第四步　　啟動 app.js 腳本如下

node api-interface/app.js

點擊點擊，鏈接如圖

mock服務效果圖，如圖：

第四部，再新建一個js文件，文件名稱是user,文件代碼如下

小亂碼-杭州 2017/3/23 10:00:27
/**
 * 用戶頁面 - 用戶信息接口
 *
 * @url user?uid=233
 *
 */

module.exports = function (req) {
  var uid = req.query.uid;

  if (!uid) {
    return {
      code: -1,
      msg: 'no uid',
    }
  }

  return {
    code: 0,
    data: {
      "uid": +uid,
      "name": "@name",
      "age|20-30": 1,
      "email": "@email",
      "date": "@date",
    },
  };
};

第五步 按ctrl—+c退出

然后再執行

node api-interface/app.js

效果圖如下

其中，注意的細節說明一下

req.query.uid; 是你地址欄參數，相當於是 GET 方式的參數。
req.body.uid; 是你POST的參數。
這個是 express 的語法，可以直接查 express 文檔的。
每次修改，都要手動啟動非常麻煩，推薦用插件自動啟動。
全局安裝 npm i -g nodemon
全局安裝的話，所有項目都可以用。
然后在你的 package.json 里 scripts 里加一條
"api": "nodemon -e json -w api-interface api-interface/app.js",

 以上的操作步驟都是一個js群的大神告訴我的，大神博客地址http://www.52cik.com/，在此感謝樓教主大神

express-mockjs的github地址 https://github.com/52cik/express-mockjs