完整电商项目--(六)商品模块(4):首页三级分类展示及广告展示

电商搭建之电商平台API接口接入|打通首页广告和商品详情 今天准备先把首页到商品详情页这条链路打通,方便我测试商品详情页的功能。今天所涉及的代码仓库和分支如下* 前端代码仓库:git@github.com:fudy/fudy-shop-web.git代码分支:202309_goto_item_detail* 后端代码仓库:git@github.com:fudy/fudy-shop-homepage.git代码分支:202309_goto_item_detail代码分支:202309_goto_item_detail。 阅读详情

切记联系前文中简述的 数据表的关系

三级分类中的数据返回构造:
  • 参照这个图片,看下面的数据结构:
    在这里插入图片描述

  • 这是一个难点,最主要的就是以一个好的形式将数据传递,使用

{
    "1":{   # 这个数字key, 就是代表的 tb_channel_group 表当中的频道 
        "channels":[
        	# 这个就是一行,每个频道中包含的一级分类 
            {"id":1, "name":"手机",   "url":"http://shouji.jd.com/"},
            {"id":2, "name":"相机", "url":"http://www.itcast.cn/"}
        ],        
        "sub_cats":[
            {
            	# 这是每个一级分类对应的二级分类
                "id":38, 
                "name":"手机通讯", 
                "sub_cats":[
                	# 每个二级分类对应的三级分类信息
                    {"id":115, "name":"手机"},
                    {"id":116, "name":"游戏手机"}
                ]
            },
            {
                "id":39, 
                "name":"手机配件", 
                "sub_cats":[
                    {"id":119, "name":"手机壳"},
                    {"id":120, "name":"贴膜"}
                ]
            }
        ]
    },
    "2":{
        "channels":[],
        "sub_cats":[]
    }
}
  • 下面是具体实现的代码:
def get_categories():
    # 查询分类数据,每个元素包含两个数据:一级分类列表。二级分类列表(里面含三级分类)
    '''
    categories={
    1: {
        channels:[{name:***, url:***}....],  # 一级分类,某些一级分类属于同一频道
        sub_cates:[sub{},....],   # 二级分类,里面是三级分类
    },
    {}, {}, {}, .....
    }
    '''
    # 1. 查询所有的频道
    channel_list = GoodsChannel.objects.order_by('group_id', "sequence")  # 前面一个排序是判断在一个频道,后面一个是判断,一个频道中 谁在前面,谁在后面排列
    categories = {}
    # 遍历频道,添加分类信息
    for channel in channel_list:
        # 判断频道是否已经存在
        if channel.group_id not in categories:
            # 不存在则新建频道
            categories[channel.group_id] = {
                'channels': [],
                'sub_cats': []
            }
        # 添加一级分类, 二级分类
        categories[channel.group_id]['channels'].append({'url': channel.url, 'name': channel.category.name})
        # 添加二级分类:通过一级分类的对象关联找到对应的二级和三级分类
        for sub2 in channel.category.subs.all():
        	# 这里的做法是后续的更改了。和上面的结构不一样, 直接是加入了一个 二级分类对象,它的一个属性含有三级分类对象,因为是前后端不分离开发,可以传递对象。
            sub2.sub_cats = sub2.subs.all()  # 获取二级分类对应的三级分类,动态给二级分类对象增加这个属性
            categories[channel.group_id]['sub_cats'].append(sub2)

    return categories
  • 大致思路就是这样! 注释是那么的清晰~ 希望你能理解,不懂就要多看看上节的数据表分析。

首页广告展示:

直接上代码:这一部分逻辑要简单很多

def get(self, request):
        # 2. 查询所有广告分类(广告位),我们之前讲的,广告分类,因为广告有很多投放位置
        content_category_list = ContentCategory.objects.all()
        # 构造广告字典
        '''
        {广告位标识:[广告1,....]}
        '''
        contents = {}
        # 遍历广告分类,找到每个分类中需要展示的广告即可,这里也是不分离。 分离也很容易,把查出来的对象再次遍历,组成所需数据结构即可~
        for content_category in content_category_list:
            # 查询出一个广告位,对应的所有广告内容
            contents[content_category.key] = content_category.content_set.all().order_by('sequence')

总结下来,实际上还是数据表的设计比较复杂。代码只要掌握一些技巧,知识构造数据结构。其实多写起来并不难。

