Python Web开发：制作“产品详情”页面

基本流程

1） 用户在产品列表中单击某一产品链接，该链接包含产品的唯一id 作为附带参数

2）服务器接收请求，通过定义好的URL调用带参数的视图函数进行处理

3)视图函数根据传入的id参数从数据库中查找对应的产品，找到产品后通过render()函数返回产品内容给客户端

实训步骤

传递id参数

原先产品列表页面，单击产品链接那个参数是写死的，那不行。

 
<a href="#" class="thumbnail row-4">
                            <img class="img-responsive" src="{{img.photo.url}}">
                        </a>


<a href="#" class="btn btn-primary" role="button">
                                    查看详情
                                </a>

把传递的参数改成模板变量来表示：（产品图片和查看详情的链接）

<a href="{% url 'productsApp:productDetail' product.id %}" class="thumbnail row-4">
                            <img class="img-responsive model-img" src="{{img.photo.url}}">
                        </a>

<a href="{% url 'productsApp:productDetail' product.id %}" class="btn btn-primary" role="button">
                                    查看详情
                                </a>

添加路由

为产品详情页面添加一个路由：

productsApp/urls.py:

from django.urls import path
from . import views

app_name = 'productsApp'

urlpatterns = [
    path('products/<str:productName>/', views.products, name='products'),#产品列表
    path('productDetail/<int:id>/', views.productDetail, name='productDetail'),#产品详情
]

编写视图函数

productsApp/views.py:

from django.shortcuts import get_object_or_404

def productDetail(request, id):
    product = get_object_or_404(Product, id=id)
    product.views += 1
    product.save()
    return render(request, 'productDetail.html', {
        'active_menu': 'products',
        'product': product,
    })

• get_object_or_404: 根据模型id查找指定的产品数据，如果查找不到则返回404错误。
• 找到产品后，修改浏览量 并保存
• 返回找到的产品变量product 供前端使用

编写网页模板

productsApp/templates 文件夹新增productDetail.html:

{% extends "base.html" %}
{% load staticfiles %}

{% block title %}
产品详情
{% endblock %}

{% block content %}
<link href="{% static 'css/products.css' %}" rel="stylesheet">
<!-- 主体内容 -->
<div class="container">
    <div class="model-details-product-title">
        {{product.title}}
    </div>
    <div class="model-details">
        {% for img in product.productImgs.all %}
        <div class="row-4">
            <img class="img-responsive" src="{{img.photo.url}}">
        </div>
        {% endfor %}
        <h3>产品介绍</h3>
        <p>
            {{product.description|linebreaks}}
        </p>
        <h3>参考价格</h3>
        <p>
            {{product.price}}元
        </p>
    </div>
</div>
{% endblock %}

编辑CSS文件

products.css:

.model-details-product-title{
	padding:15px 0px;
	font-size:18px;
	border-bottom:1px #005197 solid; 
	color:#005197;
	margin-bottom:10px;
	margin-top:10px;
	text-align:center;
}

效果图

.