黑马小程序品优购商城项目分析

本文档详述了黑马电商品优购小程序的实现逻辑,包括项目页面搭建、首页、分类页面、商品列表、商品详情、购物车、收藏、订单、搜索等模块的功能实现,涉及小程序原生mina框架、数据传递、事件处理、页面刷新等功能。
摘要由CSDN通过智能技术生成

黑马电商品优购小程序

几日前完成了该项目,整理了下大概的逻辑思路,希望和大家一起交流学习,文档中不足之处希望各位不吝赐教。

该项目使用小程序原生mina框架

项目页面的搭建

页面名称 文件
首页 index
分类 category
商品列表 goods_list
商品详情 goods_detail
购物车 cart
收藏 collect
订单 order
搜索 search
个人中心 user
意见反馈 user
登录 login
授权 auth
结算 pay
  • 项目文件目录

在这里插入图片描述

首页

在这里插入图片描述

分类页面

在这里插入图片描述

1.点击左侧菜单切换内容

  1. 获取被点击的标题身上的索引

  2. 给data中的currentIndex赋值

  3. 根据不同的索引来渲染右侧的商品内容

     handleItemTap (e) {
         
        const {
          index } = e.currentTarget.dataset;
        let rightContent = this.Cates[index].children;
        this.setData({
         
          currentIndex: index,
          rightContent,
          scrollTop: 0
        })
    
      }
    

商品列表

在这里插入图片描述

Tab栏

在这里插入图片描述

1.自定义组件传值

  • ⽗组件通过属性的⽅式给⼦组件传递参数、⼦组件通过事件的⽅式向⽗组件传递参数
  • ⽗组件 把数据 { {tabs}} 传递到 ⼦组件的 tabItems 属性中
  • ⽗组件 监听 onMyTab 事件
  • ⼦组件 触发 bindmytap 中的事件
  • ⾃定义组件触发事件时,需要使⽤ triggerEvent ⽅法,指定 事件名 、 detail 对象
  • ⽗ -> ⼦ 动态传值 this.selectComponent("#tabs");

2.Tab栏切换

  • 获取被点击的标题索引

  • 修改源数组

  • 赋值到data中

  • const {
          index } = e.detail;
    let {
          tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
         
      tabs
    })
    

3.下拉页面功能

  • ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true
    在这里插入图片描述

    • ⻚⾯的JS中,绑定事件 onPullDownRefresh
    // 下拉刷新事件 
      onPullDownRefresh () {
         
        // 1 重置数组
        this.setData({
         
          goodsList: []
        })
        // 2 重置页码
        this.QueryParams.pagenum = 1;
        // 3 发送请求
        this.getGoodsList();
      }
    
  1. 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件

  2. 加载下⼀⻚功能

    // 页面上滑 滚动条触底事件
      onReachBottom () {
         
        //  1 判断还有没有下一页数据
        if (this.QueryParams.pagenum >= this.totalPages) {
         
          // 没有下一页数据
          wx.showToast({
          title: '没有下一页数据' });
        } else {
         
          // 还有下一页数据
          this.QueryParams.pagenum++;
          this.getGoodsList();
        }
      },
    

商品详情

在这里插入图片描述

1.点击图片预览

在这里插入图片描述

  • 实现效果

在这里插入图片描述

2.加入购物车 逻辑

  • 先绑定点击事件
  • 获取缓存中的购物车数据 数组格式
  • 先判断 当前的商品是否已经存在于 购物车
  • 已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组 填充回缓存中
  • 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num 重新把购物车数组 填充回缓存中
  • 弹出提示
 // 点击 加入购物车
  handleCartAdd() {
   
    // 1 获取缓存中的购物车 数组
    let cart = wx.getStorageSync
  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
1.2. 结构化一下 1.3. 图形化一下 1.3.1. 运营商后台 1.3.2. 商家后台 1.3.3. 网页前台 参考京东 2. 技术选型 前端:angularJS + Bootstrap 后台:SSM( springmvc+spring+mybatis) 数据库:mysql,使用mycat读写分离 开发模式:SOA 服务中间件:dubbox,需要和zookeeper配合使用 注册中心:zookeeper 消息中间件:Activemq,使用spring-jms 负载均衡:nginx 搜索:solr集群(solrCloud),配合zookeeper搭建, 使用spring-data-solor 缓存:redis集群,使用spring-data-redis 图片存储:fastDFS集群 网页静态化:freemarker 单点登录:cas 权限管理:SpringSecurity, 跨域:cros 支付:微信扫描 短信验证:阿里大于 密码加密:BCrypt 富文本:KindEditor 事务:声明式事务 任务调度:spring task 所有的技术,都可能涉及到为什么用?怎么用?用的过程中有什么问题? 3. 框架搭建 3.1. 前端 理解baseControler.js、base.js、base_pagination.js,以及每一个xxxController.js里面都公共的做了些什么。 baseControler.js 分页配置 列表刷新 处理checkBox勾选 xxxControler.js 自动生成增删改查 base_pagination.js 带分页 base.js 不带分页 3.2. dao 使用了mybatis逆向工程 4. 模块开发 逐个模块开发就好 4.1. 学会评估模块难不难 一个模块难不难从几方面考虑。 涉及几张表? 1,2张表的操作还是没有什么难度的。 涉及哪些功能? 增删改查,批量删除。 前端展示? 分页列表、树形、面包屑、三级联动、内容格式化。 4.2. 举几个简单模块的例子 4.2.1. 品牌管理 单表 分页、新增、删除、修改 4.2.2. 规格管理 2张表 分页、新增、删除、修改、显示优化(显示列表内容的一部分) 4.2.3. 模板管理 2张表 分页、新增、删除、修改、显示优化(显示列表内容的一部分) 4.2.4. 分类管理 单表 4.2.5. 商家审核 单表 4.3. 举一个复杂模块 4.3.1. 商品新增 需要插入3张表,tb_goods、tb_goods_desc、tb_item 前端:三级联动、富文本、图片上传、动态生成内容 4.3.2. 商品修改 需要从3张表获取数据,然后进行回显。 4.4. 典型模块设计 4.4.1. 管理后台 商品新增、商品修改 4.4.2. 前台页面 搜索模块实现 购物车模块实现 支付模块实现 秒杀模块实现 5. 开发过程中问题&优化 1.1. 登录 单点登录怎么实现 session怎么共享 1.2. 缓存 哪些场景需要用到redis redis存储格式的选择 怎么提高redis缓存利用率 缓存如何同步 1.3. 图片上传 图片怎么存储 图片怎么上传 1.4. 搜索 ​ 怎么实现 数据量大、 并发量高的搜索 怎么分词 1.5. 消息通知 ​ 哪些情况用到activeMq 1.6. 优化 seo怎么优化 怎么加快访问速度 1.7. 秒杀 ​ 怎么处理高并发 ​ 秒杀过程中怎么控制库存
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值