Question

所有动作我只有一页，而urls.py中只有一个URL。并且在菜单部分中有几个食物类别。如何显示仅属于特定类别的食物。为此，设计了一个前端过滤器系统。如何在Django中使用前端过滤器系统。我想保持这样的设计。如何在Django中使用前端过滤器系统

models.py

class MenuCategory(models.Model):
    title = models.CharField(max_length=250)
    slug = AutoSlugField(populate_from='title')
    active = models.BooleanField(default=True)
    featured = models.BooleanField(default=False)

    def __str__(self):
        return self.title

    class Meta:
        verbose_name_plural = 'Menu Category'

class Food(models.Model):
    name = models.CharField(max_length=250)
    price = models.CharField(max_length=100)
    detail = models.TextField(blank=True)
    category = models.ForeignKey(MenuCategory,on_delete=models.DO_NOTHING)
    image = models.ImageField(upload_to='Foods',blank=True)
    featured = models.BooleanField(default=False)
    active = models.BooleanField(default=True)
    date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

    class Meta:
        verbose_name_plural = 'Foods'

views.py

def homepage(request):
    featured_dishes = Food.objects.filter(featured=True)
    menu_categories = MenuCategory.objects.filter(active=True)
    foods = Food.objects.filter(active=True)
    return render(request,'cafe/base.html',{
                                            'menu_categories':menu_categories,
                                            'featured_dishes':featured_dishes,

'foods':foods,
})

base.html我只有一个主页。

 <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">About</a>
                    </li>
                    <!-- <li class="nav-item">
                        <a class="nav-link" href="#">Special</a>
                    </li> -->
                    <li class="nav-item">
                        <a class="nav-link" href="#menu">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#gallery">Gallery</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
<section class="menu-main common-padding" id="menu">
    <div class="container"> <!-- Container .// -->
{% for section in menu_sections %}
        {% if forloop.last %}
        <div class="section-heading-wrap">
            <p class="sub-heading" data-aos="fade-left" data-aos-duration="1000">{{section.section_title}}</p>
            <h3 class="main-heading u-margin-bottom-small" data-aos="fade-right" data-aos-duration="1000">{{section.title_info}}</h3>
            <p class="section-subtitle text-center normal-content" data-aos="fade-up" data-aos-duration="1000">{{section.section_description}}</p>
        </div>
        {% endif %}
   {% endfor %}

    </div> <!-- Container .// -->
<!-- this 'All' have all the active foods but when i move to other categories then how can i show foods to this category only without loading any page within this same section.what i have to do here // -->
    <div class="iso-menu">
        <ul> <li class="active" data-filter="*">All</li>
            {% for category in menu_categories %}
            <li data-filter=".{{??}}">{{category.title}}</li>
            {% endfor %}
        </ul>
    </div>
    <div class="iso-item" data-aos="zoom-in-up" data-aos-duration="1000">
{% for food in foods %}
        {% if food.featured %}
         <div class="item dessert dinner"> <!-- Iso-Item .// --> <!-- Alternate .// -->
            <div class="menu-card-main">
                <div class="menu-card-image recommend">
                    <a href="/media/{{food.image}}" data-lightbox="menu4" data-title="Smoked Paprika Hum"><img src="/media/{{food.image}}" alt="Dish4"></a>
                </div>
                <div class="manu-card-content main-box">
                    <p class="dish-price text-center u-margin-bottom-mini">{{food.price}}</p>
                    <h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
                    <p class="dish-detail text-center">{{food.detail}}</p>
                </div>
            </div>
        </div>
        {% else %}
        <div class="item dinner lunch"> <!-- Iso-Item .// -->
            <div class="menu-card-main">
                <div class="manu-card-content main-box">
                    <p class="dish-price text-center u-margin-bottom-mini">{{food.price}}</p>
                    <h4 class="dish-name text-center u-margin-bottom-small">{{food.name}}</h4>
                    <p class="dish-detail text-center">{{food.detail}}</p>
                </div>
                <div class="menu-card-image">
                    <a href="/media/{{food.image}}" data-lightbox="menu1" data-title="Grilled American Fillet"><img src="/media/{{food.image}}" alt="Dish1"></a>
                </div>
            </div>
        </div>
        {% endif %}
     {% endfor %}   <!-- Iso-Item .// -->



    </div>
</section>

Answer 1

最近，我实现了django过滤器。我关注了这篇文章。这对于实现简单的django过滤器非常有帮助。

https://simpleisbetterthancomplex.com/tutorial/2016/11/28/how-to-filter-querysets-dynamically.html

Answer 2

您必须实现javascript解决方案。一种选择是使用Ajax或诸如Axios之类的http客户端。

此js代码应向您的views.py请求，而您的views.py应返回包含预期数据的响应。

如何在Django模板中使用前端过滤器系统/

2 个答案: