django-plotly-dash中GET请求参数传递失败及initial_arguments报错问题

初始尝试：通过dcc.Location获取URL参数失败 #

尝试通过GET请求（如my_webpage.html?value=1）向Plotly应用传递参数，但无法获取到参数信息，相关代码如下：

views.py #

def my_webpage(request):
    return render(request, 'home/my_webpage.html', {})

my_webpage.html #

{%  extends 'base.html' %}
{% load static %}
{% block content %}
    {% load plotly_dash %}
    <div class="{% plotly_class name='my_webpage' %} card" style="height: 100%; width: 100%">
    {% plotly_app name='my_webpage'  ratio=10 %}
    </div>
{% endblock %}

my_webpage.py #

import urllib
from dash import html, dcc, Input, Output
from django_plotly_dash import DjangoDash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = DjangoDash('my_webpage', external_stylesheets=external_stylesheets )
app.layout =  html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content'),
])


@app.callback(Output('page-content', 'children'),
              Input('url', 'search'))  
def display_page(params):
    print("model_view - display_page")
    parsed = urllib.parse.urlparse(params)
    parsed_dict = urllib.parse.parse_qs(parsed.query)

    print(parsed_dict)
    page_content = params
    for i in parsed_dict.keys():
        page_content += f"{i}   {parsed_dict[i]} \n"
    print(params)
    return page_content

问题：dcc.Location的search属性无法获取到主页面URL中的GET参数。

更新尝试：使用initial_arguments传递参数报错 #

改用initial_arguments传递参数时，触发错误：dash() got an unexpected keyword argument 'id'，相关代码如下：

views.py #

def my_webpage(request):
    id = request.GET.get('id', None)
    context = {}
    context['dash_context'] = {'target_id': {'value': id}}
    print(context)
    return render(request, 'home/my_webpage.html',context)

my_webpage.html #

{%plotly_app name='my_webpage'  initial_arguments=dash_context ratio=10% }

my_webpage.py #

from django_plotly_dash import DjangoDash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = DjangoDash('my_webpage',  id='target_id', external_stylesheets=external_stylesheets )

解决方案 #

1. 修正initial_arguments的正确用法 #

DjangoDash构造函数不支持id参数，需通过隐藏组件接收初始参数，具体步骤：

步骤1：修改views.py传递参数

def my_webpage(request):
    # 提取GET参数
    target_id = request.GET.get('id', None)
    # 构造初始参数，键名对应Dash组件id
    context = {
        'initial_args': {'input_id': {'value': target_id}}
    }
    return render(request, 'home/my_webpage.html', context)

步骤2：修改模板传递initial_arguments

{%  extends 'base.html' %}
{% load static %}
{% block content %}
    {% load plotly_dash %}
    <div class="{% plotly_class name='my_webpage' %} card" style="height: 100%; width: 100%">
        {% plotly_app name='my_webpage' initial_arguments=initial_args ratio=10 %}
    </div>
{% endblock %}

步骤3：修改Dash应用接收参数

from dash import html, dcc, Input, Output
from django_plotly_dash import DjangoDash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = DjangoDash('my_webpage', external_stylesheets=external_stylesheets )

app.layout = html.Div([
    # 用隐藏组件接收初始参数
    dcc.Input(id='input_id', type='hidden'),
    html.Div(id='page-content'),
])

@app.callback(
    Output('page-content', 'children'),
    Input('input_id', 'value')
)
def display_page(input_value):
    return f"接收到的参数：{input_value}"

2. 关于dcc.Location无法获取参数的说明 #

django-plotly-dash中，Dash应用运行在独立路由下，主页面的URL参数不会自动同步到Dash应用的dcc.Location中。若要获取主页面的GET参数，优先使用上述initial_arguments传递方式；若需直接通过URL传参给Dash应用，可配置Dash应用的独立路由并直接访问该路由（但会脱离Django模板上下文）。

内容的提问来源于stack exchange，提问作者DataYoda