去哪儿首页-ajax获取数据

一、Ajax获取首页数据

------将写死的静态数据换成用Ajax动态获取数据

1.新建分支index-ajax，同步到本地，然后进行开发

2.安装axios npm install axios --save 用于项目中ajax数据的请求

Q：如果编写的分支代码忘记合并到master分支上，eg：index-recommend分支

A：可以将新分支和这个分支合并一下就好了

3.希望整个首页发送一个ajax请求就好，在home.vue里发送ajax请求，获取数据后可以传给每个子组件

引入axios import axios from 'axios'
在mounted(){}中写一个语句，让页面挂载好以后去执行这个函数，函数定义在methods里面

<!--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
  },
  methods: {
    getHomeInfo () {
      axios.get('api/index.json')
        .then(this.getHomeInfoSuc)
    },
    getHomeInfoSuc (res) {
      console.log(res)
    }
  },
  mounted () {
    this.getHomeInfo()
  }
}
</script>

Q：返回404，因为没有json文件。在没有后端支持情况下，如何实现数据模拟

A：在static文件夹下建一个mock，在里面添加index.json文件。因为只有static文件夹下内容可以被外部访问到，所以将本地模拟的静态数据都放在mock文件下。因为是本地模拟数据，不希望提交到线上，所以在.gitignore文件下加上static/mock就不会被提交到git仓库里。如果是请求的本地模拟数据，那么地址应该是'/static/mock/index.json'，那代码上线以后肯定不是这个地址，怎么替换呢？可以利用转发机制(vue提供的proxy)，打开config/index.js，proxyTable:{’/api':{target:'http://localhost:8080',pathRewrite:{'^/api':'/static/mock'}}}把api替代成static/mock。实际上这个功能是webpack-dev-server提供的

//config/index.js文件
proxyTable: {
      '/api': {
         target: 'http://localhost:8080',
         pathRewrite: {
           '^/api': '/static/mock'
         }
      }
    },

修改上述配置后，重启一下
编写好index.json文件，就能够访问到数据了（需要数据：city 轮播图数组图标数组推荐数组周末游数组）

二、首页父子组件数据传递(将通过ajax获取的数据传给子组件)

1.父子组件数据传递：用data存储页面的各种数据，子组件通过props接收数据。。例如header区，涉及代码如下：

//home.vue文件

<template>处
<home-header :city="city"></home-header>

<script>处
data () {
  return {
    city: ''
  }
}

//header.vue文件

<script>处接收数据
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}

<template>处展示数据
<div class="header-right">
  {{this.city}}
  <span class="iconfont arrow-icon">&#xe64a;</span>
</div>

2.将获取的数据赋给data，其他的数据同理

getHomeInfoSuc (res) {
   res = res.data
   if (res.ret && res.data) {    //判断是否正确返回结果且res中有data这个内容项
      const data = res.data
      this.city = data.city
   }
}

Q：swiper组件部分，默认显示的是最后一张幻灯片。因为swiper最初ajax没返回数据的时候接收的是空数组，收到数据才重新渲染，所以默认显示最后一张幻灯片。

A：让swiper接收到数组以后再创建，空数组的时候不创建。v-if判断数组长度，为了模板中尽量不出现逻辑性代码，所以用computed计算属性，把计算放在这里面。

//swiper.vue文件下

<template>处
<swiper v-if="showSwiper"></swiper>

<script>处
computed: {
    showSwiper () {
      return this.list.length
    }
  }

Q：icon图标区域自动播放

A：swiper添加options，将autoplay设为false即可

//icons.vue

<template>处
<swiper :options="swiperOption">

<script>处
 data () {
    return {
      swiperOption: {
        autoplay: false
      }
    }
  }

3.最后，提交代码到线上

baked_donut

发布了0 篇原创文章 · 获赞 0 · 访问量 442

私信关注

去哪儿首页-ajax获取数据

猜你喜欢