关于Vue2.0 测试数据请求模拟

准备测试数据 data.json

{
  "seller":{},
  "goods":[],
  "ratings":[]  
}

添加位置

// 开发模式下的webpack配置文件下，即 vueProject/bulid/webpack.dev.conf.js 
// 1, 导入我们的测试的json数据，存放目录，我一般放置在项目根目录下 
const serverData = require('../data')
const seller = serverData.seller
const goods = serverData.goods
const ratings = serverData.ratings
// 2, 将请求数据的路由配置好，找到devServer属性，在其最后添加before 方法，此处我采用的简写形式 
 devServer: {
    clientLogLevel: 'warning',
   ...// 省略中间部分 
    watchOptions: {
      poll: config.dev.poll,
    },
    //这里就是你配置你的测试数据路由的地方了，将所有的数据已json输出
    before (app) {
      /**
       * 获取买家信息
       */
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      })
      /**
       * 获取销售信息列表
       */
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      })
      /**
       * 评价列表
       */
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  },

使用

我使用的是vue-resource插件来进行请求数据，所以我们收先需要引入这个插件
1，在main.js 中引入这个插件，并使用它

import VueResource from 'vue-resource'
Vue.use(VueResource)

2，调用数据

this.$http.get('/api/seller').then((res) => {
        if (res.body.errno === ERR_OK) {
          this.seller = res.body.data
        } else {
          console.log('App.vue:', '获取数据异常')
        }
      }, (err) => {
        console.log(err)
      })

这样一个简单的测试案例就可以完整的将数据从服务器拿到客户端进行测试了。
如有问题欢迎探讨。