去哪项目补充笔记 7-8 使用axios发送ajax请求、父组件向子组件传值

本文是另一个作者的慕课去哪儿实战项目的补充笔记

当前组件目录结构如图所示

显示效果如图所示

首页有五个组件构成，当我们要发送ajax请求时，每个组件单独发送，这样会导致首页发五个ajax请求，性能下降，因此可以将整个首页只发一个ajax请求

方法：

1、安装axios

npm install axios --save

2、在Home.vue中导入

import axios from 'axios'

3、在Home.vue中写mounted挂载函数

 mounted () {
    this.getHomeInfo()
  }

4、写挂载函数中的方法

用axios的get方法请求URL，获取到数据执行getHomeInfoSucc方法

 methods: {
    getHomeInfo () {
      axios.get('/api/index.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  }

5、在static下创建mock/index.json---读到mock数据

填写测试数据 hello world 

整个工程中只有static目录下的内容可以被外部访问

例如

 

因此可以在该目录下放要在外部访问的数据

如果我们不希望整个文件夹下的数据被提交到线上，可以在.gitignore中添加数据

static/mock

还有一个问题：

我们index.json数据是本地模拟的数据，我们把axios的get改为

axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)

 网页刷新，控制台显示如下，证明可以正常得到

但我们实际开发中不是本地模拟的数据，因此可以写为 

axios.get('/api/index.json').then(this.getHomeInfoSucc)

设立转发机制（VUE已默认提供代理功能）让对api的请求转发到static/mock下 

在config/index.js，proxyTable中