【Dash搭建可视化网站】项目3：用Dash callback实现交互动态元素

手动反爬虫，禁止转载：原博地址 https://blog.csdn.net/lys_828/article/details/122061934（CSDN博主：Be_melting）

 知识梳理不易，请尊重劳动成果，文章仅发布在CSDN网站上，在其他网站看到该博文均属于未经作者授权的恶意爬取信息

项目3：用Dash callback实现交互动态元素

callback动态交互在官网中（https://dash.plotly.com/basic-callbacks）的示例代码如下，复制粘贴后放在本地运行。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.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='initial value', type='text')
    ]),
    html.Br(),
    html.Div(id='my-output'),
])

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

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

运行完毕后，刷新网址：http://127.0.0.1:8050/ ，输出结果如下。这部分代码实现的功能就是用户在输入框中输入的内容，在下面的Output部分就会直接输出。对于一些交互式的操作来说，这种设计必不可少。

以上代码核心两个部分：①是构建了数据流向；②是构建了数据的处理规则。 数据流向是通过dependencies下的Input和Output进行设计，具体的实现通过id的标识。而数据处理规则就是传入Input里面对应的是value值属性，输出的就是对应children属性，最终传入到update_output_div函数中的input_value参数，函数执行返回最终值。

为了理清这个过程，进行代码的拆解，处理流程如下。

[1] 搭建Dash框架，这一次多导入多个模块，接着添加网页的信息。

import dash
from dash import html
from dash import dcc          # 动态交互的模块
from dash.dependencies import Input,Output  # I/O输入输出控制
 
app = dash.Dash()

app.layout = html.Div(children=[
    html.H6('Change the value in the text box to see callbacks in action!'),
    html.Div([
        'input: ',
        dcc.Input(id='my-input',value='initial value',type='text')
    ]),  						#对应输入的Div，输入的里面有一个提示语和一个输入框
    html.Br(),  				#创建换行
    html.Div(id='my-output') 	#对应输出的Div，输出里面暂时为空
])

xxx 

app.run_server(debug=True)

[2] 解构装饰器内容。装饰器的作用相当于是接受一个函数，然后再返回一个函数，可以理解为函数的工厂制造机。就相当于是有一个机器人是专门制造其它机器人而存在，举个实际工业上的案例：特斯拉汽车工厂，就是汽车机器人造汽车。在上面的xxx位置，添加代码如下。

# 定义造车规则
def rule(input_value):
    return input_value + '🍎'

# 创建一个造车机器人
data_processer = app.callback(
    Output(component_id='my-output',component_property='children'),
    [Input(component_id='my-input',component_property='value')]
)   

# 造车机器人加载规则进行造车
data_processer(rule)

保存文件后运行，刷新网址：http://127.0.0.1:8050/ ，输出结果如下。

[3] 官网示例进行解构完成后，尝试自己写一个简单的页面，实现marndown语法转网页html。先补充框架信息，代码如下。

import dash     								#加载dash模块
from dash import html  							#导入python转html模块
from dash import dcc							#导入动态交互组件模块
from dash.dependencies import Input,Output 		#导入I/O输入输出组件模块

app = dash.Dash()     			#创建Dash，进行应用初始化
app.layout = html.Div(xxx)		#设置网页html中的布局

def rule(v):					#设置数据的处理规则
    pass

data_processer = app.callback(xxx)   #设置数据流向

data_processer(relu)				#加载处理规则

app.run_server(debug=True)			#运行Dash应用

[4] 填充框架中剩余内容。首先完善数据流向的问题，实现Markdown网页的制作，首先需要一个输入Markdown语法的框体，然后输出的内容是对应展示的Markdown页面。处理规则这里就直接返回原始数据。

#设置数据的处理规则
def rule(v):					
    return v

# 设置数据流向
data_processer = app.callback(
	Output(component_id='mark',component_property='children'),
    [Input(component_id='text',component_property='value')])   

#加载处理规则
data_processer(relu)				

[5] 创建网页html中的内容实体。有了对应的component_id，就需要有实体来对应id信息。创建文本输入区域框，和生成的Markdown区域，两者都是在dcc模块下面，代码操作如下。

textarea = dcc.Textarea(id='text',style={'width':'100%','height':'10rem'})
markdown = dcc.Markdown(children='',id='mark')

app.layout = html.Div(children=[
    markdown,
    html.H3('输入文字：'),
    html.Hr(),  #水平线绘制
    textarea
])

[6] 全部代码如下，文件保存后运行。

import dash
from dash import html
from dash import dcc
from dash.dependencies import Input,Output

app = dash.Dash()

textarea = dcc.Textarea(id='text',style={'width':'100%','height':'10rem'})
markdown = dcc.Markdown(children='',id='mark')

app.layout = html.Div(children=[
    markdown,
    html.H3('输入文字：'),
    html.Hr(),
    textarea
])

data_processer = app.callback(
    Output(component_id='mark',component_property='children'),
    [Input(component_id='text',component_property='value')]
)

def rule(v):
    return v

data_processer(rule)

app.run_server(debug=True)

刷新网址：http://127.0.0.1:8050/ ，输出结果如下。

比如将准备好的一份markdown文件复制到文本区域框中，输出结果如下。（基本上也实现了Markdown网页的效果）

至此整个项目3，使用Dash callback实现交互动态元素就介绍完毕。最核心的内容就是如何创建数据流向和数据规则。