Vue 模拟请求后台数据

Vue 项目开发过程中，在没有后端支持的情况下，如何模拟请求后台数据呢？

可以在根目录 /static 目录下新建 mock 文件夹，在 mock 文件夹下创建 json 文件来存放模拟数据，例如：

index.json 内容如下：

//注意：json 文件里不要加注释，否则无法正常解析
{
  "ret": true,
  "data": {
    "indexList": [{
      "id": "0001",
      "title": "gongcw"
    }]
  }
}

那么，为什么要在 /static 目录下存放模拟数据呢？是因为，在 Vue 项目中，只有 /static 目录下的内容可以被外部访问，访问其余目录会自动跳转到“首页”。

接下来，就可以通过 axios 发送 ajax 请求获取数据了：

<script>
import axios from 'axios'
export default {
  name: 'Home',
  methods: {
    getHomeInfo () {
      axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

这样虽然可以正常获取模拟数据了，但还存在一个问题。一般项目获取后台数据都是通过 ‘/api/iddex.json’ 方式获取，如果使用上述方式，在项目上线前就需要修改所有 ajax 请求，这显然不是太友好。

我们可以在 /config/index.js 文件里添加下述代码来解决：

module.exports = {
  ...
  dev: {
    ...
    proxyTable: {
        '/api': {
            target: 'http://localhost:8080',
            pathRewrite: {
                '^/api': '/static/mock'
            }
        }
    }
    ...
  }
  ...
}

接下来就可以请求 ‘/api/index.json’ 来获取模拟数据了。

最后，如果需要把代码提交到 git 上管理，可以在 .gitignore 文件里添加如下代码，来忽略提交模拟数据

static/mock