第14次（简要版）-商品详情
模型实现
1、在goods/models.py中，新增模型Guige_leixing、Guige，Guige_leixing模型代码放在shangpin模型上方，否则可能提示Guige_leixing不存在，
#Guige_leixing
class Guige_leixing(models.Model):# 服饰 白色，黑色# 电子产品 128g 256gname = models.CharField(max_length=100, verbose_name='规格类型')create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")update_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")def __str__(self):return str(self.name)class Meta:verbose_name = '商品规格类型'verbose_name_plural = verbose_name# Guige
class Guige(models.Model):name = models.CharField(max_length=100, verbose_name='规格')guige_leixing = models.ForeignKey(Guige_leixing, verbose_name='规格类型id', null=True, on_delete=models.PROTECT)create_time = models.DateTimeField(auto_now_add=True, verbose_name="创建时间")update_time = models.DateTimeField(auto_now=True, verbose_name="更新时间")def __str__(self):return str(self.name)class Meta:verbose_name = '商品规格'verbose_name_plural = verbose_name
修改shangpin类新增一个字段
guige_leixing = models.ForeignKey(Guige_leixing, on_delete=models.PROTECT, verbose_name='规格类型', null=True)
2、将模型注册到后台管理系统中，打开goods应用下的admin.py文件，添加内容如下
admin.site.register(Guige)
admin.site.register(Guige_leixing)
3、生成迁移文件并执行迁移，
python manage.py makemigrations
python manage.py migrate
刷新查看数据库可发现新表，goods_guige，goods_guige_leixing
4、打开后台管理系统，查看新增的数据库表
商品规格、商品规格类型
通过后台管理系统新增数据
动态加载数据
1、在模版文件夹下新建base.html，作为父模版，同时增加了首页的超链接
<html lang="en">
<head><meta charset="UTF-8"><title>基本模版</title>{% load static %}<link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
</head>
<body>
{% block top %}{# 头部添加背景图片#}<div style="text-align: right;height: 100px;width: 100%;background-image:url({% static 'images/backimage.jpg' %})">{# 添加背景色#}{# <div style="text-align: right;height: 100px;width: 100%;background: lightblue">#}{% if user.is_authenticated %}<div>欢迎您：<em>{{ user.username }}</em><span>|</span><a href="{% url 'auth_app:logout' %} ">退出</a><span>|</span><a href="{% url 'auth_app:register' %}">注册</a><span>|</span><a href="{% url 'auth_app:info' %} ">用户中心</a><span>|</span><a href="{% url 'goods:index' %} ">首页</a>
{# <span>|</span>#}
{# <a href="{% url 'goods:carts' %} ">购物车</a>#}
{# <span>|</span>#}
{# <a href="{% url 'goods:myorder' %} ">我的订单</a>#}</div>{% endif %}</div>
{% endblock top %}
{% block main %}
{% endblock main %}
{% block footer %}
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
2、修改模版文件夹下的index.html，为base.html的子模版，同时新增了一个导航栏用于显示商品类别，可进行检索
{% extends 'base.html' %}
{% load static %}
{% block main %}<div style="height: 30px;width: 100%;text-align: center;background:azure"><p style="width: 100%;height: 30px;margin-left:-400px">{% for leibie in leibie %}<span><a href="{% url 'goods:leixing' leibie.id %}"style="text-decoration: none;color: black">{{ leibie.name }} </a></span>{% endfor %}</p></div>{% for good in shangpin %}<div style="display: inline-block;width:350px;margin:50px">{# <div style="float: left;width:350px;margin:50px" onclick=" window.open('www.baidu.com')">#}<img style="height: 300px;width: 250px" src="{{ MEDIA_URL }}/{{ good.image }}"><div><a style="text-decoration: none;" href="{% url 'goods:detail' good.id %}">{{ good.caption }}</a></div><label>{{ good.name }} </label><label style="color: coral">￥{{ good.price }}</label><img src="{% static 'images/addgwclogo.jpg' %}"style="width: 30px;height: 30px">{# <a style="width: 30px;height: 30px"> 加入购物车</a>#}{# url 'commodity:detail' c.id#}{# <a href="goods:detail/{{ good.id }}" style="width: 30px;height: 30px"> 加入购物车</a>#}</div>{% endfor %}
{% endblock main %}
3、为了实现商品类别检索，需在goods应用下的views.py文件，新增相应视图函数
@login_required()
def leixing(request, id):goods = shangpin.objects.filter(category_id=id)leibie = GoodsCategory.objects.all()return render(request, 'index.html', {'shangpin': goods, 'leibie': leibie})
并修改index函数为
@login_required()
def index(request):shangpin1 = shangpin.objects.all()leibie = GoodsCategory.objects.all()return render(request, 'index.html', {'shangpin': shangpin1, 'leibie': leibie})
4、同时，在goods应用下的urls.py文件文件中，新增相应路由规则
path('leixing/<int:id>',views.leixing,name='leixing'),
5、在goods/views，新增商品详情页的相应的视图函数
@login_required() # 用户未登录时，转向登录界面
def detail(request, id):shangpin1 = shangpin.objects.filter(id=id).first()# print(shangpin1.guige_leixing_id)guige = Guige.objects.filter(guige_leixing_id=shangpin1.guige_leixing_id)return render(request, 'detail.html', {'shangpin': shangpin1, 'guiges': guige})
6、在templates模版文件夹下新增详情页detail.html，内容如下：
{% extends 'base.html' %}
{% load static %}
{% block main %}
<form><div class="con"><div class="a"><img src="{{MEDIA_URL}}/{{shangpin.image}}" style="width:300px;height:300px"></div><div class="b"><p><span>价 格 </span><strongname="huodongjia"><i>￥</i>{{shangpin.price}}</strong></p><br><p><span>说 明 </span>{{shangpin.caption}}</p><br><p><span class="btn active">规 格 </span>{% for guige in guiges %}<label><input type="redio" value="{{guige.name}}" name="redia{{guige.id}}" readonly="readonly"style="width:100px"></label><span> </span>{% endfor%}</p><br><p><span>数 量 </span><span>-</span><span>+</span></p><br><p><input type="submit" value="加入购物车"><input type="submit" value="立即购买"></p></div><div style="margin:0 auto"><h4>详情</h4><div><img src="{{MEDIA_URL}}/{{shangpin.image}}" style="width:600px;height:600px"></div></div></div>
</form>
{% endblock main%}
7、在goods应用下的urls.py文件文件中，新增相应路由规则
path('detail/<int:id>',views.detail,name='detail'),
- css参考，在static文件夹下新建css目录，并在下面新建base.css，内容如下
body {font-size: 20px;/*background-color: #ebf8ff;*/
}* {margin: 0;padding: 0
}.con {width: 60%;height: 400px;margin: 0 auto;/*background: blue;*/
}.con div {width: 50%;height: 100%
}.a {/*background: lightcoral;*/float: left;text-align:center;
}.b {/*background: red;*/float: right;/*text-align:center*/
}
9.效果实现。打开浏览器查看分类效果，点击手机时，显示手机商品，点击电脑时显示电脑商品。