查看“Python Web开发:路由传递参数实现页面切换”的源代码
←
Python Web开发:路由传递参数实现页面切换
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==项目背景== 实现“产品中心”模块开发,对应项目中的producetApp应用 根据需求,需开发三个子页面:家用机器人,智能监控,人脸识别解决方案。 三个子页面相当于产品的列表页,当用户点击某一项时,进入产品的详情页。 ==技术实现== 在上一章开发时,我们设计子页面 是设计了三个相互独立的子页面 每个页面的样式大部分是重复的, 为了提高开发效率,我们可以让每个子页面共享同一个访问路由 并且共享同一个视图处理函数,仅需在路由后面附带不同的参数, 用参数来区分不同的子页面。 ==实现步骤== ===新建网页=== 在productApp应用中创建一个templates文件夹, 新建一个productList.html,集成base.html模板: <nowiki> {% extends "base.html" %} {% load staticfiles %} {% block title %} {{productName}} {% endblock %} {% block content %} <link href="{% static 'css/products.css' %}" rel="stylesheet"> <!-- 广告横幅 --> <div class="container-fluid"> <div class="row"> <img class="img-responsive model-img" src="{% static 'img/products.jpg' %}"> </div> </div> <!-- 主体内容 --> <div class="container"> <div class="row row-3"> <!-- 侧边导航栏 --> <div class="col-md-3"> <div class="model-title"> 产品中心 </div> <div class="model-list"> <ul class="list-group"> <li class="list-group-item" id="robot"> <a href="{% url 'productsApp:products' 'robot' %}">家用机器人</a> </li> <li class="list-group-item" id="monitor"> <a href="{% url 'productsApp:products' 'monitor' %}">智能监控</a> </li> <li class="list-group-item" id="face"> <a href="{% url 'productsApp:products' 'face' %}"> 人脸识别解决方案</a> </li> </ul> </div> </div> <!-- 说明文字和图片 --> <div class="col-md-9"> <div class="model-details-title"> {{productName}} </div> <!-- 此处填入产品列表内容 --> <div class="model-details"> </div> </div> </div> </div> {% endblock %}</nowiki> 注意: <nowiki>{% block title %}处采用模板变量{{productName}}填入内容,后台在渲染过程中需额外传入productName参数</nowiki> 每个产品的链接href属性均采用下述形式: href="{% url 'productsApp:products' 'robot' %}" href="{% url '应用名:路由名' '字符串' %}" 最后的字符串是参数。通过使用路由传参,只需要定义一个通用的URL映射入口,视图处理函数就能渲染不同的页面。 ===修改链接=== “产品中心”的三个页面的链接修改后,base.html模板里的链接也需要修改: <nowiki> <li class="dropdown nav-top"> <a href="#" class="dropdown-toggle on" data-toggle="dropdown"> 作品中心</a> <ul class="dropdown-menu"> <li><a href="{% url 'productsApp:products' 'robot' %}"> 家用机器人</a></li> <li><a href="{% url 'productsApp:products' 'monitor' %}"> 智能监控</a></li> <li><a href="{% url 'productsApp:products' 'face' %}"> 人脸识别解决方案</a></li> </ul> </li></nowiki> <nowiki> <div class="col-md-2"> <dl> <dt>作品中心</dt> <dd><a href="{% url 'productsApp:products' 'robot' %}">家用机器人</a></dd> <dd><a href="{% url 'productsApp:products' 'monitoring' %}">智能监控</a></dd> <dd><a href="{% url 'productsApp:products' 'face' %}">人脸识别解决方案</a></dd> </dl> </div></nowiki> ===定义路由=== <nowiki> from django.urls import path from . import views app_name = 'productsApp' urlpatterns = [ path('products/<str:productName>/',views.products,name='products') ] </nowiki> 要从URL中捕获值,需要使用尖括号<>来定义路由附带的参数,参数类型次数为str,参数名称为productName ===编辑视图函数=== 修改productsApp/views.py: 删除原先的视图函数,然后添加一个新的带参数的处理函数 <nowiki> from django.shortcuts import render from django.shortcuts import HttpResponse # Create your views here. def products(request,productName): submenu = productName if productName == 'robot': productName = '家用机器人' elif productName == 'monitor': productName = '智能监控' else: productName = '人脸识别解决方案' return render( request,'productList.html',{ 'active_menu':'products', 'sub_menu':submenu, 'productName':productName, }) </nowiki> 该视图函数带参数,参数即为网页中 URL路径中的参数, 在函数中prucuctName参数转换为中文,再传回到页面相应位置处,此处为title 从本质上说,后台渲染的只是一个页面,只不过该页面会根据不同的路由参数进行内容调整。 可极大的提高开发效率。 ==效果图== [[文件:python21050803.png|600px]] [[文件:product21050802.png|600px]]
返回至
Python Web开发:路由传递参数实现页面切换
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息