新建名为 goods 应用
python manage.py startapp goods
修改 chapter1/settings.py 文件
在 INSTALLED_APPS 数组中添加 goods
在对象 TEMPLATES.OPTIONS 中添加 django.template.context_processors.media
添加三个常量
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
修改 goods/models.py 文件
from django.db import models
# Create your models here.
class GoodsInfo(models.Model):
name = models.CharField(max_length=30, verbose_name='商品名称')
price = models.FloatField(verbose_name='商品价格', default=20.0)
weight = models.IntegerField(verbose_name='商品重量', default=500)
image = models.ImageField(upload_to='upload/%Y/%m', verbose_name='商品图片', default='upload/default.jpg')
isnew = models.BooleanField(verbose_name='是否新品', default=False)
details = models.CharField(verbose_name='商品详情', default='')
def __str__(self):
return self.name
修改 goods/views.py 文件
from django.shortcuts import render
from django.views.generic.list import ListView
from goods.models import GoodsInfo
# Create your views here.
class GoodsListView(ListView):
model = GoodsInfo
template_name = 'goods_list.html'
context_object_name = 'goods'
添加 templates/goodslist.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>商品列表</title>
</head>
<body>
<div class="header" style="height: 100px"></div>
<div class="main_wrap clearfix">
<div class="l_wrap clearfix">
<div class="new_goods">
<h3>新品推荐</h3>
<ul>
{% for good in goods %} {% if good.is_new %}
<li>
<a href="#"><img src="/media/{{good.image}}" /></a>
<h4><a href="#">{{good.name}}</a></h4>
<div class="price">￥{{good.price}}</div>
</li>
{% endif %} {% endfor %}
</ul>
</div>
</div>
<div class="r_wrap clearfix">
<div class="sort_bar">
<a href="#" class="active">默认</a>
<a href="#">价格</a>
<a href="#">人气</a>
</div>
<ul class="good_type_list clearfix">
{% for good in goods %} {% if good.is_new == False %}
<li>
<a href="#"><img src="/media/{{good.image}}" /></a>
<h4><a href="#">{{good.name}}</a></h4>
<div class="operate">
<span class="price">￥{{good.price}}</span>
<span class="unit">{{good.price}}/{{good.weight}}g</span>
<a href="#" class="add_goods" title="加入购物车"></a>
</div>
</li>
{% endif %} {% endfor %}
</ul>
</div>
</div>
<div class="footer" style="height: 100px"></div>
</body>
</html>
修改 chapter1/urls.py 文件
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('users/', include('users.urls')),
path('book/', include('book.urls')),
path('admin/', admin.site.urls),
path('goods/', include('goods.urls'))
]
urlpatterns += staticfiles_urlpatterns()
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
新建 goods/urls.py 文件
from django.urls import path, re_path
from . import views
app_name = 'goods'
urlpatterns = [
path('goodslist/', views.GoodsListView.as_view()),
re_path('gooddetail/(?P<goods_id>\d+)/$', views.detailView.as_view(), name='gooddetail')
]
修改 goods/admin.py 文件
from django.contrib import admin
from goods.models import GoodsInfo
# Register your models here.
class GoodsInfoAdmin(admin.ModelAdmin):
list_display = ('id', 'name')
admin.site.register(GoodsInfo, GoodsInfoAdmin)
下载所需要的资源文件
依次创建 static\css 文件夹跟 media/upload 文件夹
把下载到的资源如下图放置
执行迁移操作
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
启动 SqliteStudio 添加数据
INSERT INTO goods_goodsinfo (name, price, weight, image, isnew, details)
VALUES
('苹果', 20, 500, 'upload/goods_detail.jpg', 1, '这是一个苹果的详情'),
('橙子', 25, 600, 'upload/goods_detail.jpg', 0, '这是一个橙子的详情'),
('香蕉', 15, 400, 'upload/goods_detail.jpg', 1, '这是一个香蕉的详情'),
('西瓜', 50, 3000, 'upload/goods_detail.jpg', 1, '这是一个西瓜的详情'),
('草莓', 30, 200, 'upload/goods_detail.jpg', 0, '这是一箱包含20个草莓的混合水果'),
('樱桃', 40, 300, 'upload/goods_detail.jpg', 1, '这是一箱包含30个樱桃的混合水果');
新建 templates/gooddeail.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>商品详情</title>
<link rel="stylesheet" href="/static/css/reset.css" />
<link rel="stylesheet" href="/static/css/main.css" />
</head>
<body>
<div class="header" style="height: 100px"></div>
<div class="goods_detail_con clearfix">
<div class="goods_detail_pic fl"><img src="/static/goods_detail.jpg" /></div>
<div class="goods_detail_list fr">
<h3>{{good.name}}</h3>
<div class="prize_bar">
<span class="show_pirze">￥<em>{{goods.price}}</em></span>
<span class="show_unit">单 位: {{goods.weight}}g</span>
</div>
</div>
<div class="goods_num clearfix">
<div class="num_name fl">数 量:</div>
<div class="num_add fl">
<input type="text" class="num_show fl" value="1" />
<a href="javascript:;" class="add fr">+</a>
<a href="javascript:;" class="minus fl">-</a>
</div>
</div>
<div class="total">总价: <em>{{goods.price}}</em></div>
<div class="operate_btn">
<a href="javascript:;" class="buy_btn">立即购买</a>
<a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>
</div>
</div>
<div class="main_wrap clearfix">
<div class="l_warp fl clearfix">
<div class="new_goods">
<h3>新品推荐</h3>
<ul>
<li>
<a href="#"><img src="/static/goods001.jpg" /></a>
<h4><a href="#">进口柠檬</a></h4>
<div class="prize">￥3.90</div>
</li>
<li>
<a href="#"><img src="/static/goods002.jpg" /></a>
<h4><a href="#">玫瑰香葡萄</a></h4>
<div class="prize">￥16.80</div>
</li>
</ul>
</div>
</div>
<div class="r_warp fl clearfix">
<ul class="detail_tab clearfix">
<li class="active">商品介绍</li>
<li>评论</li>
</ul>
<div class="tab_content">
<dl>
<dt>商品详情</dt>
<dd>{{goods.details}}</dd>
</dl>
</div>
</div>
</div>
<div class="fotter" style="height: 100px;"></div>
</body>
</html>
访问 http://127.0.0.1:8000/goods/gooddetail/1/
