难点:
image.png
异步显示食品分类轮播列表
1.通过一维数组生成二维数组 ?
通过二维数组遍历显示图片
异步显示食品分类列表
2.延迟到更新界面如何做?
使用watch$nextTick(callback)解决轮播bug
由于创建的Swiper实例对象,更新早于数据更新,无法实现轮播.
使用setTimeout可以实现效果,但不是很好,因为不知道数据何时更新完,无法准确控制时间进行界面更新.
$nextTick()
用法:将回调延迟到下次DOM更新循环之后执行.在修改数据之后立即使用它,然后等待DOM更新.它跟全局方法Vue.nextTick一样,不同的是回调的this自动绑定到调用它的实例上.
<template>
<!--首页导航-->
<nav class="msite_nav">
<div class="swiper-container" v-if="(categorys.length)">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(categorys,index) in categorysArr" :key="index">
<a href="javascript:" class="link_to_food" v-for="(category,index) in categorys" :key="index">
<div class="food_container">
<img :src="baseImageUrl+category.image_url">
</div>
<span>{{category.title}}</span>
</a>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import HeaderTop from '../../components/HeaderTop/HeaderTop'
import ShopList from '../../components/ShopList/ShopList'
export default {
data () {
return {
baseImageUrl: 'https://fuss10.elemecdn.com'
}
},
mounted () {
this.$store.dispatch('getCategorys')
this.$store.dispatch('getShops')
},
computed: {
...mapState(['address', 'categorys']),
/*
根据categorys一维数组生成一个二维数组
小数组中的元素个数最大是8
*/
categorysArr () {
//取出一维数组
const {categorys} = this
//准备空的二维数组
const arr = []
//准备一个小数组（最大长度是8）
let minArr = []
//遍历categorys
categorys.forEach(c => {
//如果当前小数组已经满了，创建一个新的
if (minArr.length === 8) {
minArr = []
}
//如果minArr是空的，将小数组保存到大数组中
if (minArr.length === 0) {
arr.push(minArr)
}
//将当前分类保存到小数组
minArr.push(c)
})
return arr
}
},
/*watch:{
categorys(value){//数据更新(categorys数组中有数据了,在异步更新界面之前执行)
//使用setTimeout可以实现效果,但是不是很好
setTimeout(()=>{
//创建一个Swiper实例对象，来实现轮播
new Swiper('.swiper-container', {
loop: true,//可以循环轮播
//如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
},100)
}
},*/
watch:{
categorys(value){//数据更新(categorys数组中有数据了,在异步更新界面之前执行)
//界面更新就立即创建Swiper对象
this.$nextTick(() => {//一旦完成界面更新，立即调用（此条语句要写在数据更新之后）
//创建一个Swiper实例对象，来实现轮播
new Swiper('.swiper-container', {
loop: true,//可以循环轮播
//如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
})
}
},
components: {
HeaderTop,
ShopList,
}
}
</script>
3.开发 Star 组件: 通过计算属性实现
<template>
<div class="star" :class="'star-'+size">
<span class="star-item" v-for="(sc,index) in starClasses" :class="sc" :key="index"></span>
</div>
</template>
<script>
//类名常量
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
export default {
props: {
score: Number,
size: Number
},
computed: {
/*
小数大于0.5就有一颗半星
3.2: 3 + 0 + 2
3.5: 3 + 1 + 1
*/
starClasses () {
const {score} = this
const scs = []
//向scs中添加n个CLASS_ON
const scoreInteger = Math.floor(score)
for (let i = 0; i < scoreInteger; i++) {
scs.push(CLASS_ON)
}
//向scs中添加0/1个CLASS_HALF
if (score * 10 - scoreInteger * 10 >= 5) {
scs.push(CLASS_HALF)
}
//向scs中添加n个CLASS_OFF
while (scs.length < 5) {
scs.push(CLASS_OFF)
}
return scs;
}
}
}
</script>
4.前后台交互相关问题
1).如何查看你的应用是否发送某个ajax请求?
浏览器的network;
2).发ajax请求404
请求的路径不对
代理是否生效(配置和重启)
服务器应用是否运行
3).后台返回了数据,但页面没有显示?
vuex中是否有
组件中是否读取
5.异步数据：
封装ajax：
promise+axios封装ajax请求的函数
封装每个接口的对应的请求函数（能根据接口定义ajax请求函数）
解决ajax的跨域问题：配置代理，对代理的理解
浏览器是不知道代理的存在，浏览器提交的是对当前前台应用的请求，请求的是8080，
前台服务器的端口号：8080， 后台服务器的端口号4000，前后台都是运行在服务器之上
前台应用发的8080的请求，代理服务器去拦截它，将它转发后台服务器4000去处理，返回的结果代理又将它转发给8080
