笔记day4

1 复习

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

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

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

3 商品分类三级列表可以进行优化

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

4 合并params与query参数

5 开发Home首页中的ListContainer组件与Floor组件

• 但是：服务器返回的数据（接口）只有商品分类菜单分类数据，对于这两个组件的数据，服务器是没有提供的
• mock数据（模拟）：如果想要模拟数据，需要用到插件mock.js（生成随机数据，拦截Ajax请求）
• 前端常用的库：https://docschina.org，印记中文
• mockjs.com官网：文档 / https://www.bootcdn.cn
• 前端mock数据不会和服务器进行任何通信，浏览器不会让你这次Ajax请求发送到服务器上

使用步骤：

1. 在项目当中src文件夹中创建mock文件夹
2. 准备json数据，在mock文件夹中创建相应的json文件，格式化一下，别留有空格（跑不起来）
3. 把mock数据需要的图片放到public文件夹中【public文件夹在打包时，会将相应的资源原封不动打包到dist文件夹中】
4. 开始mock虚拟数据，通过mockjs插件模块实现，创建mockServer.js
5. mockServer.js文件在入口文件中引入（至少执行一次，才能模拟数据）

6 swiper

官网：https://swiper.com.cn

1. 引包（相应JS|CSS）
2. 页面中结构务必要有
3. 页面当中务必要有结构：new Swiper实例【轮播图添加动态效果】

• ListContainer组件开发重点
• 安装Swiper插件：安装swiper@5，cnpm install --save swiper@5