vue 一个简单的项目之一首页 step8 使用axios 发送ajax 请求

前面，页面的数据，都是写死的，这篇，我们将通过ajax 动态获取页面内容。

先创建一个分支，index-ajax, 然后pull 下来，跳转到这个分支上工作。

在vue 中使用ajax , 可以通过很多工具。比如，浏览器自带的 fetch 函数，也可以使用以前vue 推荐的第三方模块 vue-resource，现在vue 官方推荐我们使用第三方模块 axios （它可进行跨平台【浏览器，node...】的ajax 请求）。

【安装axios 】

在项目最高目录下，使用命令

npm install axios --save 安装axios

安装好后，启动服务器。

npm run start

打开项目。我们首页一共有5个组件构成，如下。如果是，从组件中发送ajax 请求就要发送5个请求，这样会印象性能，因此，我们在Home.vue 中发送ajax 请求，此时只需发1个请求了。在每次获得数据之后，只需把数据传给子组件即可。

<template>
  <div>
    <home-header></home-header>
    <home-swiper></home-swiper>
    <home-icons></home-icons>
    <home-recommend></home-recommend>
    <home-weekend></home-weekend>
  </div>
</template>

我们先在项目中，建一个模拟的数据。在static 目录下，建立一个mock 文件夹，然后在这儿建一个文件index.json，如下图。为啥要建在static 文件夹呢？因为，在整个工程中，只有static 文件夹，能被外部访问到。

然后，我们不希望static 下面的模拟数据提交到线上代码。那么打开 .gitignore 文件，加入下面第七行即可。

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
static/mock  

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

好了。如下，即可访问到数据。

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

<style>

</style>

上面，我们将ajax 请求的地址，设为本地 static，当与后台对接，需要改为 /api/... 的形式，这样改来改去不太好。

我们可以配置一下，使用转发机制，使 api 下所有的jason 请求都转发到本地的 static/mock 文件夹中。这个呢，vue 提供了proxy代理功能，这个功能就能实现，前一句话。具体，我们打开config 目录下的index.js 文件。如图，dev(开发环境)，提供了proxyTable 配置项，我们在这儿做一些配置即可。

[当请求api 目录时，我们将请求转发到本地服务器的8080 端口，不过要把路径做一个替换:使“/api”开头的部分，替换为“/static/mock”] 如下(这个配置功能是，webpack-dev-server 提供的)。

module.exports = {
  dev: {

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

重启服务器，即可使用。