Django商品筛选与瀑布流展示-优快云博客

本文链接：https://blog.youkuaiyun.com/wudiyunxing/article/details/80550817

本文介绍了一个使用Django实现的商品分类和价格筛选功能，通过URL参数传递分类ID和价格ID进行商品过滤，并展示了如何实现瀑布流效果来加载图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.组合搜索没整明白（解决）

models.py

class Classification(models.Model):
    name = models.CharField(verbose_name='名称', max_length=32)
    class Meta:
        db_table = 'Classification'
    def __str__(self):
        return self.name


class Price(models.Model):
    name = models.CharField(verbose_name='价格', max_length=32)
    class Meta:
        db_table = 'Price'
    def __str__(self):
        return self.name


class Goods(models.Model):
    name = models.CharField(verbose_name='标题', max_length=32)
    classification = models.ForeignKey(to='Classification',on_delete=models.CASCADE)
    price = models.ForeignKey(to='Price',on_delete=models.CASCADE)
    class Meta:
        db_table = 'Goods'
    def __str__(self):
        return self.name

urls.py

re_path('select-(?P<classification_id>\d+)-(?P<price_id>\d+).html', index.select_goods),
    path('goods.html', index.index_goods),

views.index.py

def index_goods(request):
    print(1)
    classification_list=models.Classification.objects.all()
    price_list=models.Price.objects.all()
    goods_list = models.Goods.objects.all()
    #通过变量为对方设定初值0，为下一步通过变量改变值做准备
    classification_id=0
    price_id=0
    return render(request,'goods.html',locals())

def select_goods(request,*args,**kwargs):
    print(kwargs)
    contains={}
    #注意数据类型
    classification_id=int(kwargs['classification_id'])
    price_id=int(kwargs['price_id'])
    #下面用法值得留意，遍历一个字典，k为键，v为值
    # for k,v in kwargs.items():
    #     if int(v)==0:
    #         pass
    #     else:
    #         contains[k]=v
    if classification_id==0:
        pass
    else:
        contains['classification_id']=classification_id
    if price_id==0:
        pass
    else:
        contains['price_id']=price_id

    goods_list=models.Goods.objects.filter(**contains)
    classification_list = models.Classification.objects.all()
    price_list = models.Price.objects.all()
    return render(request,'goods.html',
                  {'goods_list':goods_list,
                   'classification_list':classification_list,
                   'price_list':price_list,
                   'classification_id':classification_id,
                   'price_id':price_id})

goods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    {% if  classification_id == 0 %}
        <a href="/select-0-{{ price_id }}.html" style="background-color: #009999;color: white">全部</a>
        {% else %}
            <a href="/select-0-{{ price_id }}.html" >全部</a>
    {% endif %}

    {% for classification in classification_list %}
        {% if  classification_id == classification.id %}
            <a href="/select-{{ classification.id }}-{{ price_id }}.html" style="background-color: #009999;color: white">{{ classification.name }}</a>
        {% else %}
            <a href="/select-{{ classification.id }}-{{ price_id }}.html" >{{ classification.name }}</a>
        {% endif %}

    {% endfor %}

</div>
<div>
    {% if price_id == 0 %}
        <a href="/select-{{ classification_id }}-0.html" style="background-color: #009999;color: white">全部</a>
        {% else %}
            <a href="/select-{{ classification_id }}-0.html" >全部</a>
    {% endif %}

    {% for price in price_list %}
        {% if price_id == price.id %}
             <a href="/select-{{ classification_id }}-{{ price.id }}.html" style="background-color: #009999;color: white">{{ price.name }}</a>
             {% else %}
                <a href="/select-{{ classification_id }}-{{ price.id }}.html">{{ price.name }}</a>
        {% endif %}

    {% endfor %}

</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div>
    {% for goods in goods_list %}
        <p>{{ goods.name }}</p>
    {% endfor %}

</div>
</body>
</html>

3.瀑布流

在admin 上传图片后，理论上与static文件夹下的图片没有关系，但是修改手动修改static下的图片，不会生效，需要重新修改admin内的上传文件。这是什么玩意？？？

.py

from django.shortcuts import render
from app01 import models
from django.http import JsonResponse
# Create your views here.

def pubuliu(request):
    if request.method=='GET':

        return render(request,'pubuliu.html')
    if request.method=='POST':
        result={'status':True,'data':None}
        img_list = models.Image.objects.all().values('title', 'href')

        img_list = list(img_list)
        result['data']=img_list
        return JsonResponse(result)

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<style>
    #div02 {
        width: 1000px;
        margin: 0 auto; /*很神奇,上下边距为0，左右自适应(在设定宽度的情况下左右居中)*/
    }

    #item {
        width: 25%;
        float: left;
    }
    #item img{
            width: 100%;
        }
</style>
<body>
<div><h1>图片墙</h1></div>
<div id="div02">
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
    <div id="item"></div>
</div>
</body>
</html>
<script>
    $(function () {
        uploadImage();
    });

    function uploadImage() {

                $.ajax({
                    url:'/pubuliu/',
                    type:'POST',
                    dataType: 'JSON',
                    success: function (arg) {

                        if (arg.status) {
                            var img_list = arg.data;
                            console.log(img_list);
                            $.each(img_list, function (k, v) {
                                var tag = document.createElement('img');
                                tag.src = '/' + v.href;
                                var label = document.createElement('label');
                                label.innerText = v.title;
                                var index = k % 4;
                                $('#div02').children().eq(index).append(tag,label);
                            })
                        }
                    }
                })

    }
</script>

企业网站设计及相关知识