电商网站首页商品信息显示
视图函数向页面传参数的方式:
构造待传入前端页面的变量
view_param
将
view_param
封装成如下形式:context = { 'var_key':view_param }
以如下形式返回:
return(request, 'object.html', context)
前端页面以如下形式接收:
{{ var_key }}
最终要实现的效果如图:
前端页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
<link rel="stylesheet" type="text/css" href="../static/css/main.css">
<script type="text/javascript" src="../static/js/host.js"></script>
<script type="text/javascript" src="../static/js/vue-2.5.16.js"></script>
<script type="text/javascript" src="../static/js/axios-0.18.0.min.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
<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>
</div>
</body>
</html>
模型类代码:
from django.db import models
from indexpage.utils.models import BaseModel
class GoodsCategory(BaseModel):
"""商品类别"""
name = models.CharField(max_length=10, verbose_name='名称')
parent = models.ForeignKey('self', related_name='subs', null=True, blank=True, on_delete=models.CASCADE,
verbose_name='父类别')
class Meta:
db_table = 'tb_goods_category'
verbose_name = '商品类别'
verbose_name_plural = verbose_name
def __str__(self):
return self.name
class GoodsChannelGroup(BaseModel):
"""商品频道组"""
name = models.CharField(max_length=20, verbose_name='频道组名')
class Meta:
db_table = 'tb_channel_group'
verbose_name = '商品频道组'
verbose_name_plural = verbose_name
def __str__(self):
return self.name
class GoodsChannel(BaseModel):
"""商品频道"""
group = models.ForeignKey(GoodsChannelGroup, verbose_name='频道组名')
# 级联删除:models.CASCADE
category = models.ForeignKey(GoodsCategory, on_delete=models.CASCADE, verbose_name='顶级商品类别')
url = models.CharField(max_length=50, verbose_name='频道页面链接')
sequence = models.IntegerField(verbose_name='组内顺序')
class Meta:
db_table = 'tb_goods_channel'
verbose_name = '商品频道'
verbose_name_plural = verbose_name
def __str__(self):
return self.category.name
视图函数代码:
from django.shortcuts import render
from django.views import View
from indexpage.utils.meiduo_category import get_categories
class ListView(View):
def get(self, request):
# 1.查询所有频道并排序
categories = get_categories()
context = {
'categories':categories,
}
return render(request, 'index.html', context)
get_categories()工具代码:
from goods.models import GoodsChannel
def get_categories():
# 1.1查询所有频道并排序
channels = GoodsChannel.objects.order_by('group_id', 'sequence')
print('channels:', channels)
# 1.2遍历,转换频道结构
catetories = {}
for channel in channels:
# categories[1]={手机}
# categories[1]={相机}
# 1.3判断此频道是否已经存在,如果不存在则新建字典
if channel.group_id not in catetories:
catetories[channel.group_id] = {
'channels': [], # 一级分类列表
'sub_cats': [] # 二级分类列表
}
# 1.4获取当前频道
channel_dict = catetories[channel.group_id]
# 1.5向一级分类中添加数据
channel_dict['channels'].append({
'name': channel.category.name,
'url': channel.url
})
'''
categories={
1:{
'channels':[{手机},{相机},{数码}],
'sub_cats':[]
},
2:{
'channels':[{电脑},{办公}],
'sub_cats':[]
},
3:{
'channels':[],
'sub_cats':[]
}
}
'''
# 1.6向二级分类中添加数据
for cat2 in channel.category.subs.all():
channel_dict['sub_cats'].append({
'name': cat2.name,
# 1.7添加三级分类
'sub_cats': cat2.subs.all()
})
return catetories