【Vue项目】尚品汇（三）Home模块+Floor模块+Swiper轮播图

写在前面

今天是7.23，这一篇内容主要完成了Home模块和部分Search模块的开发，主要是使用了swiper轮播图插件获取vuex仓库数据展示组件以及其他信息。

1 Search模块

1.1 Search模块的全部商品分类的显示

需求分析 ：在home模块中，需要显示商品分类的三级联动全局组件，而在search模块则不需要。

①在Search组件中引入typeNav全局组件，并在一级分类元素上添加v-show，在data中添加show数据

<div class="sort" v-show="show">

data() {
    return {
      curIndex: -1,
      show: true
    };
  },

②在TypeNav组件的mounted函数中根据当前路由修改show的值

mounted() {
    // 通知vuex向服务器发送数据，并存储于home数据仓库中
    this.$store.dispatch("CategoryList");
    // 当前组件不是home组件则不显示
    if(this.$route.name!='home') {
      this.show = false;
    }
  },

1.2 Search模块三级联动模块鼠标进出效果

在三级目录父元素上添加leaveShow和enterShow函数

<div @mouseleave="leaveShow()" @mouseenter="enterShow()">

并在方法中定义，其中leavaShow函数需要对当前路由进行判断，home组件的三级联动模块在鼠标移开的时候是不需要消失的

enterShow() {
      this.show = true;
    },
    leaveShow() {
      this.curIndex = -1;
      if(this.$route.name != 'home') {
        this.show = false;
      }
    },

1.3 Search模块中三级联动模块的过渡动画

transition只能和v-show或者v-if一起使用

<transition name="sort">
  <div class="sort" v-show="show">
      <div class="all-sort-list2">

          <div class="item"
              v-for="(c1, index) in CateGoryList" :key="c1.categoryId"
              :class="{cur:index==curIndex}"
              @click="goSearch"
          >

              <h3 @mouseenter="changeIndex(index)">
                  <a :data-cateGoryName="c1.categoryName" :data-cateGory1Id="c1.categoryId">{{c1.categoryName}}</a>
              </h3>
              <div class="item-list clearfix" :style="{display:index==curIndex?'block':'none'}">
                  <div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
                      <dl class="fore">
                          <dt>
                              <a :data-cateGoryName="c2.categoryName" :data-cateGory2Id="c2.categoryId">{{c2.categoryName}}</a>
                          </dt>
                          <dd>
                              <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
                                  <a :data-cateGoryName="c3.categoryName" :data-cateGory3Id="c3.categoryId">{{c3.categoryName}}</a>
                              </em>
                          </dd>
                      </dl>
                  </div>
              </div>
          </div>

      </div>
  </div>
</transition>

定义动画样式：

    // 过渡动画样式
    // 过渡动画开始状态
    .sort-enter{
      height: 0px;
    }
    // 过渡动画结束状态
    .sort-enter-to{
      height: 461px;
    }
    // 定义动画的时间、速率等
    .sort-enter-active{
      transition: .2s linear;
      // 可以解决文字的显示问题
      overflow: hidden;
    }

1.5 TypeNav列表优化

存在的问题：在home和search路由切换的过程里面，换出的路由会被销毁，换入的路由会重新创建，如此一来每次都需要向服务器发送请求请求列表数据，这显然是不合理的，我们需要的是每次使用只请求一次数据，然后放入输入仓库供各模块使用即可。

分析：因为要求只请求一次数据，所以可以在App根组件的mounted中向数据仓库进行派发acion的操作，TypeNav全局组件的mounted就不需要进行重复的操作了。

App.vue

<template>
  <div id="app">
    <Header></Header>
    <router-view></router-view>
    <Footer v-show="$route.meta.showFooter"></Footer>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  mounted() {
    this.$router.push('/home');
    this.$store.dispatch('CategoryList')
  },
}
</script>

<style>
</style>

TypeNav模块

  mounted() {
    // 通知vuex向服务器发送数据，并存储于home数据仓库中
    // App根组件请求一次，这里注释掉了
    // this.$store.dispatch("CategoryList");

    // 当前组件不是home组件则不显示
    if (this.$route.name != "home") {
      this.show = false;
    }
  },

1.6 合并参数

分析：现在Header组件和TypeNav组件都可以通过goSearch方法进行路由跳转到search路由，但是Header组件会向路由通过params参数传递搜索关键字，而三级联动TypeNav组件则是通过query参数向路由传递categoryname以及三级的categoryid参数，因此需要对两种参数进行合并，如果先点击三级联动再点击搜索、或者先点击搜索再点击三级联动，出现的效果应该是两种参数的集合。

实现：在进行路由跳转之前判断一下当前路由是否含有另一个组件的params或者query参数，如果存在则添加到路由器中一起进行传递。

