Django 手鲁一个商品展示系统
此商品展示系统包括一个Product模型，用于存储商品的名称、描述、价格和创建日期。有两个视图函数，一个用于显示所有商品的列表，另一个用于显示单个商品的详细信息。对应的URL模式定义在urls.py中。模板文件包括一个基本模板(base.html)，以及两个特定于视图函数的模板(product_list.html和product_detail.html)。
要添加商品信息，可以在Django的后台管理界面中添加或修改Product模型实例。要展示商品信息，可以访问product_list视图函数对应的URL，即yourdomain.com/products/，这将会展示所有商品的列表。要查看单个商品的详细信息，可以点击商品名称或者访问 ，vourdomain.com/products/1/…
1、 创建Django项目和应用
django-admin startproject goods_service
cd goods_service
python manage.py startapp goods
2、配置应用
- 在goods_service/settings.py文件的INSTALLED_APPS列表中添加myapp应用：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'goods',
]
3 商品模型配置 models.py
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=200)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
created_at = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.name
4 视图配置views.py
### ### goods_service/goods/views.py
from django.shortcuts import render
from .models import Product
def product_list(request):
products = Product.objects.all()
return render(request, 'product_list.html', {'products': products})
def product_detail(request, pk):
product = Product.objects.get(pk=pk)
return render(request, 'product_detail.html', {'product': product})
5 路由配置urls.py
### ### goods_service/goods_service/urls.py
from django.contrib import admin
from django.urls import path
from goods.views import product_list, product_detail
urlpatterns = [
path('admin/', admin.site.urls),
path('', product_list, name='product_list'),
path('<int:pk>/', product_detail, name='product_detail'),
]
6 模版文件
product_list.html 模版优化
添加了一些CSS样式来定义.product-card类，使每个商品以卡片矩阵方式展示。我们还在每个商品卡片中添加了一个标签来展示商品图片，并使用{{ product.photo.urll }}来获取商品图片的URL。
在body选择器中添加了background-color属性来定义整个页面的背景颜色。你可以根据需要修改颜色值，选择一个柔和的背景颜色。同时，我们也在.product-card类中添加了background-color属性，用于定义商品卡片的背景颜色。
请注意，颜色值可以使用十六进制、RGB、RGBA等格式来表
<!DOCTYPE html>
<html>
<head>
<title>My Goods</title>
<style>
body {
background-color: #E1F5FE; /* 柔和的背景颜色 */
}
.product-card {
display: inline-block;
width: 300px;
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: left;
background-color: #DCEDC8; /* 商品卡片的背景颜色 */
}
.product-card img {
width: 200px;
height: 200px;
object-fit: cover;
margin-bottom: 10px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="{% url 'product_list' %}">返回商品列表</a></li>
</ul>
</nav>
<h1>商品信息：</h1>
<div class="product-grid">
{% for product in products %}
<div class="product-card">
<!-- <img src="{{ product.image.url }}" alt="{{ product.name }}"> -->
<img src="{{ product.photo.url }}" alt="{{ product.name }}">
<h3>商品名称： {{ product.name }}</h3>
<h4>商品价格： {{ product.price }}</h4>
<h4>商品创建时间： {{ product.created_at }}</h4>
<p>商品描述： {{ product.description }}</p>
<a href="{% url 'product_detail' product.pk %}">View Details</a>
</div>
{% endfor %}
</div>
</body>
</html>
product_detail.html优化
<!DOCTYPE html>
<html>
<head>
<title>My Goods</title>
<style>
body {
font-family: Arial, sans-serif;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #f9d5e5, #ffe6e6);
}
header {
background-color: #D3D3D3;
color: #000;
padding: 10px;
font-size: 36px;
letter-spacing: 6px; /* 设置字间距为6像素 */
line-height: 20px;
text-align: center;
}
header img {
float: left; /* 图标左浮动 */
margin-right: 20px; /* 图标与标题间距 */
height: 50px; /* 图标高度 */
}
nav {
background-color: #333;
color: #fff;
display: flex;
justify-content: flex-end;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 2);
text-align: center;
}
.product-info {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
text-align: left;
border: 2px solid #ccc;
padding: 10px;
border-radius: 5px;
}
.image-container {
grid-row: 1 / span 2;
grid-column: 1;
}
h3, h4, p {
margin: 0;
}
img {
max-width: 100%;
}
.btn {
position: fixed;
left: 20px;
bottom: 20px;
padding: 10px 20px;
background-color: #ccc;
border: none;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<header>
<a href="/products/">
<img src="/product_photos/wr.png" alt="logo">
</a>
<h2>商品详情</h2>
</header>
<div class="container">
<h1>{{ product.name }}</h1>
<div class="product-info">
<div class="image-container">
<img src="{{ product.photo.url }}" alt="{{ product.name }}">
</div>
<div class="text-container">
<h3>商品名称： {{ product.name }}</h3>
<h4>商品价格： {{ product.price }}</h4>
<h4>商品创建时间： {{ product.created_at }}</h4>
<p>商品描述： {{ product.description }}</p>
</div>
</div>
</div>
<a href="{% url 'product_list' %}" class="btn">
<button>返回商品列表首页</button>
</a>
</body>
</html>
product_form.html
<!DOCTYPE html>
<html>
<head>
<title>My Goods</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(to bottom, #f9d5e5, #ffe6e6);
margin: 0;
padding: 0;
}
header {
background-color: #D3D3D3;
color: #000;
padding: 10px;
font-size: 36px;
letter-spacing: 6px; /* 设置字间距为6像素 */
line-height: 20px;
text-align: center;
}
header img {
float: left; /* 图标左浮动 */
margin-right: 20px; /* 图标与标题间距 */
height: 50px; /* 图标高度 */
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
background: #f2f2f2;
}
nav li {
display: inline-block;
margin-right: 10px;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
h1 {
text-align: center;
margin-top: 20px;
}
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input,
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background: #45a049;
}
.btn {
position: fixed;
left: 20px;
bottom: 20px;
padding: 10px 20px;
background-color: #ccc;
border: none;
border-radius: 5px;
color: #fff;
}
</style>
</head>
<body>
<header>
<a href="/products/">
<img src="/product_photos/wr.png" alt="logo">
</a>
<h2>新增商品信息</h2>
</header>
{% block content %}
<h1>Add New Product</h1>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
</div>
<div>
<label for="description">Description:</label>
<textarea name="description" id="description"></textarea>
</div>
<div>
<label for="price">Price:</label>
<input type="text" name="price" id="price">
</div>
<div>
<label for="created_at">Created At:</label>
<input type="date" name="created_at" id="created_at">
</div>
<div>
<label for="photo">Photo:</label>
<input type="file" name="photo" id="photo">
</div>
<div>
<label for="video">Video:</label>
<input type="file" name="video" id="video">
</div>
<button type="submit">Add Product</button>
</form>
{% endblock %}
<a href="{% url 'product_list' %}" class="btn">
<button>返回商品列表首页</button>
</a>
</body>
</html>
7 创建数据库、表结构和用户
python manage.py makemigrations
python manage.py migrate
python manage.py createsuperuser [admin/admin]
8 添加商品信息
要添加新商品信息，可以使用Django的后台管理界面或者在代码中手动创建Product模型实例.
在Django中添加新商品信息，包括名称、价格、描述、创建日期、照片和视频，创建了一个新的Product模型实例，设置了名称、描述、价格和创建日期，并将其保存到数据库中。此外，还使用了Django的文件存储API，将商品的照片和视频文件保存到了相应的字段中。
下面创建了一个新的Product模型实例，设置了名称、描述、价格和创建日期，并将其保存到数据库中
from datetime import datetime
from django.core.files import File
from .models import Product
# 创建一个新的商品实例
new_product = Product(
name='New Product',
description='This is a new product.',
price=9.99,
created_at=datetime.now()
)
# 设置商品的照片
with open('path/to/photo.jpg', 'rb') as photo_file:
new_product.photo.save('photo.jpg', File(photo_file), save=True)
# 设置商品的视频
with open('path/to/video.mp4', 'rb') as video_file:
new_product.video.save('video.mp4', File(video_file), save=True)
# 保存商品实例到数据库
new_product.save()
# 获取商品实例
new_product = Product.objects.get(id=1)
views.py
定义了一个add_product视图函数，用于展示添加新商品的表单页面，并处理表单提交的数据。在表单提交时，从request对象中获取表单数据，并创建一个新的Product模型实例，将表单数据设置为实例的属性值，并将实例保存到数据库中。最后，重定向到商品列表页面。在GET请求时，展示包含表单的HTML页面。
from datetime import datetime
from django.shortcuts import render, redirect
from .models import Product
def add_product(request):
if request.method == 'POST':
# 获取表单数据
name = request.POST.get('name')
description = request.POST.get('description')
price = request.POST.get('price')
created_at = request.POST.get('created_at')
photo = request.FILES.get('photo')
video = request.FILES.get('video')
# 创建一个新的商品实例
new_product = Product(
name=name,
description=description,
price=price,
created_at=created_at,
photo=photo,
video=video
)
# 保存商品实例到数据库
new_product.save()
# 重定向到商品列表页面
return redirect('product_list')
# 渲染添加商品表单页面
return render(request, 'product_form.html')
9 查看商品信息
配置视图views.py
#查看商品列表
from django.shortcuts import render
from .models import Product
#查询了数据库中的所有Product模型实例，并将它们传递给名为product_list.html的模板文件进行展示。
# 在模板文件中，可以使用Django模板语言来访问这些Product模型实例的属性，例如名称、价格、描述、照片等。
def product_list(request):
# 查询所有商品实例
products = Product.objects.all()
# 渲染商品列表模板，并传递products变量
return render(request, 'product_list.html', {'products': products})
配置路由urls.py
from django.contrib import admin
from django.urls import path
from goods.views import product_list, product_detail,add_product
urlpatterns = [
path('admin/', admin.site.urls),
# path('', product_list, name='product_list'),
path('<int:pk>/', product_detail, name='product_detail'),
path('add_product/', add_product, name='add_product'),
path('products/', product_list, name='product_list'),
]
配置图片路由
Django项目的urls.py文件中定义一个名为product_photos的URL路由，并将其映射到MEDIA_ROOT指定的媒体目录。
并将其映射到你的媒体目录product_photos。http://localhost:8000/product_photos/flows.jpg
#这个路由只在DEBUG模式下生效.因为在生产环境中，需要使用其他的方式来处理媒体文件
from django.contrib import admin
from django.urls import path
from goods.views import product_list, product_detail,add_product
urlpatterns = [
path('admin/', admin.site.urls),
# path('', product_list, name='product_list'),
path('<int:pk>/', product_detail, name='product_detail'),
path('add_product/', add_product, name='add_product'),
path('products/', product_list, name='product_list'),
]
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
if settings.DEBUG: # 只在DEBUG模式下使用
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
10 添加视频及播放功能
定义模型添加表字段 models.py
### ###goods_service/goods/models.py
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=200)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
created_at = models.DateTimeField(auto_now_add=True)
photo = models.ImageField(upload_to='product_photos/', blank=True)
video = models.FileField(upload_to='product_videos/', blank=True)
def __str__(self):
return self.name
配置视图
### ### goods_service/goods/views.py
from django.shortcuts import render, redirect
from .models import Product
# 定义一个视图函数，用于处理添加商品信息的请求
def add_product(request):
if request.method == 'POST':
# 获取表单数据
name = request.POST.get('name')
description = request.POST.get('description')
price = request.POST.get('price')
created_at = request.POST.get('created_at')
photo = request.FILES.get('photo')
video = request.FILES.get('video')
# 创建一个新的商品实例
new_product = Product(
name=name,
description=description,
price=price,
created_at=created_at,
photo=photo,
video=video,
)
# 保存商品实例到数据库
new_product.save()
# 重定向到商品列表页面
return redirect('product_list')
# 渲染添加商品表单页面
return render(request, 'product_form.html')
数据迁移和表字段添加
python manage.py makemigrations
python manage.py migrate
模版引用配置
product_list.html 视频播放配置
使视频元素相对于其包含元素的中心位置垂直和水平居中。请注意，这种方法假定包含视频的元素具有相对或绝对定位。如果您的包含元素没有定位，则此方法可能无法正常工作。
</style>
video {
position: absolute;
top: 50%;
height: 50px;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<video controls>
<source src="/product_videos/1.mp4" type="video/mp4">
</video>
</body>
----- 视频居中存放---
<style>
video {
position: relative;
width: 60%;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
top: 50px;
}
.video video {
display: block;
margin: 0 auto;
}
</style>
<div class="video">
<video controls>
<source src="/product_videos/2.mp4" type="video/mp4">
</video>
</div>
