本地运行flask/dash应用程序时找不到Dash组件

Question

我有 3 个使用 Dash 创建的应用程序，如果我独立运行它们并在浏览器上打开它们，它们可以完美运行。但是，我一直在尝试创建一个 Flask 应用程序，要求提供凭据（用户/密码）并根据用户重定向到相应的破折号应用程序。 我需要将这些破折号应用程序包含在目录内的子文件夹中（而不是将整个脚本粘贴到 Flask 应用程序中） 我的 Flask 应用程序运行正常，我可以将其加载到浏览器上，但是当我尝试使用任何用户登录时，我会看到“正在加载...”页面，并在浏览器控制台上出现以下错误：

[email protected]_12_1m1692245986.12.1.min.js:1 加载资源失败：服务器响应状态为 404（未找到） [email protected]_12_1m1692245986.14.0.min.js:1 加载资源失败：服务器响应状态为 404（未找到） [email protected]_12_1m1692245986.8.1.min.js:1 加载资源失败：服务器响应状态为 404（未找到） dash_renderer.v2_12_1m1692245986.min.js:1 加载资源失败：服务器响应状态为 404（未找到） dash_core_components.v2_11_1m1692245986.js:1 无法加载资源：服务器响应状态为 404（未找到） [email protected]_12_1m1692245986.14.0.min.js:1 加载资源失败：服务器响应状态为 404（未找到） dash_core_components-shared.v2_11_1m1692245986.js:1 加载资源失败：服务器响应状态为 404（未找到） dash_html_components.v2_0_14m1692245986.min.js:1 加载资源失败：服务器响应状态为 404（未找到） bundle.v5_2_7m1692245986.js:1 加载资源失败：服务器响应状态为 404（未找到） dash_app3:33 Uncaught ReferenceError: DashRenderer 未定义 在 dash_app3:33:86

我知道 Dash 库应该提供这些文件，但无论我做什么，它都不起作用。

这是我的 Flask 应用程序：

from flask import Flask, render_template, request, redirect, url_for
from dash_app1.dash_app1 import app as dash_app1
from dash_app2.dash_app2 import app as dash_app2
from dash_app3.dash_app3 import app as dash_app3

app = Flask(__name__)

# Credentials
valid_credentials = {
    "user1": "password1",
    "user2": "password2",
    "user3": "password3"
}

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']

    if username in valid_credentials and valid_credentials[username] == password:
        if username == 'user1':
            return redirect(url_for('dash_app1_route'))
        elif username == 'user2':
            return redirect(url_for('dash_app2_route'))
        elif username == 'user3':
            return redirect(url_for('dash_app3_route'))
    else:
        return "Invalid credentials"

@app.route('/dash_app1')
def dash_app1_route():
    return dash_app1.index()

@app.route('/dash_app2')
def dash_app2_route():
    return dash_app2.index()

@app.route('/dash_app3')
def dash_app3_route(): 
    return dash_app3.index()

if __name__ == '__main__':
    app.run(debug=True)

这是一个测试破折号应用程序，确实独立运行，但从烧瓶应用程序中拉出时则不然：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input', type='text'),
    html.Div(id='output')
])

@app.callback(Output('output', 'children'), [Input('input', 'value')])
def update_output(value):
    return f"You entered: {value}"

if __name__ == '__main__':
    app.run_server(debug=True)

我希望能够进入 Flask 应用程序，其中包含一个使用 index.html 文件呈现的简单登陆页面，然后根据用户继续访问相应的 dash 应用程序。

感谢您的帮助！

Answer 1

我看到您正在启动 Flask 服务器，但它从未链接到 Dash 应用程序实例。

您需要做的是将您创建的 Flask 服务器分配给 Dash 应用程序的服务器属性，或者重构代码，以便您可以通过传递 Flask 服务器来调用 Dash 构造函数。

例如，您可以将其更改为：

from flask import Flask
from dash_app1.dash_app1 import app as app1

server = Flask(__name__)
app1.server = server

@server.route('/dash_app1')
def dash_app1_route():
    return app1.index()

if __name__ == '__main__':
    server.run(debug=True)

我发现这篇文章对于将 Dash 应用程序链接到现有 Flask 应用程序很有用：https://blog.finxter.com/dash-flask/