Django 應用程序未在模板中顯示數據

Question

我是 Django 的新手，正在嘗試制作我的第一個電子商務網站。 我試圖從 .JSON 文件中獲取產品列表以顯示在我的 products.html 模板中。 產品已就位，如 Django 管理門戶中所示， products在我的views.py文件中定義，我已經完成了loaddata但沒有任何結果。 我在下面添加了一些屏幕截圖和代碼以進一步解釋。

Views.py 代碼：

from django.shortcuts import render
from .models import Product


def all_products(request):

    products = Product.objects.all()

    context = {
        'products': products,
    }

    return render(request, 'products/products.html', context)

products.html 模板：

{% extends "base.html" %}
{% load static %}

{% block page_header %}
<div class="container header-container">
    <div class="row">
        <div class="col"></div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col">
            {{ products }}
        </div>
    </div>
</div>
{% endblock %}

我的文件夾結構是正確的，但我會在這里發布以防萬一：

任何幫助都會很棒，因為我已經堅持了一段時間了。 謝謝！

模型.py： *

class Product(models.Model):
    category = models.ForeignKey('category', null=True, blank=True, on_delete=models.SET_NULL)
    sku = models.CharField(max_length=254, null=True, blank=True)
    name = models.CharField(max_length=254)
    description = models.TextField()
    price = models.DecimalField(max_digits=6, decimal_places=2)
    rating = models.DecimalField(max_digits=6, decimal_places=2, null=True, blank=True)
    image_url = models.URLField(null=True, blank=True)
    image = models.ImageField(null=True, blank=True)

    def __str__(self):
        return self.name

Answer 1

您需要遍歷傳遞給模板的對象。 例如，

{% for product in products %}
    <img src={{ product.src }} />
    <h3>{{ product.title }}</h3>
    <p>{{ product.desc }}</p>
{% endfor %}

Answer 2

到目前為止，您已經做對了大部分事情。 導致問題的一件事是模板沒有迭代所有產品。

在 views.py 中，Product.objects.all() 返回一個查詢集，你可以想象它是一個包含許多產品實例的列表。

因此，當 Product.objects.all() 產品被傳遞給模板時，您將需要使用循環來迭代產品內的實例。

我假設您的產品模型包含以下三個字段（稍后在我提供的示例中，您可以將它們替換為產品模型中的實際字段）。

• 姓名
• 描述
• 數量

現在，在 Django 模板中，您可以將 {{ products }} 替換為以下代碼。

<table>
    <thead>
    <tr>
        <th scope="col" class="text-nowrap"><span>Product</span></th>
        <th scope="col" class="text-nowrap"><span>Description</span></th>
        <th scope="col" class="text-nowrap"><span>Qty</span></th>
    </tr>
    </thead>
    <tbody>
    {% for product in products %}
        <tr>
            <td><span>{{ product.name }}</span></td><!-- Replace the name with your actual field -->
            <td><span>{{ product.desciption }}</span></td><!-- Replace the desciption with your actual field -->
            <td><span>{{ product.qty }}</span></td><!-- Replace the qty with your actual field -->
        </tr>
    {% endfor %}
    </tbody>
</table>

通過上面的例子，最重要的部分是

{% for product in products %}
    <tr>
        <td><span>{{ product.name }}</span></td>
        <td><span>{{ product.desciption }}</span></td>
        <td><span>{{ product.qty }}</span></td>
    </tr>
{% endfor %}

它類似於以下python代碼。

for product in products:
    print(product.name)
    print(product.desciption)
    print(product.qty)

結果，現在模板應該在桌子上顯示產品。