前端项目-04-search模块和mock数据

目录

1-搜索模块的商品分类

1.1-搜索页面/组件的三级分类显示和隐藏

1.2-过渡动画

1.3-三级分类请求优化

1.4-参数合并

2-mock数据mockjs数据

---

1-搜索模块的商品分类
 

1.1-搜索页面/组件的三级分类显示和隐藏

       需求分析：当进入到search页面，也需要展示商品的三级分类，但是默认情况下是不显示的，只有鼠标进入到商品全部分类，才会显示商品三级分类，当鼠标移出后，列表隐藏。

技术实现：v-show来控制显示和隐藏
1-search页面引入全局组件三级分类
2-通过v-show控制变量来显示和隐藏（定义显示变量show，默认值是true；当进入页面的时候mounted函数执行，不是home就设置为false，然后通过鼠标进入和移出函数来设置show）

 

 

 

1.2-过渡动画

过渡动画：组件或者元素必须有 v-if或者v-show 指令才有过渡动画效果。
 

 三级分类外层包一个transition标签,name属性定义为sort

1.3-三级分类请求优化
 

       三级分类每次从home组件/页面跳转到其他页面，都会请求一次；每次都请求服务器，会造成服务器压力，为了降低服务器压力，可以把请求放到根组件APP.vue中，只进行请求一次；main,js和APP.vue都是执行一次，main.js是个js文件，不是组件，所以我们不能放置到main.js中，通过调试我们发现main,js中的this是undefined,...只有组件身上才有this.$函数；所以我们从性能角度，将三级分类的请求放置到APP.vue组件中...

1.4-参数合并

复习：params参数，路径占位： path:"/search/:keyword",

       从home主页点击三级分类的手机，发现query参数有参数；但是再在搜索框输入小米时，发现param有参数，但是query参数对象为空

 优化代码地方1：
 

 

完善地方2：先点击三级分类的手机-再输入框输入搜索关键字，要带上query参数

2-mock数据mockjs数据

安装mockjs（指定版本1.1.0）
npm install --save mockjs@^1.1.0 --force

使用mockjs步骤：
1-在src文件夹下新建mock文件夹；
2-准备mock数据（mock图片数据在根目录下的images文件夹中）
3-所以我们图片资源放置到public文件夹中新建images【public文件夹中的内容会原封不到的打包到dist文件夹中】;
4-创建mockServe.js文件；
5-main.js文件引入mockServe.js文件