目录
  1. 1. 1 开发search模块中的TypeNav商品分类菜单
    1. 1.1. 1.1search模块中的TypeNav商品分类菜单显示与否
    2. 1.2. 1.2过渡动画效果
  2. 2. 2现在咱们的商品分类三级列表可以优化
  3. 3. 3合并参数 params与query参数
  4. 4. 4开发Home组件中的listcontainer组件,与floor组件
电商项目-day4

1 开发search模块中的TypeNav商品分类菜单

1.1search模块中的TypeNav商品分类菜单显示与否

是否显示用一些方法来实现,

1.2过渡动画效果

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

2现在咱们的商品分类三级列表可以优化

将this.$store.dispatch(“categoryList”);放在app.vue【根组件mounted】中,只执行一次

3合并参数 params与query参数

发现一个问题 在header中的this.$router.push()在同一路由下不能跳转,查了一下发现有用导航守卫或者watch的,搞了半天仍未解决!!!!但是在typenav中的就能一直访问,我是真的懵逼了,有的说重写push,我也弄了,也不行。

4开发Home组件中的listcontainer组件,与floor组件

这里需要知道一件事情:服务器返回的数据(接口)只有商品分类的数据,对于上面的俩组件的数据没有
mock:模拟数据:如果你想mock数据,需要用到一个插件mockjs
使用步骤:

  1. 在项目当中src文件夹中创建一个叫mock的文件夹,提供假数据
  2. 准备JSON数据(在mock文件夹中创建相应的数据)—格式化,若有空格,不行。
  3. 把mock数据需要的图放置在public文件夹中【public】在打包的时候,会把相应的资源原封不动打包到dist文件夹中。
  4. 穿件mockeServer.js通过mockj插件mockjs插件实现模拟数据
  5. 把mockServer.js文件在入口文件中引入(至少需要执行一次)
  6. 根据mapState在组件中引入数据
文章作者: ruqiuvy
文章链接: https://github.com/yiyeruqiuvy/2022/05/07/%E7%94%B5%E5%95%86%E9%A1%B9%E7%9B%AE-day4/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 一夜入秋非生之所
打赏
  • 微信
  • 支付寶

评论