over!

电商项目-展示首页商品频道分类 展示首页商品频道分类 现在要将页面显示成上图; 数据展示的结构如下:(结构不是固定的,按项目需求而来) (一张三级联动的表 是通过parent_id来做的) { "1":{ "channels":[ {"id":1, "name":"手机", "url":"http://shouji.jd.com/"}, {"id":2, "name":"相机", "url":"http://www.baidu.cn/"} ], 阅读详情

相关推荐

[springboot 开发单体web shop] 6. 商品分类和轮播广告展示

商品分类&轮播广告 因最近又被困在了OSGI技术POC,更新进度有点慢,希望大家不要怪罪哦。 上节 我们实现了登录之后前端的展示,如: 接着,我们来实现左侧分类栏目的功能。 ## 商品分类 ProductCategory 从上图我们可以看出,商品的分类其实是有层级关系的,而且这种关系一般都是无限层级。在我们的实现中,为了效果的展示,我们仅仅是展示3级分类,在大多数的中小型电商系统中,三...

Isaac-Zhang 1352

Python基于Django带支付宝支付电商购物商城网站设计-计算机毕业源码设计

1 用户模块 1)注册页 注册时校验用户名是否已被注册。 完成用户信息的注册。 给用户的注册邮箱发送邮件,用户点击邮件中的激活链接完成用户账户的激活。 2)登录页 实现用户的登录功能。 3)用户中心 用户中心信息页:显示登录用户的信息,包括用户名、电话和地址,同时页面下方显示出用户最近浏览的商品信息。 用户中心地址页:显示登录用户的默认收件地址,页面下方的表单可以新增用户的收货地址。 用户中心订单...

计算机源码设计案例的博客 1032

电商APP首页设计,终于有人讲明白了!

移动端产品设计的难点在于在很小的屏幕上展示所有的业务。屏幕限制和移动端的客户碎片化阅读的习惯和高流失率。对于业务复杂的App产品设计难度更高。电商产品就是典型的复杂业务产品之一,是要展示内容最多、最难做的一类App。 电商APP首页设计结构 电子商务网站的首页是网站的形象页面,一个网站能否吸引浏览者留在该站中漫游,全凭首页设计效果的好坏。所以,首页设计对于任何网站都是至关重要的。 首页从根本上说,就是全站内容的目录,也是一个索引。一般的电商app都有页头、页中和页尾这3 个设计区: ...

PEXUE的专栏 2564

淘宝页面实现(包括级联菜单,下拉列表,框架)

