结合 Flask、Bootstrap 和 Dash 应用程序答案

【问题标题】：Combining Flask, Bootstrap and Dash apps结合 Flask、Bootstrap 和 Dash 应用程序
【发布时间】：2018-06-30 00:39:00
【问题描述】：

我将简要说明我目前的情况。

app1 & app2 是 dash 应用，每 5 秒重新加载一次。基本上，一切正常。但是当我通过单击引导导航菜单上的 app2 按钮移动到 app2 选项卡时，我仍然可以看到下面的消息。

127.0.0.1 - - [21/Jan/2018 01:17:00] "POST /app1/_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [21/Jan/2018 01:17:00] "POST /app2/_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [21/Jan/2018 01:17:03] "POST /app1/_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [21/Jan/2018 01:17:03] "POST /app2/_dash-update-component HTTP/1.1" 200 -
127.0.0.1 - - [21/Jan/2018 01:17:05] "POST /app1/_dash-update-component HTTP/1.1" 200 -

问题是，即使我已经离开了 app1 菜单，app1 似乎也一直在刷新。

实际上，我在这里迷路了，什么都没有出现在我的脑海中。我应该改变组合破折号应用程序和烧瓶应用程序的方式吗？或者有什么绝妙的方法可以在用户观看 app2 dash 应用时暂停 app1？

谢谢。

app_main.py

from werkzeug.wsgi import DispatcherMiddleware
from flask_bootstrap import Bootstrap

import app1
import app2

flask_app = flask.Flask(__name__)

server = DispatcherMiddleware(flask_app, {
    '/app1': app1.app_dash.server,
    '/app2': app1.app_dash.server,
})

Bootstrap(flask_app)

index.html

...
<div id="app1" class="tab-pane fade">
    <object data="/basic_chart"></object>

</div>
<div id="app2" class="tab-pane fade">
    <object data="/balance_chart"></object>

</div>
...

app1.py

...
app_dash.layout = html.Div([
    dcc.Interval(
        id='interval-component',
        interval=5e3,  # in milliseconds
        n_intervals=0
    ),

    html.Div([
        dcc.Graph(
            id='graph_stream',
        ),
    ]),
...

【问题讨论】：

标签： python flask werkzeug flask-bootstrap plotly-dash

【解决方案1】：

您可以使用dash_core_components.Location 和dash_core_components.Link 来开发单页应用，而不是使用DispatcherMiddleware 和/app1 之类的路由。

见Multi-Page Apps and URL Support。

【讨论】：