简单的快速获取数据 axios

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情 首先写一个json文件 如:

{
  "data":[
    {
      "city":"北京",
      "activityList":[
        {
          "id":"01",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"酒店"
        },
        {:
          "id":"02",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/flight.png",
          "text":"机票"
        },
        {
          "id":"03",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/train.png",
          "text":"火车票"
        },
        {
          "id":"04",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/package.png",
          "text":"度假"
        }
        ,{
          "id":"05",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
        ,{
          "id":"06",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
        ,{
          "id":"07",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
        ,{
          "id":"08",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
        ,{
          "id":"09",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
        ,{
          "id":"10",
          "imgUrl":"//s.qunarzz.com/homenode/images/touchheader/hotel.png",
          "text":"景点门票"
        }
      ]
    },
    {
      "city":"上海"
    }
  ]
}

vue页面 用于渲染数据

<template>
  <div class="activity border-top">
    <div class="activity-item border-right" v-for="item in activityList" :key="item.id">
      <img :src="item.imgUrl" alt="">
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  props:["activityList"]
}
</script>

在main中引入axios

// axios
import axios from 'axios'
Vue.prototype.$http =axios

获取到json中的数据

mounted(){
    this.$http.get("http://localhost:8080/static/mock/mock.json")
    .then((res)=>{
      const data =res.data.data[0];
      this.iconsList =data.iconsList;
      this.hotList =data.hotList;
      this.likeList =data.likeList;
      this.swiperList =data.swiperList;
      this.vacationList =data.vacationList;
      this.activityList =data.activityList;
    })
  }

定义一个空对象

data(){
    return{
      activityList:[]
    }
  },

向子集传递数据

    <HomeActivity :activityList="activityList" />

用于接收父级的数据

props:["activityList"]

设置代理

'/api': {
        target: "http://localhost:8080",
        pathRewrite: {
          '/api':'/static/mock/'
        }
      }

当设置代理后就可以通过两种方式获取到本地数据了

这样就大大减少了我们需要写的代码量

处理接口路径

两种效果一比较 后者简便了很多