1 axios

Vue中发送Ajax请求有很多工具可以使用：

• 浏览器自带的fetch函数
• vue-resource第三方模块
• axios第三方模块😀。非常强大，能实现跨平台的数据请求，浏览器端axios可以发送xhr请求，在node服务器上可以发送http请求。

1.1 安装axios

npm install axios --save

1.2 发送ajax请求

• 首页上的每个组件都发一个ajax请求👎。整个首页发送一个ajax请求👍。 （每个组件都有自己的数据，如果每个组件都自己发一个ajax请求把对应的数据拿过来的话，若首页上的五个组件都发ajax请求，那么首页就会发送五个ajax请求，网站的性能就会降低）
• mounted()周期函数
• Home.vue首页

  <template>
    <div>
      <home-header></home-header>
      <home-swiper></home-swiper>
      <home-icons></home-icons>
      <home-recommend></home-recommend>
      <home-weekend></home-weekend>
    </div>
  </template>
  <script>
  import HomeHeader from './components/Header'
  import HomeSwiper from './components/Swiper'
  import HomeIcons from './components/Icons'
  import HomeRecommend from './components/Recommend'
  import HomeWeekend from './components/Weekend.vue'
  import axios from 'axios'
  export default {
    name: 'Home',
    components: {
      HomeHeader,
      HomeSwiper,
      HomeIcons,
      HomeRecommend,
      HomeWeekend
    },
    methods: {
      getHomeInfo () {
        axios.get('/api/index.json')
          .then(this.getHomeInfoSucc)//get请求一个url返回的是一个promise对象，然后用then
      },
      getHomeInfoSucc (res) {
        console.log(res)
      }
    },
    mounted () {
      this.getHomeInfo()
    }
  }
  </script>
  

1.3 ajax请求模拟数据

没有后端支持怎么实现数据的模拟呢？在static文件里创建文件模拟数据static->mock->index.json

• 只有static文件的内容可以在网页中访问：

• .gitignore文件中添加代码：

  static/mock
  

  使得该文件夹不会被提交到本地和线上的仓库里

1.4 webpcak-dev-server提供的proxy代理功能，实现转发机制

• Why？产品要上线请求的不是static里的数据，上线之前要把static路径替换成api，但是上线前改动代码有风险，因此有了转发机制。
• What？转发机制：api的请求转发到static文件夹下
• How？
  • proxy代理功能config->index.js

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

    请求api这个目录的时候，把请求转发到这台服务器的8080端口上，并替换路径。更改了配置项文件，需要重启服务器。

2 将Ajax获取到的数据，传递给子组件。

2.1 Home.vue主页，初始化数据。

初始化列表、字符串等与json对应的数据。

data () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },

2.2 Home.vue主页，ajax请求获取数据。

methods: {
    getHomeInfo () {
      axios.get('/api/index.json')
        .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      res = res.data
      console.log(res)
      if (res.ret && res.data) {
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.inconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
    }
  },
  mounted () {
    this.getHomeInfo()
  }

2.3 Home.vue根组件模板通过属性进行传值

<template>
  <div>
    <home-header :city="city"></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list = "weekendList"></home-weekend>
  </div>
</template>

2.4 swiper.vue header.veu...子组件接收父组件传递的值

• props接口

  props: {
      list: Array
  }
  

2.5 轮播图Swiper的默认项改成第一个

• 轮播图Swiper的默认项是最后一个
  • swiper初始化创建最初是通过空数组swiperList: []，ajax获取数据后，swiperList数组里才有了数据，重新渲染页面，因此默认显示了最后一项。
• 解决 swiper初次创建由非空数组swiperList创建（ajax获取到数据后）

  <template>
      <div class="wrapper">
        <swiper :options="swiperOption"  v-if="showSwiper">//🚗🚗🚗
          <swiper-slide v-for="item of list" :key="item.id">
              <img class="swiper-img" :src="item.imgUrl">
          </swiper-slide>
          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
  </template>
  <script>
  export default {
    name: 'HomeSwiper',
    props: {
      list: Array//🚗🚗🚗
    },
    computed: {
      showSwiper () {
        return this.list.length//🚗🚗🚗
      }
    }
  }
  </script>