Vue2.0 之vue-resource 模拟服务端返回本地json数据

1.在webpack.dev.conf.js文件开头的一堆const后添加:

// 增加express
const express = require('express')
const app = express()
//加载本地数据文件
var appData = require('../goods.json') //获取json对象
var goods = appData.goods   //获取字段名
var apiRoutes = express.Router()
//为了统一管理api接口，我们在要请求的路由前边都加上‘/api’来表明这个路径是专门用来提供api数据的
app.use('/api', apiRoutes)  

2.在同文件的devServer属性的最后添加:

// 增加路由规则
before(app) {
  app.get('/api/goods', (req, res) => {
    res.json({
      code: 0,
      data: goods
    })
  })
}

3. 在组件入口处(main.js)引入并使用vue-resource

import VueResource from 'vue-resource'

Vue.use(VueResource)

4.重新运行项目

npm run dev

此步若忽略,就会出现可以通过…/api获取json,但实例中不能调用的情况

5. 在实例中调用请求

this.$http.get('/api/goods').then(response => {
      console.log(response.body);
      this.goods = response.body.data;
  }, response => {
      console.log(response);
  });

以上是es6的箭头函数写法,es5写法如下

this.$http.get('/api/goods').then(function (response) {
      console.log(response.body);
      this.goods = response.body.data;
  }, function (response) {
      console.log(response);
  });

最后附上在学习vue.js入门项目中的填坑和心得:github
如果有幸对你有帮助的话,悄悄求个star~