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

时间:2022-02-07 01:19:12

目录

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)
前端项目-04-search模块和mock数据
 

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

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

 

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

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

 

1.2-过渡动画

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

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

 

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

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

 

1.3-三级分类请求优化
 

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


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

 

1.4-参数合并

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

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

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

 

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

 

 优化代码地方1:
 

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

 

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

 

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

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

 

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

 

 

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文件

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

 

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

 

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

 

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

 

相关文章