优化Django ListView 分页实践：构建高效产品列表

# views.py
from django.views.generic import ListView
from .models import Product # 假设你的产品模型名为Product

class ProductListView(ListView):
    model = Product
    template_name = 'Genesis/home.html'
    context_object_name = 'page_obj'  # 将分页对象命名为 'page_obj'
    paginate_by = 8  # 每页显示8个产品

    def get_context_data(self, **kwargs):
        """
        扩展上下文数据，例如添加分类信息。
        注意：此处获取所有分类的方式可能会导致性能问题，
        如果分类数量巨大，应考虑优化查询。
        """
        context = super().get_context_data(**kwargs)
        # 示例：获取所有产品类型作为分类，并格式化
        # 注意：这里的Product.objects.all()会查询所有产品，
        # 如果Product_Type是独立的模型，应从该模型获取。
        # 假设Product_Type是Product模型的一个字段。
        categories = Product.objects.values('Product_Type').distinct()
        context['categories'] = [
            {'Product Type': cat['Product_Type']}
            for cat in categories
        ]
        return context

<!-- Genesis/home.html -->
{% if page_obj.object_list %} {# 检查是否有产品 #}
    <div class="row" id="product-container">
        {% for product in page_obj.object_list %}
            <div class="col-lg-3 col-md-6 mb-4">
                <div class="card">
                    <div class="bg-image hover-zoom ripple ripple-surface ripple-surface-light" data-mdb-ripple-color="light">
                        <img src="{{ product.first_image.Product_Image.url }}" alt="Product Image" class="w-100" />
                        <a href="#!">
                            <div class="mask">
                                <div class="d-flex justify-content-start align-items-end h-100">
                                    <h5><span class="badge bg-primary ms-2">New</span></h5>
                                </div>
                            </div>
                            <div class="hover-overlay">
                                <div class="mask" style="background-color: rgba(251, 251, 251, 0.15);"></div>
                            </div>
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="text-center">
                            <h5 class="fw-bolder">{{ product.Product_Type }}</h5>
                            $40.00 - $80.00
                        </div>
                    </div>
                    <div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
                        <div class="text-center">
                            <a class="btn btn-outline-dark mt-auto" href="#">View Product</a>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <p class="text-center">No Products Available</p>
{% endif %}

<!-- Genesis/home.html (Pagination Section) -->
<nav aria-label="Page navigation ">
    <ul class="pagination justify-content-center">
        {# 上一页按钮 #}
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled"> {# 无上一页时禁用 #}
                <span class="page-link" aria-hidden="true">&laquo;</span>
            </li>
        {% endif %}

        {# 页码列表 #}
        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li> {# 当前页高亮 #}
            {% else %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                </li>
            {% endif %}
        {% endfor %}

        {# 下一页按钮 #}
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        {% else %}
            <li class="page-item disabled"> {# 无下一页时禁用 #}
                <span class="page-link" aria-hidden="true">&raquo;</span>
            </li>
        {% endif %}
    </ul>
</nav>