日拱一卒-如何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启动,这样子服务只要有了更改就会自动重启,高效很多。

原文链接:segmentfault.com

上一篇:如何理解vue中的v-bind?
下一篇:react native 环境运行报错问题解决

相关推荐

官方社区

扫码加入 JavaScript 社区