查看“Python Web开发:制作“产品详情”页面”的源代码
←
Python Web开发:制作“产品详情”页面
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==基本流程== 1) 用户在产品列表中单击某一产品链接,该链接包含产品的唯一id 作为附带参数 2)服务器接收请求,通过定义好的URL调用带参数的视图函数进行处理 3)视图函数根据传入的id参数从数据库中查找对应的产品,找到产品后通过render()函数返回产品内容给客户端 ==实训步骤== ===传递id参数=== 原先产品列表页面,单击产品链接那个参数是写死的,那不行。 <nowiki> <a href="#" class="thumbnail row-4"> <img class="img-responsive" src="{{img.photo.url}}"> </a> <a href="#" class="btn btn-primary" role="button"> 查看详情 </a></nowiki> 把传递的参数改成模板变量来表示:(产品图片和查看详情的链接) <nowiki><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> </nowiki> ===添加路由=== 为产品详情页面添加一个路由: productsApp/urls.py: <nowiki> 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'),#产品详情 ]</nowiki> ===编写视图函数=== productsApp/views.py: <nowiki> 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, }) </nowiki> *get_object_or_404: 根据模型id查找指定的产品数据,如果查找不到则返回404错误。 *找到产品后,修改浏览量 并保存 *返回找到的产品变量product 供前端使用 ===编写网页模板=== productsApp/templates 文件夹新增productDetail.html: <nowiki> {% 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 %} </nowiki> ===编辑CSS文件=== products.css: <nowiki> .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; }</nowiki> ==效果图== [[文件:python21051108.png|900px]] .
返回至
Python Web开发:制作“产品详情”页面
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息