一、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"></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.最后,提交代码到线上