难点:

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