Mockjs + Vue-cli 尝试

最近准备开始撸项目，由于还在设计阶段，还没正式开始项目，预计接口短期内也无法提供，想起有个叫做Mockjs的库可以做这个，干脆尝试自己做个假数据。

Mockjs基本用法就不提了，参考官方文档即可，这里主要看如何将这个库结合到Vue-cli的webpack-dev-server中。

该demo的由vue-cli构建，需要注意的是由于新版的vue-webpack-template的/build目录下的dev-server.js配置文件取消了，配置项改在了，webpack.dev.conf.js里面

image

因此，如果要使用dev-server做处理开发中的请求，需要做另外的配置，这里官方提供了一个钩子:

before(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

借助这个钩子可以自己定义中间件对路由劫持并做处理。
由于这里是webpack配置文件，不便于做mock数据的配置，因此将配置放在其他目录，引入进来（如上图红框部分）。

接下来看看mockjs路由处理的主体：

const Mock = require('mockjs')
const express = require('express')
const mockRouter = express.Router() // express路由
const Random = Mock.Random  // mock的方法

// method: GET  
// path: /data
mockRouter.get('/data', (req, res) => {
  const data = {
    email: Random.email()  // 随机一个email
  }
  res.json(data)  // 序列化并返回json对象
})
module.exports = mockRouter

这里作为路径细节的补充，我们可以在这里做任意的劫持，返回模拟的数据用于填充数据。

在来看看Vue组件：

<template>
  <div>
    <h1>Mockjs + json-server</h1>
    <p>the data is : {{ apiData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apiData: '',
    };
  },
  methods: {
    test() {
      this.$axios  // 将axios全局注入
        .get("/api/data")
        .then(res => {
          this.apiData = res.data;
        })
    }
  },
  created() {
    this.test()
  }
};
</script>

渲染结果：

image

项目地址：
https://github.com/XiongAmao/mockjs-demo