Django 不顯示動態列表內容
[英]Django not showing dynamic list content
問題描述
我正在制作一個網站，在其中展示使用翻轉卡的每種產品的規格，並且我將 django 作為后端。 我試圖使用 jinja 格式使規范動態化，但每次我嘗試將多個對象放入列表時，它都會使代碼混亂。
之前的views.py
def prodospecs(request):
product1 = product()
product1.name = 'iPhone 12 Pro 5G'
product1.screen = '6.1" Super Amoled Display 60hz'
product1.chipset = 'A14'
product1.camera = 'Triple Camera Setup (UltraWide, Telephoto, Wide)'
product1.special = 'New Design'
product1.price = 999
product2 = product()
product2.name = 'S21 Ultra 5G'
product2.screen = '6.8" Amoled Display 120hz'
product2.chipset = 'Snapdragon 888, Exynos 2100'
product2.camera = 'Quad Camera Setup (UltraWide, 2 Telephoto, Wide)'
product2.special = 'New Camera Design and S-Pen Support'
product2.price = 1199
product3 = product()
product3.name = 'Asus Zenbook Duo'
product3.screen = '14 inch 16:9'
product3.chipset = 'i5 or i7'
product3.camera = '720p Webcam'
product3.special = 'Two Displays'
product3.price = 999
return render(request, 'prodospecs.html', {'product1' : product1,'product2' : product2, 'product3' : product3 })
這個工作並顯示了所有必要的信息
之后的views.py
def prodospecs(request):
product1 = product()
product1.name = 'iPhone 12 Pro 5G'
product1.screen = '6.1" Super Amoled Display 60hz'
product1.chipset = 'A14'
product1.camera = 'Triple Camera Setup (UltraWide, Telephoto, Wide)'
product1.special = 'New Design'
product1.price = 999
product2 = product()
product2.name = 'S21 Ultra 5G'
product2.screen = '6.8" Amoled Display 120hz'
product2.chipset = 'Snapdragon 888, Exynos 2100'
product2.camera = 'Quad Camera Setup (UltraWide, 2 Telephoto, Wide)'
product2.special = 'New Camera Design and S-Pen Support'
product2.price = 1199
product3 = product()
product3.name = 'Asus Zenbook Duo'
product3.screen = '14 inch 16:9'
product3.chipset = 'i5 or i7'
product3.camera = '720p Webcam'
product3.special = 'Two Displays'
product3.price = 999
prods = [product1, product2, product3]
return render(request, 'prodospecs.html', {'products': prods})
雖然這個沒有顯示任何信息
prodospecs.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listen to Talk Tech Teen Tech</title>
<link rel="stylesheet" href="{% static 'prodospecs.css' %}">
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li class = "logo"><img src="{% static 'images/icon-1.png' %}"></li>
<li><a href = "index" class = "link" style = "text-decoration: none;">Home</a></li>
<li><a href = "listen" class = "link" style = "text-decoration: none;">Listen</a></li>
<li><a href = "prem" class = "link" style = "text-decoration: none;">Premium Techy</a></li>
<li class = "active">Product Specs</li>
<li><a href = "contact" class = "link" style = "text-decoration: none;">Contact</a></li>
<li><a href ="signup" class ="signup-btn"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="title">
<h1>Product Specs</h1>
<p>The list of important specs for each product that we talk about on Talk Tech Teen Tech</p>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product1.name}}</h1>
<p>{{product1.screen}}</p>
<p>{{product1.chipset}}</p>
<p>{{product1.camera}}</p>
<p>{{product1.special}}</p>
<p>Price: ${{product1.price}} USD</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/s21ultra.png' %}" alt="s21" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product2.name}}</h1>
<p>{{product2.screen}}</p>
<p>{{product2.chipset}}</p>
<p>{{product2.camera}}</p>
<p>{{product2.special}}</p>
<p>Price: ${{product2.price}} USD</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/zenbookduo.png' %}" alt="s21" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product3.name}}</h1>
<p>{{product3.screen}}</p>
<p>{{product3.chipset}}</p>
<p>{{product3.camera}}</p>
<p>{{product3.special}}</p>
<p>Price: ${{product3.price}} USD</p>
</div>
</div>
</div>
</body>
任何幫助將不勝感激
3 個解決方案
解決方案1
0 已采納 2021-03-08 06:43:51
您想循環訪問產品：
{% for product in products %}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
</div>
</div>
</div>
{% endfor %}
解決方案2
0 2021-03-08 06:58:24
在prodospecs.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Listen to Talk Tech Teen Tech</title>
<link rel="stylesheet" href="{% static 'prodospecs.css' %}">
</head>
<body>
<div class="container">
<div class="menu">
<ul>
<li class = "logo"><img src="{% static 'images/icon-1.png' %}"></li>
<li><a href = "index" class = "link" style = "text-decoration: none;">Home</a></li>
<li><a href = "listen" class = "link" style = "text-decoration: none;">Listen</a></li>
<li><a href = "prem" class = "link" style = "text-decoration: none;">Premium Techy</a></li>
<li class = "active">Product Specs</li>
<li><a href = "contact" class = "link" style = "text-decoration: none;">Contact</a></li>
<li><a href ="signup" class ="signup-btn"><span>Sign Up</span></a></li>
</ul>
</div>
<div class="title">
<h1>Product Specs</h1>
<p>The list of important specs for each product that we talk about on Talk Tech Teen Tech</p>
</div>
{% for product in products %}
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="{% static 'images/iPhone12Pro.png' %}" alt="12pro" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
解決方案3
0 2021-03-08 07:17:25
You need to add some special tags {% for ... in ... %} and {{ variable }}. They are part of the Django Template Language. This for loop will iterate over a list of objects using a for. The {{ product.<field name> }} renders the name of the product in the HTML template, generating a dynamic HTML document.
Your answer:
{% for product in products %}
<h1>{{product.name}}</h1>
<p>{{product.screen}}</p>
<p>{{product.chipset}}</p>
<p>{{product.camera}}</p>
<p>{{product.special}}</p>
<p>Price: ${{product.price}} USD</p>
{% endfor %}
One small Suggestion(for code optimisation): Instead of creating a product object in views ,Its better to create those objects in models.py like below
**Models.py:**
class Product(models.Model):
name = models.CharField(max_length=30, unique=True)
screen= models.CharField(max_length=100)
chipset= models.CharField(max_length=100)
camera= models.CharField(max_length=100)
special= models.CharField(max_length=100)
price= models.DecimalField(max_digits=6, decimal_places=2)
def __str__(self):
return self.name
Open the Command Line Tools, activate the virtual environment, go to the folder where the manage.py file is, and run the commands below:
python manage.py makemigrations
As an output you will get something like this:
Migrations for 'products':
boards/migrations/0001_initial.py
- Create model Product
- Add field name to Product
- Add field screen to Product
- Add field chipset to Product
- Add field camera to Product
- Add field special to Product
- Add field price to Product
At this point, Django created a file named 0001_initial.py inside the app/migrations directory. It represents the current state of our application’s models. In the next step, Django will use this file to create the tables and columns.
The next step now is to apply the migration we generated to the database:
python manage.py migrate
After this go to /admin and create your products there.
That’s it! Your Product objects is ready to be use.
列表的動態數量在 Django 分頁中顯示錯誤？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.