在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