html 通过在Flask模板的div块中插入Dash图来集成Dash和Flask

db2dz4w8  于 2022-12-21  发布在  其他
关注(0)|答案(1)|浏览(169)

我的团队目前正在做一个项目,但是最近遇到了以下问题。开始,我们正在通过Flask创建一个网站。我们已经做了很多工作,有一些不错的html模板。但是,问题是现在我们需要添加DashMap(更准确地说,Dash Leaflet,但我坚信它们非常相似)到我们页面的某个div块。不幸的是,我们不知道如何实现它...
因此,我们已经有了一个结构化和设计好的html页面模板,正如上面所说,我们唯一需要做的就是将Dash map插入到某个div块中:

...
<body>
    ...

    <div class="map">
    
        <!-- ??? ??? ??? ??? ??? ??? -->
        <!-- ???   Your Dash map ??? -->
        <!-- ??? ??? ??? ??? ??? ??? -->
    
    </div>
    
    ...
</body>
...

我们没有能力重新创建网站,因为我们有很多创建的东西,这将是相当可悲和失望的重写:(
我们如何通过插入map到某个div块中来集成Flask应用和Dash?有什么简单的解决方案吗?

pdsfdshx

pdsfdshx1#

正如一些人在评论中所建议的那样,直接使用leaflet.js是一种更干净的方法。要记住的一点是,如果你走的是Dash路线,你需要依赖于dash-leaflet库的持续维护和更新,以支持Leaflet的新版本。
但是,如果你已经有人谁已经付出了一些努力,建立一个破折号传单应用程序,然后可以完全明白为什么你想至少探索是否让他们一起玩是可行的。
如果你想把Dash应用放在<div>中,我想最好的方法可能就是使用一个指向你的应用正在运行的端点的<iframe>
Dash在后台使用Flask非常方便,因此您可能会发现一个方便的技巧,即您可以让现有的Flask服务器在特定路径下为您的Dash应用提供服务,方法是将Flask服务器示例传递给Dash示例的server参数,并将url_base_pathname参数设置为一个前缀,以便在该前缀处挂载Dash应用。

    • 应用程序. py**
from flask import Flask

from dash_app import make_dash, make_layout, define_callbacks

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

dash_app = make_dash(app)
dash_app.layout = make_layout()
define_callbacks()
    • 破折号_应用程序. py**
from dash import Dash, html, callback, dcc, Input, Output

def make_dash(server):
    return Dash(
        server=server,
        url_base_pathname='/dash/'
    )

def make_layout():
    return html.Div(                                                                                                                                                                                                 
        [                                                                                                                                                                                                            
            html.P("Hey this is a Dash app :)"),                                                                                                                                                                     
            dcc.Input(id="input"),                                                                                                                                                                                   
            html.Div(id="output"),                                                                                                                                                                                   
        ]                                                                                                                                                                                                            
    )

def define_callbacks():
    @callback(
        Output("output", "children"),
        Input("input", "value"),
    )
    def show_output(text):
        return f"you entered: '{text}'"

当你导航到/时,你会看到Flask路径,导航到/dash会显示Dash应用程序。你可以让用户直接转到Dash URL,或者如果你需要将iframe嵌入到现有页面中,使用该路径作为iframe的位置。

相关问题