开发Search模块中的TypeNav商品分类菜单（过渡动画效果）、开发Home首页ListContainer组件与Floor组件等【VUE项目】

复习：

• 商品分类的三级列表由静态变为动态形式【获取服务器数据：解决跨域问题】
• 函数防抖与节流【面试频率很高】
• 路由跳转：声明式导航（router-link）、编程式导航
• 编程式导航解决这个问题：自定义属性

1. 开发Search模块中的TypeNav商品分类菜单（过渡动画效果）

过渡动画：前提组件 | 元素务必要有 v-if | v-show 指令才可以进行过渡动画

mounted() {
    // 通知Vuex发请求，获取数据，存储于仓库当中
    this.$store.dispatch("categoryList");
    // 当组件挂载完毕，让show属性变为false
    // 如果不是home路由组件，将typeNav隐藏
    if (this.$route.path != "/home") {
      this.show = false;
    }
  },
  
methods: {
	enterShow() {
	      if (this.$route.path != "/home") {
	        this.show = true;
	      }
	    },
	    // 当鼠标离开的时候，让商品分类列表进行隐藏
	    leaveShow() {
	      this.currentIndex = -1;
	      // 判断如果是Search路由组件的时候才会执行
	      if (this.$route.path != "/home") {
	        this.show = false;
	      }
	    },
}

// 过渡动画的样式
    // 过渡动画开始状态（进入）
    .sort-enter {
      height: 0;
    }
    // 过渡动画结束（进入）
    .sort-enter-to {
      height: 461px;
    }
    // 定义动画的时间、速率
    .sort-enter-active {
      transition: all .5s linear;
    }

2. 优化三级列表

在App根组件当中发请求【根组件mounted】执行一次

3. 合并参数

// 判断：如果路由跳转的时候，带有params参数，捎带脚传递过去
        if (this.$route.params) {
          location.params = this.$route.params
          // 整理完参数
          location.query = query;
          // 路由跳转
          this.$router.push(location);
        }
// 代表的是如果有query参数也带过去
      if(this.$route.query){
        let location = {
          name: 'search',
          params: {keyWord: this.keyWord || undefined}
        }
        location.query = this.$route.query
        this.$router.push(location)
      }

4. 开发Home首页ListContainer组件与Floor组件

https://docschina.org/
我们需要知道：服务器返回的数据（接口）只有商品分类菜单的分类数据，对于ListContainer组件与Floor组件的数据服务器没有提供

mock数据（模拟）：如果你想mock数据，需要用到一个插件mockjs

安装：npm i mockjs
使用步骤：
（1）在项目当中src文件夹中创建mock文件夹
（2）准备JSON数据（mock文件夹中创建相应的JSON文件）— 格式化一下，别留空格（否则跑不起来）
（3）把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候，会把相应的资源原封不动的打包到dist文件夹中】
（4）创建mockServe.js通过mockjs插件实现模拟数据
（5）mockServe.js文件在入口文件中引入（至少需要执行一次，才能模拟数据）

// 引入mockjs模块
import Mock from 'mockjs'
// 把JSON数据格式引入进来[JSON数据格式根本没有对外暴露，但是可以引入]
// webpack默认对外暴露的：图片、JSON数据格式
import banner from './banner.json'
import floor from './floor.json'

// mock数据:第一个参数：请求地址  第二个参数：请求数据
Mock.mock("/mock/banner", {code: 200, data: banner}); //模拟首页轮播图的数据
Mock.mock("/mock/floor", {code: 200, data: floor});

5. ListContainer组件开发重点

安装Swiper插件：最新版本6，安装的是swiper@5

npm i --save swiper@5

解决轮播图问题

1. update（不推荐）：假如说这个组件还有其他响应式数据，只要响应式数据一发生变化，又在重新new实例
2. 异步请求setTimeout（不推荐）：因为轮播图下面得分页器小圆圈需要等1s中才能点击
3. 完美解决方案：
   watch + nextTick ：数据监听，监听已有数据变化

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

this.$nextTick(() => {
          // 当你执行这个回调的时候：保证服务器数据回来了，v-for执行完毕了【轮播图的结构一定有了】
          var mySwiper = new Swiper(
            document.querySelector(".swiper-container"),
            {
              loop: true,
              // 如果需要分页器
              pagination: {
                el: ".swiper-pagination",
                clickable: true, //点击小圆圈也可以切换
              },
              // 如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
              },
            }
          );
        });

6. 开发floor组件

切记：仓库当中的state的数据格式，别乱写，数据格式取决于服务器返回的数据

1. getFloorList这个action在哪里触发
   是需要在Home路由组件当中发的，不能在Floor组件内部发action，因为我们需要v-for遍历floor组件
