电商网站首页商品信息显示

视图函数向页面传参数的方式：

构造待传入前端页面的变量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 }} &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>
    </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

源码

首页三级菜单显示

电商网站首页商品信息显示

视图函数向页面传参数的方式：

猜你喜欢