vue项目中在本地模拟数据,请求数据步骤

1.先将需要模拟的数据放入mock文件夹中

2.在build文件夹中,找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json

//第一步 const portfinder = require('portfinder'),在后面加上
const express = require('express');
const app = express(); //请求server
const appData = require('../src/mock/a.json'); //加载本地数据文件

const cityList = appData.city; //获取对应的本地数据

const apiRoutes = express.Router();
app.use('/api', apiRoutes); //通过路由请求数据
//第二步找到devServer,在里面添加
 
before(app){
      app.get('/api/cityList',(req,res)=>{
        res.json({
          errno:0,
          data:cityList
        })
      })
    }

3.引入成功后,加载数据,重新启动项目,打开http://localhost:8080/api/cityList

 4.在项目中展示Json 数据

const ERR_OK = 0;
  export default {   
    name:'result',
    data () {
      return {
        // cityList:[]
      }
    },
    components: {
    },
    created(){
      this.$http.get('/api/cityList').then((res) => {
          if (res.data.errno === ERR_OK) {
            console.log(res.data.data)
          }
        });
    }
  }

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值