2. v-for 也可以在自定义标签当中使用
3. 组件通信的方式有哪些？（面试频率极高）
   （1）props：用于父子组件通信
   （2）自定义事件：$ on、$ emit 可以实现子给父通信
   （3）全局事件总线：$ bus 全能
   （4）pubsub-js：vue当中几乎不用 全能
   （5）插槽
   （6）vuex

7. 把首页当中的轮播图拆分为一个共用全局组件

切记：以后在开发项目的时候，如果看到某一个组件在很多地方都使用，你把它变为全局组件，这样的好处是，注册一次，可以在任意地方使用，共用的组件 | 非路由组件放到components文件夹中

8. Search模块开发

1. 先写静态页面 + 静态组件拆分出来
2. 发请求（API）
3. vuex（三连环）
4. 组件获取仓库数据，动态展示数据

9. 动态开发面包屑中的分类名

1. 编程式导航路由跳转【自己跳自己】
2. 动态开发面包屑中的关键字
   （1）当面包屑中的关键字清除以后，需要让兄弟组件Header组件中的关键字清除，涉及到了组件通信：
   props：父子
   自定义事件：子父
   vuex：仓库数据
   插槽：父子
   $ bus：全局事件总线（万能）

10. 排序操作

1：综合，2：价格
asc：升序，desc：降序

1. order属性的属性值最多有多少种写法：

1：asc（第一种）
1：desc（第二种）
2：asc（第三种）
2：desc（第四种）

2. 考虑的问题
   （1）谁应该有类名？
   通过order属性值当中是包含1（综合）|包含2（价格）
   （2）谁应该有箭头？
   谁有类名，谁就有箭头
   （3）箭头用什么制作出来？
   阿里图标库

11. 分页器静态组件

1. 为什么很多电商平台使用分页
2. 分页器展示，需要哪些数据（条件）？

• 需要知道当前是第几个：pageNo字段进行代表
• 需要知道每一个需要展示多少条数据：pageSize字段进行代表
• 需要知道整个分页器一共有多少条数据：total字段进行代表—【获取另外一条信- 息：一共有多少页】
• 需要知道分页器连续页码的个数：5|7【奇数】，因为奇数对称

总结：对于分页器而言，自定义前提需要知道四个前提条件。
pageNo：当前第几个
pageSize：代表每一页展示多少条数据
total：代表整个分页一共要展示多少条数据
continues：代表分页连续页码个数

举例子：每一页3条数据 一共90条数据 【一共是30页】

3. 自定义分页器，在开发的时候先自己传递假的数据进行调试，调试成功以后再用服务器数据
4. 对于分页器而言，很重要的地方即为【算出：连续页面起始数字和结束数字】
   例：当前是第8页：6 7 8 9 10；当前是第15页：13 14 15 16 17

前提：分页器数字没有0，当然也没有负数
假如：当前是第1页 1 2 3 4 5
假如：当前是第2页 0 1 2 3 4（但是分页器没有0）所以得往前挪一个 1 2 3 4 5

5. 分页器动态展示
   分为上中下
6. 开发某一个产品的详情页面
   （1）静态组件（详情页的组件还未注册为路由组件）
   当点击商品的图片的时候，跳转到详情页面，在路由跳转的时候需要带上产品的Id给详情页面

• 发请求
• vuex
• 动态展示组件

（2）API—>请求接口
（3）vuex—>获取产品详情信息
vuex中还需要新增一个模块detail，需要回到大仓库当中进行合并

7. 加入购物车按钮
   （1）路由跳转之前发请求
   （2）成功路由跳转与参数传递

浏览器存储功能：HTML5中新增的，本地存储和会话存储
本地存储：持久化的-----5M
会话存储：并非持久-----会话结束数据就消失

（3）失败提示失败信息
8. addCartSuccess
（1）查看详情
（2）查看购物车
9. 购物车
（1）购物车静态组件-需要修改样式解构
调整css让各个项目对齐，删除第三项
（2）向服务器发起ajax请求，获取购物车数据，操作vuex三连环、组件获取数据展示数据
发现：发请求的时候，获取不到你购物车里面的数据，因为服务器不知道你是谁
（3）UUID临时游客身份
（4）动态展示购物车
数据格式有点不完美
10. 修改购物车产品的数量（需要发请求：参数理解）
11. 修改产品个数【函数节流】
12. 删除某一个产品
13. 修改产品的状态
14. 删除选中全部产品的操作
注意：没有一次删除很多产品的接口，但是有通过ID可以删除产品的接口【一次删一个】

Promise.all([p1, p2, p3])

p1|p2|p3：每一个都是Promise对象，如果有一个Promise失败，都失败；如果都成功，返回成功

15. 全选操作