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

最新推荐文章于 2022-09-06 15:07:26 发布

Micah_A

最新推荐文章于 2022-09-06 15:07:26 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： Vue-请求 Vue resource

本文链接：https://blog.youkuaiyun.com/lvchenqiang_/article/details/78746664

Vue.js 专栏收录该内容

12 篇文章

订阅专栏

本文档介绍了如何在Vue2.0项目中使用vue-resource进行模拟网络请求，加载本地数据。通过在webpack.dev.conf.js配置文件中添加相关代码，设置devServer，然后在Vue实例中调用请求方法，实现数据的本地模拟获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);

这里写图片描述

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
        })
      });
    },

这里写图片描述

3、重新启动

npm  run dev

4、在实例中调用请求

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

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