移动端主页内容 part4 axios

ajax  可以动态获取数据内容

vue中发送ajax有很多工具可用

浏览器自带的fetch

现在推荐：

axios第三方模块（vue中发送ajax）

特点：

跨平台的数据请求

• 浏览器中xhr请求
• node服务器中发送http请求

技巧：

一个首页中有五个组件。每个组件需要发送数据请求。那就是五个请求。那性能就很低

我们可以在根组件中发送一个请求 然后父子件传值 。

知识点static  整个项目中外部仅仅能直接访问这个文件夹内部的内容

作用：本地数据模拟 不提交到git仓库（gitignore 中写一下模拟数据文件地址即可）

使用步骤

1.安装

npm install --save axios vue-axios

2.使用

home根组件中引入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

//是否可以引入在项目入口文件

 

3.axios中url地址解决方案  

原因：本地模拟数据用的是本地模拟url

上线之前改动代码（修改url） 是非常不建议的

开发环境中如果有一个转发机制 把url中 api/index.json 文件的请求转发到我本地的mock文件夹下（就是static中模拟数据文件夹）

解决：vue中提供一个proxy代理功能

config文件中--- index.js   ----  

文件中有一个配置项目

module.export = {
   dev: {
  proxyTable:{
    '/api' : {
     target: 'http://localhost:8080',
    pathRewrite: {
    '^/api': '/static/mock'
}      
}
}
}   
}

当开发环境访问api时候 vue脚手架工具会帮我们替换地址（开发环境的转化）

 

//使用ajax动态获取数据  当数据还没有收到的时候，swiper组件收到的是跟组件data传过来的空数组，会造成渲染问题

这个时候可以给swiper组件 设置一个  v-if='list.length'

模板中避免逻辑性的代码

 v-if='showSwiper'

computed: {
showSwiper () {
return this.list.length 
}
}