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展示效果如下：

1. dash-bootstrap-components简介

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

 pip install dash-bootstrap-components

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

import dash
import dash_bootstrap_components as dbc

app = 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, Output
import dash_bootstrap_components as dbc
from views.home import home_page
from views.page1 import page1

app = 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 html

home_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 html

page1 = html.Div(
    children=[
        html.H1('这是页面1的内容')
    ]
)

3. 运行工程

 python app.py

4. 浏览器访问

 http://127.0.0.1:8050

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