在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