项目中的mockjs、轮播图、数组去重总结

一、mockjs模拟数据

官方定义：生成随机数据，拦截 Ajax 请求 （浏览器会拦截向服务器发送的请求）

使用示例：

/*
    先下载好mockjs插件 npm install --save mockjs
    然后在项目中建好一个mock相关的文件夹（其中存放要模拟生成的数据文件和mock服务文件）
*/
//mockServer.js(mock服务文件)
​
//引入mock
import Mock from 'mockjs'
//把JSON数据格式引入进来（即使JSON文件没有对外暴露）
//webpack默认对外暴露的有：图片、JSON数据格式
import banner from '../mock/banner'
​
//mock数据：第一个参数请求地址，第二个参数：请求数据
Mock.mock("/mock/banner", { code: 200, data: banner })
​
//banner.json数据文件
[{
        "id": "1",
        "imgUrl": "/images/banner1.jpg"
    },
    {
        "id": "2",
        "imgUrl": "/images/banner2.jpg"
    },
    {
        "id": "3",
        "imgUrl": "/images/banner3.jpg"
    },
    {
        "id": "4",
        "imgUrl": "/images/banner4.jpg"
    }
]
​
//mock请求JSON数据接口(模拟向服务器发送请求)
export const reqBannerList = () => {
    return mockResquests({
        url: '/banner', //因为配置了baseURL,所以/mock可以省略
        method: 'get'
    })
}
​
//最后在main.js入口文件中引入mockServer.js---mock数据(该文件没有对外暴露，所以直接引入)
import './mock/mockServer.js'

二、Swiper搭配轮播图在项目中使用

Swiper使用步骤： 第一步：引入依赖包【swiper.js|swiper.css】 第二步:静态页面中结构必须完整【container、wrap、slider】，类名不能瞎写 第三步:初始化swiper实例

以上基本使用方法都可以从Swiper官网文档获取 Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

重点：初始化swiper实例在哪里书写?动态效果为什么没有出来？

初始化swiper实例之前，页面中的节点（结构）务必要有， 对于Vue一个组件而言，mounted[组件挂载完毕：相应的结构不就有了吗]

Swiper需要获取到轮播图的节点DOM，才能给swiper轮播添加动态效果， 因为没有获取到节点（轮播图中的图片都是使用v-for动态获取，而v-for遍历所用到的数据是通过通过ajax向服务器发请求，存在异步，所以mounted挂载完后，结构不一定完整）

第一种解决方案：（不推荐）

给mounted中的swiper实例加一个定时器（同样延迟执行），但是这种解决方案存在风险（无法确定用户请求到底需要多长时间），因此没办法确定延迟器时间。

第二种（watch+$nextTick）（完美）

nextTick：在下次DOM更新 循环结束之后，执行延迟回调。在修改数据之后，立即使用这个方法，获取更新后的DOM

watch: {
    //监听bannerList数据变化
    bannerList: {
    //当前handler函数执行：只能保证bannerList数据一级有了，但是没法保证v-for已经结束
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper(".swiper-container", {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },

HTML结构：

<!--banner轮播-->
        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(carsoule, index) in bannerList"
              :key="carsoule.id"
            >
              <img :src="carsoule.imgUrl" />
              <span style="display: none">{{ index }}</span>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
​
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

三、数组去重

在项目中的应用为：你多次点击某一产品的品牌，导致其多次出现在面板上！！！（此时就需要应用数组去重）

//本人想到的第一种解法
    var arr = [1, 2, 3, 4, 5, 2, 7, 5, 1, 8];
    var newArr = [];
    for (let i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i]);
        }
    }
    console.log(newArr); // 1,2,3,4,5,7,8
//第二种解法(Set是ES6提出的一种新的数据结构，类似于数组，但成员的值都是唯一的)
    let arr = [1, 2, 3, 4, 5, 2, 7, 5, 1, 8];
    let newArr = new Set();
    arr.forEach(item => newArr.add(item));
    console.log(newArr); // 1,2,3,4,5,7,8