展示首页商品频道分类
现在要将页面显示成类似上图;
数据展示的结构如下:(结构不是固定的,按项目需求而来)
(一张三级联动的表 是通过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 }} ></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