[置顶] 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~