本文将构建一个基于 Django 模板引擎与 Bootstrap 框架的产品信息卡片组件，涵盖模板条件渲染、视图数据传递及路由配置。

核心模板实现

以下模板通过 Django 模板标签实现动态数据绑定，利用 Bootstrap 的卡片结构组织产品信息：

<div class="card h-100 shadow-sm">
    <!-- 产品主图区域 -->
    <img src="{{ pkg.img_src }}" class="card-img-top object-fit-cover" 
         alt="{{ pkg.sku }}" style="height: 200px;">
    
    <div class="card-body d-flex flex-column">
        <!-- 产品标识 -->
        <h5 class="card-title mb-3">
            <span class="badge bg-secondary me-2">SKU</span>
            {{ pkg.sku }}
        </h5>
        
        <!-- 规格参数列表 -->
        <ul class="list-unstyled small text-muted mb-3">
            <li class="mb-2">
                <i class="bi bi-box-seam me-2"></i>
                外箱编码：{{ pkg.outer_carton_code }}
            </li>
            <li class="mb-2">
                <i class="bi bi-palette me-2"></i>
                托盘编码：{{ pkg.skid_code }}
            </li>
            <li class="mb-2">
                <i class="bi bi-weight me-2"></i>
                单品净重：{{ pkg.unit_net_weight }} kg
            </li>
            <li class="mb-2">
                <i class="bi bi-layers me-2"></i>
                箱装数量：{{ pkg.qty_per_carton }} / 每层箱数：{{ pkg.cartons_per_layer }}
            </li>
            <li class="mb-2">
                <i class="bi bi-arrow-up me-2"></i>
                堆码层数上限：{{ pkg.max_stack_layers }}
            </li>
            <li>
                <i class="bi bi-plus-circle me-2">/i>
                附属包材重量：{{ pkg.accessory_weight }} kg
            </li>
        </ul>
        
        <!-- 状态指示器 -->
        <div class="mt-auto pt-3 border-top">
            {% with status=pkg.is_active %}
            <span class="badge rounded-pill {% if status %}bg-success{% else %}bg-secondary{% endif %}">
                {% if status %}
                    <i class="bi bi-check-circle me-1"></i>生效中
                {% else %}
                    <i class="bi bi-x-circle me-1"></i>已停用
                {% endif %}
            </span>
            {% endwith %}
        </div>
    </div>
    
    <!-- 操作面板 -->
    <div class="card-footer bg-transparent border-0 d-grid gap-2 d-md-flex">
        <a href="{% url 'modify_sku' pkg.uuid %}" 
           class="btn btn-outline-primary btn-sm flex-fill">
            <i class="bi bi-pencil-square"></i> 修订
        </a>
        <button type="button" 
                class="btn btn-outline-danger btn-sm flex-fill"
                data-bs-toggle="modal" 
                data-bs-target="#delConfirm{{ pkg.uuid }}">
            <i class="bi bi-trash"></i> 移除
        </button>
    </div>
</div>

视图层数据准备

视图负责从模型获取数据并注入模板上下文，采用 get_object_or_404 确保数据存在性：

from django.shortcuts import render, get_object_or_404
from django.views import View
from .models import MerchandisePackage


class PackageDetailView(View):
    template_name = "inventory/sku_card.html"
    
    def get(self, request, uuid):
        # 预取关联数据减少查询次数
        package = get_object_or_404(
            MerchandisePackage.objects.select_related('category'),
            uuid=uuid
        )
        
        context = {
            'pkg': package,
            'page_title': f"{package.sku} 详情"
        }
        return render(request, self.template_name, context)

路由映射配置

URL 配置采用路径转换器约束参数类型，并设置语义化命名便于模板反向解析：

from django.urls import path
from .views import PackageDetailView, PackageUpdateView, PackageRemoveView

urlpatterns = [
    path(
        'sku/<uuid:uuid>/overview/',
        PackageDetailView.as_view(),
        name='sku_overview'
    ),
    path(
        'sku/<uuid:uuid>/modify/',
        PackageUpdateView.as_view(),
        name='modify_sku'
    ),
    path(
        'sku/<uuid:uuid>/remove/',
        PackageRemoveView.as_view(),
        name='remove_sku'
    ),
]

关键实现要点

<tr> <th>功能模块</th> <th>技术方案</th> </tr> </thead> <tbody> <tr> <td>条件渲染</td> <td>采用 {% with %} 缓存状态值，避免重复属性访问；配合 Bootstrap 工具类动态切换样式</td> </tr> <tr> <td>数据获取</td> <td>使用 select_related 预加载外键关联数据，降低 N+1 查询风险</td> </tr> <tr> <td>URL 设计</td> <td>以 UUID 替代自增 ID 作为资源标识，增强安全性与可移植性</td> </tr> <tr> <td>交互增强</td> <td>删除操作触发 Bootstrap Modal 确认，防止误操作</td> </tr> </tbody> </table>