Plotly Dash开发Web应用示例

一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。

我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉或者不想写繁琐的前端代码，而Dash的第三方拓展库中就有这样一个库——dash-bootstrap-components，借助它，我们就可以纯Python编程调用到 bootstrap框架中的诸多特性来让我们的web应用页面更美观。

本文主要以dash-bootstrap-components为基础来介绍Dash来搭建一个简单的响应式的Web应用。

dash-bootstrap-components控件官网地址：https://dash-bootstrap-components.opensource.faculty.ai/

本文的Demo展示效果如下：

dash bootstrap 应用

1. dash-bootstrap-components简介

dash-bootstrap-components

dash-bootstrap-components是Plotly Dash的Bootstrap组件库，它使构建具有复杂、响应式布局的风格一致的应用变得更容易。安装：

 pip install dash-bootstrap-components

要使用bootstrap控件，需先链接一个Bootstrap样式表，然后就可以使用了，例如：

import dashimport dash_bootstrap_components as dbcapp = dash.Dash(    external_stylesheets=[dbc.themes.BOOTSTRAP])app.layout = dbc.Alert(    "Hello, Bootstrap!", className="m-5")if __name__ == "__main__":    app.run_server()

也可以使用如下方式，链接样式表

BS = "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"app = dash.Dash(external_stylesheets=[BS])

2. 示例工程

Demo的目录结构如下：

.└── dash_demo    ├── app.py    └── views        ├-- __init__.py        |-- home.py        └── page1.py

2.1 app.py

from dash import Dash, html, dcc, Input, Outputimport dash_bootstrap_components as dbcfrom views.home import home_pagefrom views.page1 import page1app = Dash(    __name__,     external_stylesheets=[dbc.themes.BOOTSTRAP])app.title = 'Dash搭建网页示例'# 侧边栏的样式SIDEBAR_STYLE = {    "position": "fixed",    "top": 0,    "left": 0,    "bottom": 0,    "width": "16rem",    "padding": "2rem 1rem",    "background-color": "#f8f9fa",}# 主要内容放在右边，右边的央视CONTENT_STYLE = {    "margin-left": "18rem",    "margin-right": "2rem",    "padding": "2rem 1rem",}# 侧边栏区域sidebar = html.Div(    children=[        html.H3(children='侧边栏', className='display-4'),        html.Hr(),        html.P(children='带有导航链接的简单侧边栏布局', className='lead'),        dbc.Nav(            children=[                dbc.NavLink('首页', href='/', active="exact"),                dbc.NavLink('页面1', href='/page1', active="exact"),                dbc.NavLink('页面2', href='/page2', active="exact"),                dbc.NavLink('页面3', href='/page3', active="exact"),            ],            vertical=True,            pills=True        ),    ],    style=SIDEBAR_STYLE)# 右侧页面区域content = html.Div(id='page-content', style=CONTENT_STYLE)app.layout = html.Div([dcc.Location(id='url'), sidebar, content])@app.callback(Output('page-content', 'children'), [Input('url', 'pathname')])def render_page_content(pathname):    if pathname == '/':        return home_page    elif pathname == '/page1':        return page1    elif pathname == '/page2':        return html.P('这是页面2的内容')    elif pathname == '/page3':        return html.P('这是页面3的内容')    return html.Div(        children=[            html.H1("404: Not found", className="text-danger"),            html.Hr(),            html.P(f"The pathname {pathname} was not recognised..."),        ],        className='p-3 bg-light rounded-3'    )if __name__ == '__main__':    app.run_server(port=8050, debug=True)

2.2 views/home.py

from dash import htmlhome_page = html.Div(    children=[        html.P(            children=[                html.Span('欢迎来到基于'),                html.Strong('Python Dash', style={'color': 'rgb(13, 103, 180)'}),                html.Em(html.Sup('[1]', style={'fontSize': '16px'})),                html.Span('编写的'),                html.Strong('Dash搭建网页示例'),                html.Span('作者'),                html.A('魔法小木瓜', href='#', target='_blank'),                html.Span('。')            ]        ),        html.P(            children=[                html.Em('[1] '),                html.Span('Dash是一个web应用程序框架，它提供了围绕HTML、CSS和JavaScript的纯Python抽象'),                html.Br()            ]        )    ])

2.3 page1.py

from dash import htmlpage1 = html.Div(    children=[        html.H1('这是页面1的内容')    ])

3. 运行工程

 python app.py

4. 浏览器访问

 http://127.0.0.1:8050

dash web demo

关注我了解更多Dash方面的知识