axios
在Vue中发送Ajax有很多工具可以使用 比如说浏览器自带的fetch函数 也可以使用vue-resource，当然我们使用官方推荐的axios，他的功能非常强大，他能实现跨平台的数据请求
// 使用axios就要安装axios
npm install axios --save
// 这么多的请求难道我要一个一个请求 这样太耗费性能 所有我应该在使用所有组件的地方发一次请求获取数据，然后把数据传个每一个子组件
import axios from 'axios'
methods: {
// 获取ajax的数据
getHomeInfo () {
axios.get('/api/index.json')
// axios 返回的结果是一个promise对象 所以我们可以用then
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
// 数据获取成功呢我就把数据打印出来
console.log(res)
}
},
// 我们可以在生命周期 mounted 中写axios的代码
mounted () {
// 我们在这里写一个函数 函数定义在methods中
this.getHomeInfo()
}
// 这个时候没有数据会发生404 在没有后端支持的情况下我们该怎么模拟数据呢
定义模拟数据
// 在static静态文件夹中创建mock文件夹然后创建index.json
// 为什么在static中创建呢？ 因为所有工程中的内容只有static中的内容可以被外部访问到
// 由于是我自己写的数据我不希望他上传到线上，所有我一个把它添加到 .gitignore
转发机制（代理）
由于我们现在用的是本地模拟的接口地址，假如代码要上线，那么在上线前你肯定要把代码都替换成 /api 这种形式，而上线前改动代码是有风险的，那么我们如果在开发是也这么写就需要这样一个转发机制 把/api.index.json转到mock文件夹下，webpack提供给我们一个功能就是代理，通过这个功能我们就可以实现我们的一个构想
// config文件夹下有一个index.js 文件
// 如上图我们可以看到在开发环境下vue给我们提供了一个proxyTable配置项在这里我们添加一些配置就可以实现刚才的想法
proxyTable: {
// 当我去请求api这个目录的时候
'/api': {
// 我希望他帮我们把请求转发到当前服务器
target: 'http://localhost:8080',
// 我希望他的路径做一个替换
pathRewrite: {
// 一旦你请求的地址是以/api开头的 那么我就把他的路径替换为后者
'^/api' : 'static/mock'
}
}
}
// 当我们改动了配置项文件时需要重启一下
父子组件数据传递
把父组件通过axios请求过来的数据传递给各个子组件
// 首先在父组件中创建一个data，这里存储了这个页面的各种数据
<home-header :city="city"></home-header> //父组件传值
props: {
// 子组件接收
city: String //数据类型为string
}
{
{
this.city}} //子组件使用
// 逻辑
methods: {
// 获取ajax的数据
getHomeInfo () {
axios.get('/api/index.json')
// axios 返回的结果是一个promise对象 所以我们可以用then
.then(this.getHomeInfoSucc)
},
getHomeInfoSucc (res) {
// 数据获取成功呢我就把数据打印出来
// console.log(res)
res = res.data
console.log(res.data)
// 也就是说如果后端正确的返回了结果 且 有data这个内容项
if (res.ret && res.data) {
// 定义一个变量
const data = res.data
// 那么我就可以这样赋值
this.city = data.city
}
}
},
// 我们可以在生命周期 mounted 中写axios的代码
mounted () {
// 我们在这里写一个函数 函数定义在methods中
this.getHomeInfo()
}
解决swiper图片顺序问题
当父组件给子组件传值的时候，传递过来的是一个空数组，所以会导致问题最后一张图片是默认图片
// 解决方法是 给swiper添加 v-if=“list.leng” 当数组为空时不添加
// 这么写实际上不优雅 我们说我们在模板里面尽量避免出现这些逻辑性代码
// 所以我们应该用计算属性
v-if="showSwiper"
computed: {
showSwiper () {
return this.list.length
}
}
使用一像素边框
// 在class 名中加一个 border-bottom就行了在底部添加一像素边框