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.