主框架: 无标题文档 左边页面: 无标题文档 function show(a) { if(document.getElementById(a).style.display=="none") { document.getElementById(a).style.display="block"; }

wzm10455的专栏 2040

spark项目实战-电商分析平台

第1章 项目概述 电商分析平台是对用户访问电商平台的行为进行分析。 1.1 项目简介   本项目主要讲解一个大型电商网站后台的企业级大数据统计分析平台,该平台以 Spark 为主,对电商网站的流量进行离线和实时的分析。   该大数据分析平台对电商网站的各类用户行为(访问行为、购物行为、广告点击行为等)进行复杂的分析。用统计分析出来的数据,辅助公司中的 PM(产品经理)、数据分析师以及管理人员分析现有产品的状况,并根据用户行为分析结果持续改进产品的设计,以及调整公司的战略和业务。最终达到用大数...

lukabruce的博客 2万+

淘宝商品发布三级联动菜单.zip

淘宝商品发布三级联动菜单基于jquery.1.9.1.min.js制作,点击输入框弹出菜单。

电商项目(十五)-前台项目的首页的商品分类查询和大广告位的显示

到现在我们已经把商城的后台功能全部实现,接下来我们进入前台功能的实现,首页的商品分类,大广告位,商品的搜索,商品的详情展示,购物车功能,生成订单,用户的登录和注册等功能的实现。 创建frontend_portal项目 在pom文件中添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.ap...

weixin_43666051的博客 829

仿淘宝商品发布三级联动菜单

仿淘宝商品发布三级联动菜单,h5源码,花高价买来的,现在分享出来给大家参考参考,拿来直接能用!欢迎下载

Django电商网站项目(4)--商品模块

前文中已设计了与商品模块有关的表如下: 首页活动表用于展示一些活动图片(并附带活动链接); 首页轮播表用于展示一些轮播图片(具体轮播的效果在前端使用CSS完成); 首页展示表用于展示首页按分类排列后的一部分具体商品,展示方式意为以图片展示或以文字展示; 商品图片表用于存储商品图片,由于一种SKU商品可能有多张图片,因此将其专门提出制作一个表; 商品种类表用于存储商品的种类,即类似于水果/蔬菜/肉...

weixin_44806420的博客 4012

三级导航菜单网页特效

三级导航菜单网页特效 三级导航菜单网页特效 三级导航菜单网页特效 三级导航菜单网页特效

jQuery商品发布三级联动菜单代码.zip

有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!

美多商城项目:商品数据库表设计、准备商品数据、首页广告、商品列表页

SPU = Standard Product Unit (标准产品单位)SPU是商品信息聚合的最小单位,是一组可服用、易检索的标准化信息的集合,该集合描述了一个产品的特性。通俗的讲,属性值、特性相同的商品就可以归类到一类SPU。例如:iPhone X就是一个SPU,与商家、颜色、款式、规格、套餐等都无关。SKU = Stock Keeping Unit (库存量单位)SKU即库存进出计量的单位,可以是以件、盒等为单位,是物理上不可分割的最小存货单元。

黑马程序员官方博客 4538

js模拟淘宝网的多级选择菜单实现方法

主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

微信小程序综合训练--花店商城小程序首页、分类笔记(1)

为了方便进行项目的开发,开发人员通常会对目录结构进行调整优化,在这个项目中, 我们就需要将小程序源码放到 miniprogram 目录下。

pink_shen的博客 1981

直流电动机的建模仿真(1)他励,串励和并励电动机建模仿真

本文根据不同励磁方式的直流电动机的接线原理图,建立了相应的数学模型,然后根据与数学模型对应的等效电路以及模拟机械运动方程的等效电路,用Matlab/simulink中的SpecializedPower system库中的电路元件,建立了他励,并励和串励直流电动机的全等效电路仿真模型,经过与Matlab自带的直流电动机仿真模型比较以及仿真实例验证,所建立的仿真模型时完全正确的。

weixin_45670943的博客 7513

Fast-LIO2代码解析 古月居

FAST-LIO,FAST-LIO2与FASTER-LIO - 古月居FAST-LIO2代码解析(一) - 古月居FAST-LIO2代码解析(二) - 古月居FAST-LIO2代码解析(三) - 古月居FAST-LIO2代码解析(四) - 古月居FAST-LIO2代码解析(五) - 古月居FAST-LIO2代码解析(六) - 古月居

li4692625的博客 2783

美多商城之商品(首页广告)

三、首页广告 首页数据由商品频道分类和广告组成 3.1 展示首页商品频道分类 3.1.1. 分析首页商品频道分类数据结构 { "1":{ "channels":[ {"id":1, "name":"手机", "url":"http://shouji.jd.com/"}, {"id":2, "name":"相机", "url":"http://www.itcast.cn/"} ], ...

IT之一小佬的博客 745

物流分拣YOLO实战:YOLO26 OBB+YOLOv8多尺度融合,不规则包裹分拣效率提升40%(附训练+部署代码)

在物流分拣的工业场景中,模型的检测精度、推理速度、部署友好性本次基于YOLO26 OBB+YOLOv8多尺度融合打造的物流分拣视觉检测方案,精准解决了工业场景中不规则包裹的旋转检测、多尺度包裹的漏检问题,最终实现分拣效率提升40%,检测准确率提升至95%以上,且模型在边缘设备上的推理帧率稳定35FPS+,完全适配物流分拣的工业落地需求。

专注于Python爬虫开发,分享爬虫技巧、项目实战与反爬经验,使用Scrapy、BeautifulSoup等工具,解决数据抓取难题。 881

【Vue+DRF生鲜电商】31.首页商品按分类显示推荐功能

专题:Vue+Django REST framework前后端分离生鲜电商 Vue+Django REST framework 打造前后端分离的生鲜电商项目(慕课网视频)。 Github地址:https://github.com/xyliurui/DjangoOnlineFreshSupermarket ; Django版本:2.2、djangorestframework:3.9.2。 前端Vu...

吾星喵的博客 826

c# 如何使用S7NET 读取汇川H5U的数据

本文介绍了两种使用C#读取汇川H5U PLC数据的方法。第一种通过ModbusTCP协议(推荐),使用NModbus库实现,步骤包括配置PLC的Modbus服务器功能、安装库及编写读取保持寄存器的代码。第二种针对兼容西门子S7协议的型号,使用S7NetPlus库直接读取。文章强调需注意地址映射关系、协议配置及网络设置,并建议优先采用ModbusTCP方案以确保稳定性。两种方法均提供了完整的代码示例,帮助开发者快速实现在C#环境下与汇川H5U PLC的通信。

StevenChen的博客 455

2025华为杯第二十二届中国研究生数学建模竞赛A题:通用神经网络处理器下的核内调度问题 - 完整解题分析+完整MATLAB源码!

🎓 本文收录于 《滚雪球学数学建模》专栏,本专栏专注于从零基础出发,带你循序渐进掌握数学建模的核心方法与思维路径。通过“滚雪球式”学习法,从最简单的生活化案例到经典建模工具,再到省赛、国赛真题实战演练,逐步积累知识与技能,帮助你搭建完整的建模体系。无论你是刚接触建模的新生,还是希望提升科研与竞赛能力的学者与工程师,本专栏都将为你提供一条清晰、高效、可实操的建模成长路线,助力你快速进阶,突破难点,迈向数学建模竞赛与实际应用的更高峰 🚀!

**My Coding Family** 2049

完整电商项目--(六)商品模块(2):首页广告数据表分析

商品这一块涉及了大量的数据表。我们一点点根据业务慢慢分析。 首页广告数据库表分析 首先上图片: 应该有两张数据表 (一) 广告类别表 (1)这里要先讲一下广告位,我们观察仅供当就是到有很多广告位,这里后来是需要投放广告,赚钱的。具体位置有首页轮播广告,左侧面广告, 还有的搜索出来的商品也是广告(据我以前爬虫的经验,搜索一个商品,一页60个数据,会有5到10个是广告数据,因为 url构造不一样) 所以我们要把广告分为不同的类别,不同类别的广告要投放的位置是不一样的 (2)字段说明,只有一个

pythonstrat的博客 726

32位快速加法器设计

32位快速加法器设计

好好学习,天天向上 3289

程序化广告行业(69/89):电商素材制作与展示策略解析

在如今数字化营销的浪潮中,程序化广告成为众多企业精准触达目标客户的有力武器。作为一名在广告技术领域摸爬滚打多年的从业者,深知学习是不断进步的阶梯,所以希望借这篇博客和大家一起深入了解程序化广告行业,共同学习、共同成长。今天,咱们先来剖析电商素材制作和展示策略这两个关键环节。

yyy173611的博客 4130

File does not exist: /user/anonymous/.staging/job_1628851608378_6064/报错问题解决

user/admin/.staging/job_1571397171638_0001/job_1571397171638_0001_1.jhist 所以为什么没有下发,这里面jhist,只是被引发的错误,它还不是根本的错误。看到上面错误,我们就可以判断,这是网络问题,然而网络无非是ip地址,防火墙,端口,hosts等。我们正常的hosts是这样的。在回头复盘想想,我们找不到jhist,跟我们的网络问题二者是很难找到关联的,所以大家在遇到问题的时候,一定多排查和思考,而不是看到一个错误,就以为是它的问题。

石榴姐yyds 2169

【全志V821_FoxPi】6-2 IMX219 MIPI摄像头适配

全志V821芯片适配IMX219 MIPI摄像头(2lane)教程,基于FoxPi开发板V1.2 SDK。文章详细介绍了IMX219的技术参数(800万像素、1/4英寸CMOS、支持1080P@30fps输出)及模组接口原理图。重点展示了设备树配置方法,包括PIO引脚定义(TWI0使用PA3/PA4,复位引脚PA2)、TWI0节点设置(100kHz时钟)以及VIND0节点中sensor0的完整配置(I2C地址0x20、MCLK0、RAW格式输出等)。配置过程强调需注意IMX219的器件地址转换(0x10→0

第四维度的博客 2248
上一篇: 完整电商项目--(六)商品模块(3):总览商品信息数据表设计分析(复杂)
下一篇: 完整电商项目--(六)商品模块(5):自定义文件存储系统 - fastdfs存储
我是py呀
博客等级 码龄8年 205粉丝 130原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值