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

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

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

商品分类:

界面样式及效果

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

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

<keep-alive include="Home,Kind">
   <router-view class="appView"></router-view>
</keep-alive>

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

  • 左边切换组件leftMenu.vue
    <template>
      <div id="left">
        <div
          v-for="(item,index) in list"
          :key="index"
          @click="sel(item.val)"
          :class="item.val==onesel?'selec':''"
        >{{item.name}}</div>
      </div>
    </template>
    
    <script>
    import Config from "../../config/config";
    import ShopType from "../../config/shopType";
    const { EventName } = Config;
    export default {
      data() {
        return {
          list: ShopType.shopType,onesel: "0"//默认选中第一项
        };
      },methods: {
        sel(item) {
          if (this.onesel == item) return;//防止重复点击同一个选项
          this.onesel = item;
          this.$events.emitEvent(EventName.SelectKind,item);//触发选中商品类型事件
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    #left {
      .w(215);
      height: 100%;
      position: fixed;
      .f_s(34);
      border-right: unit(1 / @pxtorem,rem) solid #d6d6d6;
      margin-right: unit(215 / @pxtorem,rem);
      div {
        .h(125);
        .l_h(125);
        text-align: center;
      }
      .selec {
        border-left: unit(8 / @pxtorem,rem) solid @mainColor;
        text-indent: unit(-8 / @pxtorem,rem);
        color: @mainColor;
      }
    }
    </style>

     

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

    <template>
      <transition name="fade">
        <div class="rightShop" v-if="transitionSwitch">
          <h2 id="head">
            <img :src="imgPath+themeList.shopPic" v-if="themeList.shopPic" alt />
          </h2>
          <ul>
            <li v-for="(item,index) in list" :key="index" @click="clickHandler(item)">
              <img :src="imgPath+item.shopPic" />
              <span>{{item.shopName}} {{item.shopScale}}克</span>
            </li>
          </ul>
        </div>
      </transition>
    </template>
    <script>
    import Config from "../../config/config";
    import RightShopBussiness from "./bussiness";
    const { EventName } = Config;
    export default {
      data() {
        return {
          themeList: {},list: [],imgPath: Config.RequestPath,rightShopBussiness: null,transitionSwitch: true,beforeIndex: 0
        };
      },created() {
        this.rightShopBussiness = new RightShopBussiness(this);
        this.rightShopBussiness.initPageConfig(this.beforeIndex);
        this.$events.onEvent(EventName.SelectKind,data => {//监听选择种类事件
          this.transitionSwitch = false;//通过v-show实现fade动画效果
          this.rightShopBussiness.initPageConfig(data);
        });
      },destroyed() {
        this.$events.offEvent(EventName.SelectKind);//销毁事件监听
      },methods: {
        clickHandler(data) {
          this.$router.push({ name: "ShopInfo",query: { ...data } });
        }
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .rightShop {
      padding-left: unit(215 / @pxtorem,rem);
      img {
        width: 90%;
        display: block;
        margin: unit(40 / @pxtorem,rem) auto;
      }
      ul {
        margin-top: unit(70 / @pxtorem,rem);
        margin-bottom: unit(110 / @pxtorem,rem);
        li {
          display: inline-block;
          width: 33%;
          vertical-align: top;
          text-align: center;
          img {
            width: 70%;
            margin: 0 auto;
          }
          span {
            .f_s(28);
            text-align: center;
          }
        }
      }
    }
    </style>

     

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

    <template>
      <div>
        <Top title="分类"></Top>
        <div class="content">
          <leftMenu></leftMenu>
          <rightShop></rightShop>
        </div>
        <TabBar></TabBar>
      </div>
    </template>
    
    <script>
    import TabBar from "../../components/tabBar/tabBar";
    import Top from "../../components/top/top";
    import leftMenu from "../../components/leftMenu/leftMenu";
    import rightShop from "../../components/rightShop/rightShop";
    export default {
      name: "Kind",components: {
        Top,leftMenu,rightShop,TabBar
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    </style>

     

商品主题

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

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

  • themeList.vue广告标题
    <template>
      <div class="themeContent">
        <h2>
          <img v-if="themeList.shopPic" :src="imgPath+themeList.shopPic" alt />
        </h2>
      </div>
    </template>
    
    <script>
    import Config from "../../config/config";
    import ThemeListBussiness from "./bussiness";
    export default {
      data() {
        return {
          themeList: {},themeListBussiness: null
        };
      },created() {
        this.themeListBussiness = new ThemeListBussiness(this);
        this.themeListBussiness.initPageConfig(this.$route.query);
      },methods: {}
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .themeContent {
      h2 {
        width: 100%;
        img {
          width: 100%;
        }
      }
    }
    </style>

     
  • 最后新建shopTheme的page页面,引入之前两个组件
    <template>
      <div>
        <Top :title="title" :isBack="true"></Top>
        <div class="content">
          <ThemeList></ThemeList>
          <ShopItem :shopType="shopType"></ShopItem>
        </div>
      </div>
    </template>
    
    <script>
    import Top from "../../components/top/top";
    import ThemeList from "../../components/themeList/themeList";
    import ShopItem from "../../components/shopItem/shopItem";
    export default {
      name: "ShopTheme",data() {
        return {
          shopType: this.$route.query._type,title: this.$route.query._shopName
        };
      },ThemeList,ShopItem
      }
    };
    </script>
    
    <style lang="less" scoped>
    @import "../../style/init.less";
    .content {
      padding-bottom: 0;
    }
    </style>

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

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

原文地址:https://blog.csdn.net/time_____

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“基于nodejs...
本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs怎么实现目录不存在自动创建”文章能帮助大...
这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这...
本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs如何实现定时删除文件”文章能帮助大家解决疑惑...
这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来...
今天小编给大家分享一下如何检测nodejs有没有安装成功的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
本篇内容主要讲解“怎么安装Node.js的旧版本”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎...
这篇“node中的Express框架怎么安装使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家...
这篇文章主要介绍“nodejs如何实现搜索引擎”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs如何实现搜索引擎...
这篇文章主要介绍“nodejs中间层如何设置”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“nodejs中间层如何设置”文...
这篇文章主要介绍“nodejs多线程怎么实现”,在日常操作中,相信很多人在nodejs多线程怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
这篇文章主要讲解了“nodejs怎么分布式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“nodejs怎么分布式”...
本篇内容介绍了“nodejs字符串怎么转换为数组”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情...
这篇文章主要介绍了nodejs如何运行在php服务器的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇nodejs如何运行在php服务器文章都...
本篇内容主要讲解“nodejs单线程如何处理事件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nodejs单线程如何...
这篇文章主要介绍“nodejs怎么安装ws模块”,在日常操作中,相信很多人在nodejs怎么安装ws模块问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法...
本篇内容介绍了“怎么打包nodejs代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!
本文小编为大家详细介绍“nodejs接收到的汉字乱码怎么解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“nodejs接收到的汉字乱码怎么解决”文章能帮助大家解...
这篇“nodejs怎么同步删除文件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇...
今天小编给大家分享一下nodejs怎么设置淘宝镜像的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希