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([

        "输入是: ",

        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):

    returnf'输出是: {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/访问本地网页。