Python Web开发：路由传递参数实现页面切换

项目背景

实现“产品中心”模块开发，对应项目中的producetApp应用

根据需求，需开发三个子页面：家用机器人，智能监控，人脸识别解决方案。

三个子页面相当于产品的列表页，当用户点击某一项时，进入产品的详情页。

技术实现

在上一章开发时，我们设计子页面是设计了三个相互独立的子页面

每个页面的样式大部分是重复的，

为了提高开发效率，我们可以让每个子页面共享同一个访问路由

并且共享同一个视图处理函数，仅需在路由后面附带不同的参数，

用参数来区分不同的子页面。

实现步骤

新建网页

在productApp应用中创建一个templates文件夹，

新建一个productList.html,集成base.html模板：

{% 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 %}

注意：

{% block title %}处采用模板变量{{productName}}填入内容，后台在渲染过程中需额外传入productName参数

每个产品的链接href属性均采用下述形式：

href="{% url 'productsApp:products' 'robot' %}" 
href="{% url '应用名:路由名' '字符串' %}"

最后的字符串是参数。通过使用路由传参，只需要定义一个通用的URL映射入口，视图处理函数就能渲染不同的页面。

修改链接

“产品中心”的三个页面的链接修改后，base.html模板里的链接也需要修改：

<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>

<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>

定义路由

from django.urls import path
from . import views

app_name = 'productsApp'

urlpatterns = [
    path('products/<str:productName>/',views.products,name='products')
]

要从URL中捕获值，需要使用尖括号<>来定义路由附带的参数，参数类型次数为str，参数名称为productName

编辑视图函数

修改productsApp/views.py:

删除原先的视图函数，然后添加一个新的带参数的处理函数

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,
        })

该视图函数带参数，参数即为网页中 URL路径中的参数，

在函数中prucuctName参数转换为中文，再传回到页面相应位置处，此处为title

从本质上说，后台渲染的只是一个页面，只不过该页面会根据不同的路由参数进行内容调整。

可极大的提高开发效率。