難點:
image.png
異步顯示食品分類輪播列表
1.通過一維數組生成二維數組 ?
通過二維數組遍歷顯示圖片
異步顯示食品分類列表
2.延遲到更新界面如何做?
使用watch$nextTick(callback)解決輪播bug
由于創(chuàng)建的Swiper實例對象,更新早于數據更新,無法實現輪播.
使用setTimeout可以實現效果,但不是很好,因為不知道數據何時更新完,無法準確控制時間進行界面更新.
$nextTick()
用法:將回調延遲到下次DOM更新循環(huán)之后執(zhí)行.在修改數據之后立即使用它,然后等待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 => {
//如果當前小數組已經滿了革为，創(chuàng)建一個新的
if (minArr.length === 8) {
minArr = []
}
//如果minArr是空的，將小數組保存到大數組中
if (minArr.length === 0) {
arr.push(minArr)
}
//將當前分類保存到小數組
minArr.push(c)
})
return arr
}
},
/*watch:{
categorys(value){//數據更新(categorys數組中有數據了,在異步更新界面之前執(zhí)行)
//使用setTimeout可以實現效果,但是不是很好
setTimeout(()=>{
//創(chuàng)建一個Swiper實例對象，來實現輪播
new Swiper('.swiper-container', {
loop: true,//可以循環(huán)輪播
//如果需要分頁器
pagination: {
el: '.swiper-pagination',
}
})
},100)
}
},*/
watch:{
categorys(value){//數據更新(categorys數組中有數據了,在異步更新界面之前執(zhí)行)
//界面更新就立即創(chuàng)建Swiper對象
this.$nextTick(() => {//一旦完成界面更新领铐，立即調用（此條語句要寫在數據更新之后）
//創(chuàng)建一個Swiper實例對象，來實現輪播
new Swiper('.swiper-container', {
loop: true,//可以循環(huán)輪播
//如果需要分頁器
pagination: {
el: '.swiper-pagination',
}
})
})
}
},
components: {
HeaderTop,
ShopList,
}
}
</script>
3.開發(fā) 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).如何查看你的應用是否發(fā)送某個ajax請求?
瀏覽器的network;
2).發(fā)ajax請求404
請求的路徑不對
代理是否生效(配置和重啟)
服務器應用是否運行
3).后臺返回了數據,但頁面沒有顯示?
vuex中是否有
組件中是否讀取
5.異步數據：
封裝ajax：
promise+axios封裝ajax請求的函數
封裝每個接口的對應的請求函數（能根據接口定義ajax請求函數）
解決ajax的跨域問題：配置代理抓谴，對代理的理解
瀏覽器是不知道代理的存在滤蝠，瀏覽器提交的是對當前前臺應用的請求，請求的是8080昆码，
前臺服務器的端口號：8080， 后臺服務器的端口號4000邻储，前后臺都是運行在服務器之上
前臺應用發(fā)的8080的請求赋咽，代理服務器去攔截它，將它轉發(fā)后臺服務器4000去處理吨娜，返回的結果代理又將它轉發(fā)給8080
