从零开始，搭建一个简单的购物平台（十五）前端商城部分

从零开始，搭建一个简单的购物平台（十四）前端商城部分：
https://blog.csdn.net/time_____/article/details/108545330
项目源码（持续更新）：https://gitee.com/DieHunter/myCode/tree/master/shopping

上篇文章对主页和部分公共组件进行了界面和功能实现，之前对项目用到的工具类，路由，全局状态进行了封装，这篇文章将对商品分类，商品主题界面进行介绍，实现过程同样是用到了组件内单独异步请求，减少数据堵塞

商品分类：

界面样式及效果

注意：由于分类商品列表和主页的商品不会时常发生变化，我们可以使用Vue中的keep-alive组件，它的作用是在组件切换时将状态保留在内存中，防止重复渲染DOM，也就是保存组件不被销毁，防止每次加载页面都做不必要的请求，实现效果如下

在app.vue中添加keep-alive组件包裹路由组件

这里我们将分类列表左右分别分成两个组件，组成一个tab切换栏，通过左边的分类菜单进行选择切换，从而重新渲染右边的商品列表

• 左边切换组件leftMenu.vue

   

• 右边商品列表组件rightShop.vue

   

• 将商品分类页面加入到router配置中，与主页和购物车界面同级page下新建kind页面，商品分类页面就已经完成 

   

商品主题

商品主题页是用户通过点击首页的轮播图和主题模块进入到主题商品列表子页面，其中商品列表的单个商品可以通过主页的组件进行复用

其中themeList是广告标题图片，通过shopType区分首页的商品列表和主题页的商品列表，从而引入shopItem组件

• themeList.vue广告标题
  
   
• 最后新建shopTheme的page页面，引入之前两个组件

  至此商品分类和主题列表页面就实现完成
   

最后提供商品数据库数据下载（都是一个一个手动输入的），远程仓库地址，可以通过Robo3t进行导入
本篇文章结束，下一篇将介绍商品详情页的实现