Header模块（使用的是params参数）

    goSearch() {
      let location = {
        name: "search"
      }
      let params = {
        keyWord: this.keyWord
      }
      location.params = params
      if(this.$route.query) {
        location.query = this.$route.query
      }

      this.$router.push(location);
    }

TypeNav模块（使用的是query参数）

    goSearch(event) {
      let element = event.target;
      let {categoryname, category1id, category2id, category3id} =
          element.dataset;
      if (categoryname) {
        // 整理参数
        let location = {
          name: "search",
        };
        let query = {
          categoryname: categoryname,
        };
        if (category1id) {
          query.category1id = category1id;
        } else if (category2id) {
          query.category2id = category2id;
        } else {
          query.category3id = category3id;
        }
        location.query = query;
        // 合并参数
        if (this.$route.params) {
          location.params = this.$route.params
        }
        // 转发路由传递参数
        this.$router.push(location);
      }

注意！！！

想要获取到转发路由器的query参数，需要在路由配置中做如下配置：

path: '/search:keyWord'

否则将无法获取到keyWord参数

2 Home模块

2.1 ListContainer轮播图组件

2.1.1 Mock.js 生成随机书籍 拦截Ajax请求

①安装mockjs（没有点）

npm install --save mockjs

②在项目src文件目录下建立mock文件夹

③将需要模拟的数据以json的形式放在mock下

④并将其中的静态资源放到public下面，这是因为webpack打包之后所有的静态资源会被放到public下面

⑤在mock下面调用引入Mock的mock方法

mock/service.js

import Mock from 'mockjs'

import banner from './banner.json'
import floor from './floor.json'

Mock.mock('/mock/banner', {code: 200, data: banner})
Mock.mock('/mock/floor', {code: 200, data: floor})floor)

webpack中json、图片是默认暴露的

⑥在main.js入口文件中引入mock

main.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import TypeNav from '@/components/TypeNav'
import store from '@/store'
import '@/mock/service'

Vue.config.productionTip = false;
Vue.component(TypeNav.name, TypeNav);

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

2.1.2 获取Mock中Banner轮播图的数据

①在home数据仓库中添加actions和mutations以及state

store/home/index.js

import {reqCategoryList} from '@/api'
import {reqBannerList} from "@/api";

const actions = {
    // 通过api中的函数调用，向服务器发送请求，获取服务器数据
    async CategoryList(context) {
        let result = await reqCategoryList();
        if(result.code === 200) {
            context.commit('CATEGORYLIST', result.data)
        }
    },
    async BannerList(context) {
        let result = await reqBannerList();
        if(result.code === 200) {
            context.commit('BANNERLIST',result.data)
        }
    }
}

const mutations = {
    CATEGORYLIST(state, CateGoryList) {
        state.CateGoryList = CateGoryList;
    },
    BANNERLIST(state, BannerList) {
        state.BannerList = BannerList
    }
}

const getters = {

}

const state = {
    CateGoryList: [],
    BannerList: []
}

// 将模块仓库内容对外暴露
export default {
    state,
    actions,
    mutations,
    getters
}

②在ListContainer组件中利用mapState生成对应计算属性

  computed: {
    // mapState生成vuex仓库数据的计算属性
    ...mapState({
      BannerList: (state) => {
        return state.home.BannerList
      }
    })
  }

③在轮播图中展示数据

          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in BannerList" :key="banner.id">
              <img :src="banner.imgUrl"/>
            </div>
          </div>

2.1.3 swiper 轮播图插件

①swiper插件安装

npm i --save swiper@5

更高版本的swiper需要vue3

②引入swiper样式

main.js

import 'swiper/css/swiper.css'

③创建轮播图结构

        <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(banner, index) in BannerList" :key="banner.id">
              <img :src="banner.imgUrl"/>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>

④new swiper：轮播图添加动态效果

    var mySwiper = new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })

☆在哪里创建swiper实例呢？

1.在mounted生命周期钩子中：结果轮播图无法使用，这是因为mounted是在页面渲染之后运行，但是for循环中的内容牵扯到计算属性需要动态地渲染，这就使得轮播图插件渲染的时候for循环还没有进行，也就是还没有数据，因而轮播图无法呈现。

2.在updated生命周期钩子中：轮播图正常使用，结合updated是在数据动态更新后完成，会导致同一个组件中的其他数据刷新引起轮播图的刷新。

3.使用watch监视：轮播图无法使用，分析其原因，在于监视属性只能保证BannerList数据发生了变化，但是不能保证for渲染完成，这就使得swiper在for循环之前进行了渲染。

  watch: {
    BannerList: {
      handler(newVal, oldVal) {
        var mySwiper = new Swiper('.swiper-container', {
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },

          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })
      }
    }
  }

