zoukankan      html  css  js  c++  java
  • 首页三级菜单显示

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

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

    • 构造待传入前端页面的变量view_param

    • view_param封装成如下形式:

      context = {
          'var_key':view_param
      }
      
    • 以如下形式返回:

      return render(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
    
    

    源码

  • 相关阅读:
    2007年8月小记
    2007年7月小记
    CS2007.1 在多应用程序中的单点登录
    C#类型转换2
    checkbox与说明文字无法对齐的问题
    css中的内容溢出
    javascript获取的层(div)高度
    C#类型转换3
    js修改css样式表解析(转)
    (转)javascript选择id class
  • 原文地址:https://www.cnblogs.com/lulujunsir/p/indexpage.html
Copyright © 2011-2022 走看看