Vue2.5 旅游项目实例8 首页-使用axios获取首页数据

创建分支：index-axios

拉取到本地并切换分支：

git pull
git checkout index-axios

安装axios：

npm install axios --save

在Home.vue文件中添加代码：

<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'
import axios from 'axios'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  data () {
    return {
    }
  },
  mounted () {
    this.getHomeInfo()
  },
  methods: {
    getHomeInfo () {
      axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc (res) {
      console.log(res)
    }
  }
}
</script>

然后在static目录下，新建mock文件夹，存储测试用的模拟数据，并创建index.json文件。先随便写个内容

因为是模拟数据，所以我们不希望这个mock文件夹的内容提交到线上，所以要进行设置，打开.gitignore文件，添加：

static/mock

因为static/mock目录里存放的是本地模拟数据，上线的时候肯定不是这个地址。但是也不能上线前现修改代码，所以我们需要直接写线上的地方，然后在本地写个转发机制，把线上地址转到本地模拟数据地址。

Home.vue的请求地址写成：

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

然后打开config下的index.js文件：

在dev开发环境里的proxyTable，修改为：

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

修改配置项后，要重启启动服务，然后就可以看到控制台打印的结果了。

然后把模拟数据复制粘贴到index.json文件中，就可以获取数据了。