4.完美解决方案：watch + nextTick：nextTick包裹的函数会在下次DOM更新、循环结束之后执行回调。在修改数据之后立即使用这个方法，获取更新的DOM。

watch: {
    BannerList: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            // 自动播放
            autoplay:true,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable:true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
      }
    }
  }

2.2 Floor组件

2.2.1 创建访问请求的api

/api/index.js

export const reqFloorList = () => {
    return mockRequests({
        url: '/floor',
        method: 'get'
    })
}

2.2.2 Vuex三大件

actions

    async FloorList(context) {
        let result = await reqFloorList();
        if (result.code === 200) {
            context.commit('FLOORLIST', result.data)
        }
    }

mutations

    FLOORLIST(state, FloorList) {
        state.FloorList = FloorList
    }

state

const state = {
    CateGoryList: [],
    BannerList: [],
    FloorList: []
}

2.2.3 在App.vue中派发floor的actions

this.$store.dispatch('FloorList')

这样做的好处是应用执行期间只需请求一次，每次路由跳转不必再发送请求，只需向vuex仓库中请求数据即可

2.2.4 在home组件中使用mapstate生成仓库数据的计算属性

    computed: {
      ...mapState({
        FloorList: (state) => {
            return state.home.FloorList
        }
      })
    }

2.2.5 生成floor组件，并进行数据的传送

    <div>
        <!-- 包含三级联动加顶部导航栏 -->
        <TypeNav/>
        <!-- 包含轮播图加右侧尚品汇快报 -->
        <ListContainer/>
        <!-- 今日推荐模块 -->
        <TodayRecommend/>
        <!-- 热卖排行模块 -->
        <Rank/>
        <!-- 猜你喜欢模块 -->
        <Like/>
        <!--  -->
        <Floor v-for="(floor, index) in FloorList" :key="floor.id" :floor="floor"/>
    </div>

2.2.6 Floor props接收数据，并进行一系列数据显示

<script>
import Swiper from "swiper";
export default {
  props: ['floor'],
  mounted() {
    var mySwiper = new Swiper ('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: true,
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },

      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
  }
}
</script>

注意这里的轮播图创建实例可以直接写在mounted上，这是因为数据是home组件传来的不需要动态生成，即创建实例的时候for循环不需要等待异步请求获取数据，而提前完成了渲染

展示

<template>
  <!--楼层-->
  <div class="floor">
    <div class="py-container">
      <div class="title clearfix">
        <h3 class="fl">{{ floor.name }}</h3>
        <div class="fr">
          <ul class="nav-tabs clearfix">
            <li :class="index == 0 ? 'active':'' " v-for="(nav, index) in floor.navList" :key="index">
              <a :href="nav.url" data-toggle="tab">{{nav.text}}</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane">
          <div class="floor-1">
            <div class="blockgary">
              <ul class="jd-list">
                <li v-for="(keyword, index) in floor.keywords" :key="index">{{ keyword }}</li>
              </ul>
              <img :src="floor.bigImg"/>
            </div>
            <div class="floorBanner">
              <div class="swiper-container" id="floor1Swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="(carousel, index) in floor.carouselList" :key="index">
                    <img :src="carousel.imgUrl">
                  </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
            </div>
            <div class="split">
              <span class="floor-x-line"></span>
              <div class="floor-conver-pit">
                <img :src="floor.recommendList[0]"/>
              </div>
              <div class="floor-conver-pit">
                <img :src="floor.recommendList[1]"/>
              </div>
            </div>
            <div class="split center">
              <img :src="floor.bigImg"/>
            </div>
            <div class="split">
              <span class="floor-x-line"></span>
              <div class="floor-conver-pit">
                <img :src="floor.recommendList[2]"/>
              </div>
              <div class="floor-conver-pit">
                <img :src="floor.recommendList[3]"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

2.3 共用组件提取Carsousel

可以观察到，Floor中和Home组件中都使用了轮播图，代码重复率较高，因此可以将代码拿出来成为一个公共的组件：Carsousel

components/Carsousel/index.vue

<template>
  <div class="swiper-container" ref="mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
        <img :src="carousel.imgUrl"/>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  name: 'Carouse',
  props: ['list'],
  watch: {
    list: {
      immediate: true,
      handler() {
        this.$nextTick(() => {
          var mySwiper = new Swiper('.swiper-container', {
            loop: true, // 循环模式选项
            autoplay: true,
            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable :true,
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
          })
        })
      }
    }
  }
}
</script>

<style scoped>

</style>

Home组件中的轮播图数据需要动态地从vuex中获取，因此采用watch+nextTick的方式。而Floor组件是从父组件中获取的数据，因此不需要采用这种方式，但是需要开启immediate模式，因为不设置的话计算属性检测不到开始的时候list的变化。综合两种写法便成了上面的代码。