尚品汇项目第七天

1：mockjs

        11.1 mockjs介绍：mockjs可以生成模拟数据，拦截AJAX请求，可以模拟后台接口的数据。

        11.2 为什么要使用mockjs？

        在前端开发的时候，往往都需要都需要后端提供接口数据来进行相应页面的开发。但这个时候就需要后端先行开发，之后前端才进行开发，从而可能会影响开发效率。Mock.js这个工具完全可以通过我们设置的规则，来提供数据，从而解决了前端不能独立开发的问题。而且当对接后端接口的时候，也不需要修改既有代码。

        11.3 使用方法

        1.在src文件夹中新建mock文件夹

        2.在mock文件夹中新建要模拟的数据如 banner.json，将要使用到的图片资源放到public文件夹images文件夹下

[
    {
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]
        3.在mock中新建mockServe.js文件，编写数据请求路径

//引入mock
import Mock from 'mockjs'
//引入banner.json数据
import banner from '@/mock/banner.json'
 
//创建请求路径
Mock.mock('/mock/banner',{code:200,data:banner})
        4.然后就可以像请求正常接口的方式一样请求数据

12：swiper轮播图

        12.1 swiper是一个可以快速生成轮播图的一个工具。

        12.2 使用方法

        1.引入css和js文件

        2.提供swiper要求的结构

<div class="swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
        3.初始化Swiper实例

<script>        
  var mySwiper = new Swiper ('.swiper', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
        12.3 如果swiper的结构还没有渲染出来，那么执行第三步是没有效果的。如

mounted() {
    // 获取数据
    this.$store.dispatch("bannerList");
    // 初始化Swiper
    new Swiper(".swiper-container", {
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
        因为虽然获取到了数据，但是SwiperDOM结构还没有渲染出来，导致初始化失败

        解决方法：watch + $nextTick：首先监视bannerList数据是否获取成功，如果获取成功，则在DOM渲染完毕之后初始化Swiper（$nextTick）

watch: {
    bannerList: {
      handler() {
        // 数据更新了，但是DOM还没有更新
        this.$nextTick(() => {
          new Swiper(".swiper-container", {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },