Vue2.0 使用vue-resource 模拟网络请求加载本地数据

1、首先我们需要在webpack.dev.conf.js中const PORT = process.env.PORT && Number(process.env.PORT) 的后面追加一下代码：

const express = require('express');
const app = express();
const  appData = require('../data.json');
const  seller_data = appData.seller;
const  goods_data = appData.goods;
const ratings_data = appData.ratings;
var apiRoutes = express.Router();
app.use('/api', apiRoutes);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

2、在webpack.dev.conf.js中devServer中添加一下代码：

 before(app) {
      app.get('/api/seller', function(req, res) {
        res.json({
          errno: 0,
          data: seller_data
        })
      });
      app.get('/api/goods', function(req, res) {
        res.json({
          errno: 0,
          data: goods_data
        })
      });
      app.get('/api/ratings', function(req, res) {
        res.json({
          errno: 0,
          data: ratings_data
        })
      });
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

3、重新启动

npm  run dev

• 1

4、在实例中调用请求

 this.$http.get('/api/seller').then(response => {
           console.log(response.body);
           this.seller = response.body;

       }, response => {
           console.log(response);
       });