电商项目-展示首页商品频道分类

展示首页商品频道分类

现在要将页面显示成类似上图；
数据展示的结构如下：（结构不是固定的，按项目需求而来）
（一张三级联动的表 是通过parent_id来做的）

{
    
    
    "1":{
    
    
        "channels":[
            {
    
    "id":1, "name":"手机", "url":"http://shouji.jd.com/"},
            {
    
    "id":2, "name":"相机", "url":"http://www.baidu.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":[]
    }
}

分析：
这是一个json类型:
“1” 是组 一共是11个组
“channels” 频道 一共是37个频道 下图频道展示了两个频道，频道下面还有二级“sub_cats”, "sub_cats"里面的"sub_cats"是一个三级分类，需要查询数据库，把数据拼接成下图结构给前端返回，前端接收到数据就可以显示到页面中来。

在项目的apps/contents/views.py 来实现代码：
views.py

from django.shortcuts import render
from django.views import View
from goods.models import GoodsCategory, GoodsChannel
from collections import OrderedDict


class IndexView(View):
    """首页广告"""

    def get(self, request):
        """提供首页页面"""
        # 查询并展示商品分类

        # categories = {}  # 优化 OrderedDict 由无序变成有序
        categories = OrderedDict()
        # 查询所有的商品频道
        channels = GoodsChannel.objects.order_by('group_id', 'sequence')

        for channel in channels:
            # 37个频道 11个组
            group_id = channel.group_id
            # print(group_id)
            if group_id not in categories:
                categories[group_id] = {
    
    'channels': [], 'sub_cats': []}

            # print(categories)
            cat1 = channel.category
            categories[group_id]['channels'].append(
                {
    
    
                    "id": cat1.id,
                    "name": cat1.name,
                    "url": channel.url
                }
            )
            # print(categories)  # 打印结果一级分类完成
            # 查询二级和三级类别
            # 查询二级 parent_id = cat1.id
            # for cat2 in cat1.subs.all():  此行简写代码可替换下面一行代码  models.py中定义了related_name=subs
            for cat2 in GoodsCategory.objects.filter(parent_id=cat1.id).all():
                cat2.sub_cats = []
                categories[group_id]["sub_cats"].append(
                    {
    
    
                        "id": cat2.id,
                        "name": cat2.name,
                        "sub_cats": cat2.sub_cats
                    }
                )

                # for cat3 in cat2.subs.all():
                for cat3 in GoodsCategory.objects.filter(parent_id=cat2.id).all():
                    cat2.sub_cats.append(
                        {
    
    
                            "id": cat3.id,
                            "name": cat3.name,
                        }
                    )
        print(categories)

        '''
        {
            "1":{
                "channels":[
                    {"id":1, "name":"手机", "url":"http://shouji.jd.com/"},
                    {"id":2, "name":"相机", "url":"http://www.baidu.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":"贴膜"}
                        ]
                    }
                ]
            },
        '''
        context = {
    
    
            "categories": categories
        }
        return render(request, 'index.html', context=context)

print(categories)执行结果：

前端页面
index.html

<ul class="sub_menu">
				{
    
    % for group in categories.values %}
				<li>
					<div class="level1">
						{
    
    % for channel in group.channels %}
						<a href="{
    
    { channel.url }}">{
    
    {
    
     channel.name }}</a>
						{
    
    % endfor %}
					</div>
					<div class="level2">
						{
    
    % for cat2 in group.sub_cats %}
						<div class="list_group">
							<div class="group_name fl">{
    
    {
    
     cat2.name }} &gt;</div>
							<div class="group_detail fl">
								{
    
    % for cat3 in cat2.sub_cats %}
								<a href="/list/{
    
    { cat3.id }}/1/">{
    
    {
    
     cat3.name }}</a>
								{
    
    % endfor %}
							</div>
						</div>
						{
    
    % endfor %}
					</div>
				</li>
				{
    
    % endfor %}
</ul>

Django中related_name作用
https://www.cnblogs.com/pyspark/p/8638180.html