Django 模板中实现品牌-车型级联导航菜单的正确方法-Python教程-PHP中文网

Django 模板中实现品牌-车型级联导航菜单的正确方法

本文详解如何通过 django 的 prefetch_related 优化关联查询，并在模板中正确遍历每个汽车品牌及其对应车型，避免上下文处理器中数据结构错位导致的循环失效问题。

本文详解如何通过 django 的 prefetch_related 优化关联查询，并在模板中正确遍历每个汽车品牌及其对应车型，避免上下文处理器中数据结构错位导致的循环失效问题。

在构建多级导航菜单（如“汽车品牌 → 车型下拉列表”）时，一个常见误区是试图在上下文处理器中预先组装好“品牌+对应车型列表”的扁平化结构（例如将 models 单独作为顶层变量返回）。这不仅逻辑混乱，更会导致模板中 models 变量始终只保留最后一次循环的结果——正如你所见，print(models) 输出了多个不同列表，但最终 return {'models': models} 只传递了最后一个品牌的车型，致使所有下拉菜单显示相同内容。

根本解法：利用 Django ORM 的关系遍历能力，而非手动拼装数据。
你已在 CarModel 模型中正确定义了反向关系：

class CarModel(models.Model):
    # ...
    brand = models.ForeignKey(CarBrandCategory, on_delete=models.CASCADE, related_name='model')

关键在于 related_name='model' —— 它允许你从 CarBrandCategory 实例直接访问其所有关联车型：brand.model.all。

因此，上下文处理器应极简、高效地返回品牌 QuerySet，并预加载关联车型以避免 N+1 查询：

# context_processors.py
from .models import CarBrandCategory

def brand_catalogue(request):
    # 使用 prefetch_related 提前获取所有品牌及其车型，一次查询完成
    car_brands = CarBrandCategory.objects.prefetch_related('model').all()
    return {'car_brands': car_brands}

✅ 优势：

Django Unfold
提供使用 django-unfold (v0.56+) 构建高级 Django 管理界面的专业指导。当用户提及 django-unfold、unfold admin 等内容时使用此技能。

下载

性能最优：仅需 2 次数据库查询（1次查品牌，1次查所有车型并按品牌关联）；

结构清晰：模板中自然体现“品牌拥有多个车型”的层级关系；

可维护性强：无需在 Python 层做嵌套循环或字典映射。

接着，在 _base.html 中直接按关系遍历即可：

<div class="flex pt-3 container w-full">
  {% for brand in car_brands %}
    <button id="dropdown-button-{{ brand.id }}" data-dropdown-toggle="dropdown-{{ brand.id }}" class="py-2.5 px-4 text-sm font-medium text-center text-gray-900 bg-gray-100 uppercase" type="button">
      {{ brand.brand_name }}
    </button>

    <div id="dropdown-{{ brand.id }}" class="hidden shadow w-44 bg-gray-100">
      <ul aria-labelledby="dropdown-button-{{ brand.id }}">
        {% for model in brand.model.all %}
          <li>
            <a href="#" class="inline-flex w-full px-4 py-2 hover:bg-gray-50">
              {{ model.model }}
            </a>
          </li>
        {% endfor %}
      </ul>
</div>
  {% endfor %}
</div>

⚠️ 重要注意事项：

id 唯一性：确保每个