如何在Django的Bootstrap卡片中根据关联模型布尔值展示状态通知？

1. 视图层优化数据查询 #

在Property列表视图中，提前预加载关联的Info数据，避免模板中出现N+1查询问题：

类视图实现（ListView） #

from django.views.generic import ListView
from .models import Property

class PropertyListView(ListView):
    model = Property
    template_name = 'property_list.html'
    context_object_name = 'properties'

    def get_queryset(self):
        # 一对一/外键关联用select_related，多对多用prefetch_related
        return Property.objects.select_related('info').all()

函数视图实现 #

from django.shortcuts import render
from .models import Property

def property_list(request):
    properties = Property.objects.select_related('info').all()
    return render(request, 'property_list.html', {'properties': properties})

2. 模板层卡片状态渲染 #

在property_list.html中，遍历Property数据，基于关联Info的布尔字段，结合Bootstrap组件和Font Awesome图标展示状态：

<div class="row g-4">
  {% for property in properties %}
    <div class="col-md-4">
      <div class="card h-100">
        <!-- 卡片头部：状态通知区 -->
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="card-title mb-0">{{ property.name }}</h5>
          <div>
            <!-- 安装确认状态 -->
            <span class="badge {% if property.info.instln_confirmed %}bg-success{% else %}bg-danger{% endif %}">
              <i class="fa-solid {% if property.info.instln_confirmed %}fa-check-circle{% else %}fa-exclamation-circle{% endif %}"></i>
              {{ '安装完成' if property.info.instln_confirmed else '未安装' }}
            </span>
            <!-- 冬季模式状态 -->
            <span class="badge ms-2 {% if property.info.winter_mode %}bg-primary{% else %}bg-secondary{% endif %}">
              <i class="fa-solid {% if property.info.winter_mode %}fa-snowflake{% else %}fa-sun{% endif %}"></i>
              {{ '冬季模式' if property.info.winter_mode else '常规模式' }}
            </span>
          </div>
        </div>
        <!-- 卡片主体内容 -->
        <div class="card-body">
          <p class="card-text">{{ property.description }}</p>
          <!-- 其他Property字段展示 -->
        </div>
        <div class="card-footer">
          <a href="{% url 'property_detail' property.pk %}" class="btn btn-primary">查看详情</a>
        </div>
      </div>
    </div>
  {% empty %}
    <p class="col-12 text-center">暂无物业数据</p>
  {% endfor %}
</div>

关键细节说明 #

• 状态样式区分：用Bootstrap的badge组件配合背景色类（bg-success/bg-danger/bg-primary）直观区分状态
• 图标复用：延续你已有的Font Awesome图标逻辑，布尔值为True时用成功类图标，False时用警示/普通类图标
• 空数据处理：通过{% empty %}分支处理无数据场景，避免页面空白

3. 依赖资源确认 #

确保模板头部已引入Bootstrap和Font Awesome：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

多对多关联场景调整 #

如果Property和Info是一对多关联，需修改：

• 视图中用prefetch_related('info_set')预加载数据
• 模板中添加内层遍历：{% for info in property.info_set.all %}，根据业务逻辑选择单条或多条Info展示状态

内容的提问来源于stack exchange，提问作者Fitzgerald