日拱一卒-如何mock数据

在项目的开发中，联调是家常便饭，而且也是比较费时间的一个环节。
在前后端分离的项目当中，我们往往是先约定好接口与数据，再进行开发。
这个时候，如果前端能自己启动一个服务，按照一定的规则生成假数据，那么联调起来将会方便很多。
目前市面上有很多mock数据的工具，而我采用的是mockjs。
首先要明白一点，mockjs并不能启动一个服务，它只是一个生成数据的工具。我们需要自己启动服务，接收请求，再把数据返回给前端。
这里我采用的是比较容易用的express。
express的安装就不再赘述。说一下几个关键的点。
在项目的路由文件中，我们可以这样来mock数据：

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数，起始值为 1，每次增 1
    'id|+2': 1
  }]
})

这就生成好了假数据，然后就要通过路由返回出去，写法是这样子的：

router.get('/', function (req, res, next) {
  // 以下四行是用来设置返回的响应头，用来解决跨域问题
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Headers", "Content-Type");
  // 这一行是将构造的假数据进行返回
  res.send(data);
  res.render('index', { title: 'Express' });
});

如此，我们便成功mock好了数据，接下来就是请求接口了。
在vue-cli3中，vue.config.js文件中对本地服务器进行设置：

module.exports = {
  devServer: {
    proxy: {
      // 这里的key值我也没搞懂为什么要这样子写，之后再研究一下
      [""]: {
        // 假设我们的mock服务启动在3000端口
        target: `http://127.0.0.0:3000`,
        // 这里是用于设置跨域
        changeOrigin: true,
        // 这里的路径重写实际上我也没搞懂是什么意思，之后再研究
        pathRewrite: {
          ['^/']: ''
        }
      }
    },
  }
}

改写完配置，记得重启服务，之后就可以快乐地玩耍了。
mock服务可以使用nodemon启动，这样子服务只要有了更改就会自动重启，高效很多。