02.Python Dash网页开发：网页有哪些元素组成与数据流

网页有哪些元素组成

简单的网页仅有几个文字就能组成，但是Dash作为交互式数据分析APP，应该包括一下内容：

即.py文件中的代码组成

• import 包
• theme 主题
• layout 页面布局
• callback 数据流动

import 包

这里展示的是最常用的库

import dash
from dash import html,dash_table,dcc,Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go

dcc和dbc提供一些核心组件（component），比如一个按钮、下拉菜单等；
html可以在里边写各级标题文字，也可以把dcc和dbc的组建放进html容器里；
Input, Output用于callbback里，即用户的输入和相应的输出；
dash_table是Dash提供的表格网页展示工具类似excel，有筛选功能；
px、go是Plotly的绘图库

注意：在dash更新后，html,dash_table,dcc,Input, Output等都可从dash直接导入，而不需要安装dash-core-components、dash-html-components、dash.dependencies

theme 主题

app = dash.Dash('__name__', external_stylesheets=[dbc.themes.BOOTSTRAP])

external_stylesheets参数可以选择css主题，也可以把下载好的主题放在asset文件加下，APP会自动使用相应主题。

layout 页面布局

把屏幕分为12列，通过设置component占多少列来设置宽度;
可以有多行，在代码中从上到下，在网页中也按从上到下的顺序显示。

如下所示，页面有两行，第一行有1列，宽度都是12，第二行分为3列，每列宽度是4（width=4）

row = html.Div(
    [
        dbc.Row(dbc.Col(html.Div("A single column"))),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"),width=4),
                dbc.Col(html.Div("One of three columns"),width=4),
                dbc.Col(html.Div("One of three columns"),width=4),
            ]
        ),
    ]
)

实际上从dbc官网复制上边的代码，效果是这样的,没有任何排版样式。

可以设置主题为BOOTSTRAP，再调节class_name从而调节css样式

html.Div(
    [
        dbc.Row(dbc.Col(html.Div("A single, half-width column"), width=6),class_name='bg-primary'),
        dbc.Row(
            dbc.Col(html.Div("An automatically sized column"), width="auto",class_name='bg-secondary')
        ),
        dbc.Row(
            [
                dbc.Col(html.Div("One of three columns"), width=3,class_name='bg-danger text-center'),
                dbc.Col(html.Div("One of three columns"),class_name='bg-info'),
                dbc.Col(html.Div("One of three columns"), width=3,class_name='bg-dark text-white'),
            ],
			class_name='mt-5'
        ),
    ]
)

其中class_name可以设置背景颜色比如bg-primary，这个primary会因为不同的theme而不同，class_name还可以设置字体颜色text-white，字体居中text-center，行间距mt-5等等。

更多详细的调节需要到boostrap官网查看https://getbootstrap.com/docs/5.2/getting-started/introduction/

callback 数据的流动

callback是DASH网站交互的核心，控制着数据的流动.

以下是一个简单的，交互式APP，我们输入字符，网站立刻返回 hello 字符。

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div([
        "Input: ",
        dcc.Input(id='my-input', value='王', type='text')
    ]),
    html.Br(),
    html.Div(id='my-output'),

])


@app.callback(
    output = Output(component_id='my-output', component_property='children'),
    inputs = Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return f'Output: {input_value}'


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

数据的流动：

每个component都有一个id，id是独一无二的代表这个component，在@app.callback的inputs中，id为my-input的component的value输入到update_output_div函数中，之后函数返回结果到output中的id为my-output的component的children中。

dcc.Input(id='my-input', value='王', type='text')中的value默认值为'王'，当在网页中输入新的字符后，value的值也会更新，更新后的value值传入update_output_div函数，返回的结果传递到my-output的children中，从而在网页中显示出来。

输入和输出可以是多个，output、inputs可以接受列表参数。

而且可以看到update_output_div(input_value)中的参数是 input_value，而不是component_property='value'中的value，因此当有多个输入时，应该按照顺序在update_output_div中传参数。

@app.callback是一个装饰器，一般情况下接受 一个函数 返回 某种操作后的函数。

DASH默认的端口是8050，因此可以在浏览器中通过http://127.0.0.1:8050/访问本地网页。

本文由mdnice多平台发布