vue实战（6）：异步显示数据、开发Star组件

补课一

五一放假，太松懈了，到现在也没怎么认真学习整理，趁着星期天补一补。
本篇完成：
--- 异步显示首页数据
--- 开发star（星星评价）组件
--- 实现首页数据加载完成

0. 其它

vue实战（1）：准备与资料整理
 vue实战（2）：初始化项目、搭建底部导航路由
 vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
 vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
 vue实战（5）：总结一
 vue实战（6）：异步显示数据、开发Star组件
 vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
 vue实战（10）：开发店铺详情（一）
vue实战（11）：开发店铺详情（二）
vue实战（12）：完结 + 附学习视频

1. 异步显示食品轮播列表

获取数据
相同的，在 Msite.vue 页，加载食物分类列表数据，...mapActions('msite', [ 'getCategorys']), // 获取食物分类列表

重组数据
获取的数据为一维数组，根据swiper的格式，需要分组，分8个一组

<div class="swiper-container" v-if="categorysArr.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="baseImg + category.image_url">
              </div>
              <span>{{category.title}}</span>
            </a>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>

  categorysArr () { // 返回二维数组
      const { categorys } = this
      // 创建大数组
      const arr = []
      // 创建小数组
      let minarr = []
      // 循环数据
      categorys.forEach(c => {
        if (minarr.length === 8) { // 如果小数组长度为8，则创建一个新小数组
          minarr = []
        }
        if (minarr.length === 0) { // 如果小数组长度为0，则push进大数组
          arr.push(minarr)
        }
        // 把数据push进小数组
        minarr.push(c)
      })
      // 返回大数组
      return arr
    }

已把16个数据，分为两个数组

解决无翻页bug

数据虽然加载，但是无法翻页，需要重新加载Swiper

// 使用监视，这里对监视还不是特别明白，还是先用起来，后面再细研究
// 这边还使用了 $nextTick
watch: { // 监视
    categorys (value) { // 数组中有数据了，在异步更新界面之前执行
      this.$nextTick(() => { // 界面更新就立即创建swiper对象
        new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        pagination: {
          el: '.swiper-pagination'
        }
       })
      })
    }
  }

实时监测后，一旦有数据就更新页面

2. 异步显示商家列表

获取数据
相同的，在 Msite.vue 页，加载食物分类列表数据，...mapActions('msite', [ 'getShops']) // 获取商家列表

获取店铺的数据

显示数据
同时，在 ShopList.vue 页，进行数据加载显示，computed: { ...mapState('msite', ['shops'])} //获取数据

 <ul class="shop_list" v-if="shops.length">
      <li class="shop_li border-1px" v-for="(shop, index) in shops" :key="index">
        <a>
          <div class="shop_left">
            <img class="shop_img" :src="baseImg + shop.image_path">
          </div>
          <div class="shop_right">
            <section class="shop_detail_header">
              <h4 class="shop_title ellipsis">{{shop.name}}</h4>
              <ul class="shop_detail_ul">
                <li class="supports" v-for="(sup, index) in shop.supports" 
                   :key="index">
                   {{sup.icon_name}}
                </li>
              </ul>
            </section>
            <section class="shop_rating_order">
              <section class="shop_rating_order_left">
                <Star :score="shop.rating" :size="24"/>
                <div class="rating_section">
                  {{shop.rating}}
                </div>
                <div class="order_section">
                  月售{{shop.rating_count}}单
                </div>
              </section>
              <section class="shop_rating_order_right">
                <span class="delivery_style delivery_right">
               {{shop.delivery_mode.text}}
                </span>
              </section>
            </section>
            <section class="shop_distance">
              <p class="shop_delivery_msg">
                <span>¥{{shop.float_minimum_order_amount}}起送</span>
                <span class="segmentation">/</span>
                <span>配送费约¥{{shop.float_delivery_fee}}</span>
              </p>
            </section>
          </div>
        </a>
      </li>
    </ul>

3. 开发Star组件

星级评价需要提取出来，多个地方用到了评价，无过多的交互，是根据获取的分数，进行星星图片显示。

提取代码，重组页面，添 css
在 components 文件夹添加 Star 文件夹，并且新建 Star.vue 文件

<template>
  <div class="star" :class="'star-' + size">
    <span class="star-item on" v-for="(sc, index) in starclassArr" :key="index" 
         :class="sc"></span>
  </div>
</template>

<script>
// class常量
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'

export default {
  name: 'Star',
  props: {
    score: Number, // 评分
    size: Number // 图片
  },
  computed: {
    starclassArr () {
      const { score } = this
      // 创建一个装星星图片class的数组
      const scarr = []
      // 计算全星个数，push进数组，取分数的整数部分
      const scoreAll = Math.floor(score)
      for (let i = 0; i < scoreAll; i++) {
        scarr.push(CLASS_ON)
      }
      // 向数组中push半星图片class,0/1个
      if (score * 10 - scoreAll * 10 >= 5) {
        scarr.push(CLASS_HALF)
      }
      // 如果数组长度小于5，则push剩下的灰星个数
      while (scarr.length < 5) {
        scarr.push(CLASS_OFF)
      }
      return scarr
    }
  }
}
</script>

引用
在 ShopList.vue 中添加组件 import Star from '@/components/Star/Star'

根据获取的分数，显示星星

5. 结束

下一篇整理登录页面，登录页面分成账号登录与电话短信验证登录

点个赞呗！