(数据科学学习手札104)Python+Dash快速web应用开发——回调交互篇(上)
本文示例代码已上传至我的
Github
仓库https://github.com/CNFeffery/DataScienceStudyNotes
1 简介
这是我的系列教程Python+Dash快速web应用开发的第三期,在前两期的教程中,我们围绕什么是Dash
,以及如何配合方便好用的第三方拓展dash-bootstrap-components
来为我们的Dash
应用设计布局展开了非常详细的介绍。
而Dash
最吸引我的地方在于其高度封装了react.js
,使得我们无需编写js
语句,纯Python
编程就可以实现浏览器前端与后端计算之间常规的异步通信,从而创造出功能强大的交互式web
应用。
图1
从今天的文章开始,我就将开始带大家走进Dash
的核心内容——回调。
2 Dash中的基础回调
2.1 最基础的回调
Dash
中的回调(callback)是以装饰器的形式,配合自编回调函数,实现前后端异步通信交互,这句话可能不太好理解,我们从一个简单的例子出发来认识Dash
中的回调:
app1.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(
__name__,
external_stylesheets=['css/bootstrap.min.css']
)
app.layout = html.Div(
[
html.Br(),
html.Br(),
html.Br(),
dbc.Container(
[
dbc.Row(
[
dbc.Col(dbc.Input(id='input-value',
placeholder='请输入些东西'),
width=12),
dbc.Col(dbc.Label(id='output-value'),
width=12)
]
)
]
)
]
)
# 对应app实例的回调函数装饰器
@app.callback(
Output('output-value', 'children'),
Input('input-value', 'value')
)
def input_to_output(input_value):
'''
简单的回调函数
'''
return input_value
if __name__ == '__main__':
app.run_server()
先来看看app1
的交互效果:
图2
下面我们来分解上面的代码,梳理一下要构造一个具有实际交互功能的Dash
应用需要做什么:
- 确定输入与输出部件
一个可交互的系统一定是有输入与输出的,我们开头导入的Input
与Output
对象,他们分别扮演着输入者与输出者两种角色,其各自的第一个参数component_id
用于联动前端部分定义的部件。
我们在前面定义前端部件时,为dbc.Input
对应的输入框设置了id='input-value'
,为dbc.Label
对应的文字输出设置了id='output-value'
,让它们作为第一个参数可以被Input()
与Output()
唯一识别出来。
- 确定输入与输出内容
在确定了输入者与输出者之后,更重要的是为告诉Dash
需要监听什么输入,响应什么输出,这就要用到第二个参数component_property
。
它与对应的前端部件有关,譬如我们的dbc.Input()
输入框,其被输入的内容都存在value
属性中,而children
属性是dbc.Label
以及绝大多数html
部件的第一个参数,这样我们就确定了输入输出内容。
- 装饰回调函数
app.callback()
装饰器按照规定的先Output()
后Input()
的顺序传入相应对象,而既然是装饰器,自然需要配合自定义回调函数使用。
我们的input_to_output()
就是对应的回调函数,其参数与装饰器中的Input()
对应,而函数内部则用来定义计算处理过程。
最后return
的对象则对应Output()
。
# 对应app实例的回调函数装饰器
@app.callback(
Output('output-value', 'children'),
Input('input-value', 'value')
)
def input_to_output(input_value):
'''
简单的回调函数
'''
return input_value
通过上面这样的结构,我们得以纯Python
“寥寥数语”实现了交互功能,赋予我们编写任意功能Dash
应用的能力。
2.2 同时设置多个Input()与Output()
在上一小节中我们介绍的是最基本的单输入 -> 单输出回调模式,很多时候我们需要更复杂的回调模式,譬如下面的例子:
app2.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(
__name__,
external_stylesheets=['css/bootstrap.min.css']
)
app.layout = html.Div(
[
html.Br(),
html.Br(),
html.Br(),
dbc.Container(
[
dbc.Row(
[
dbc.Col(dbc.Input(id='input-value1'), width=3),
dbc.Col(html.P('+'), width=1),
dbc.Col(dbc.Input(id='input-value2'), width=3),
],
justify='start'
),
html.Hr(),
dbc.Label(id='output-value')
]
)
]
)
@app.callback(
Output('output-value', 'children'),
Input('input-value1', 'value'),
Input('input-value2', 'value')
)
def input_to_output(input_value1, input_value2):
try:
return float(input_value1) + float(input_value2)
except:
return '请输入合法参数!'
if __name__ == '__main__':
app.run_server()
图3
这里我们的Input()
对象不止一个,在Output()
对象之后依次传入(也可以把所有Input()
对象包在一个列表中传入),其顺序对应后面回调函数的参数顺序,从而实现了多个输入值的一一对应。
同样的,Output()
也可以有多个:
app3.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(
__name__,
external_stylesheets=['css/bootstrap.min.css']
)
app.layout = html.Div(
[
html.Br(),
html.Br(),
html.Br(),
dbc.Container(
[
dbc.Row(
[
dbc.Col(dbc.Input(id='input-lastname'), width=3),
dbc.Col(html.P('+'), width=1),
dbc.Col(dbc.Input(id='input-firstname'), width=3),
],
justify='start'
),
html.Hr(),
dbc.Label(id='output1'),
html.Br(),
dbc.Label(id='output2')
]
)
]
)
@app.callback(
[Output('output1', 'children'),
Output('output2', 'children')],
[Input('input-lastname', 'value'),
Input('input-firstname', 'value')]
)
def input_to_output(lastname, firstname):
try:
return '完整姓名:' + lastname + firstname, f'姓名长度为{len(lastname+firstname)}'
except:
return '等待输入...', '等待输入...'
if __name__ == '__main__':
app.run_server()
图4
可以看到不管是多个Output()
还是Input()
,只需要嵌套在列表中即可。
2.3 利用State()实现惰性交互
很多情况下,如果我们的回调函数计算过程时间开销较大,那么像前面介绍的仅靠Input()
与Output()
实现的前后端通信会很频繁,因为监听到的所有输入部件对应属性值只要略一改变,就会触发回调。
为了解决这类问题,Dash
中设计了State()
对象,我们可以利用State()
替换Input()
来绑定对应的输入值,再将一些需要主动触发的譬如dbc.Button()
按钮部件的属性n_clicks
,作为Input()
对象进行绑定。
让我们通过下面的例子更好的理解它的作用:
app4.py
import dash
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
app = dash.Dash(
__name__,
external_stylesheets=['css/bootstrap.min.css']
)
app.layout = html.Div(
[
html.Br(),
html.Br(),
html.Br(),
dbc.Container(
[
dbc.Row(
[
dbc.Col(dbc.Input(id='input-value'),
width=4),
dbc.Col(dbc.Button('小写转大写',
id='state-button',
n_clicks=0),
width=4),
dbc.Col(dbc.Label(id='output-value',
style={'padding': '0',
'margin': '0',
'line-height': '38px'}),
width=4)
],
justify='start'
)
]
)
]
)
@app.callback(
Output('output-value', 'children'),
Input('state-button', 'n_clicks'),
State('input-value', 'value')
)
def input_to_output(n_clicks, value):
if n_clicks:
return value.upper()
if __name__ == '__main__':
app.run_server()
图5
可以看到,装饰器中按照Output()
、Input()
、State()
的顺序传入各个对象后,我们的Button()
部件的n_clicks
参数记录了对应的按钮被点击了多少次,初始化我们设置其为0,之后每次等我们输入完单词,主动去点击按钮从而增加其被点击次数记录时,回调函数才会被触发,这样就方便了我们的很多复杂应用场景~
以上就是本期的全部内容,欢迎在评论区与我进行讨论~
(数据科学学习手札104)Python+Dash快速web应用开发——回调交互篇(上)的更多相关文章
- (数据科学学习手札105)Python+Dash快速web应用开发——回调交互篇(中)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札106)Python+Dash快速web应用开发——回调交互篇(下)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札102)Python+Dash快速web应用开发——基础概念篇
本文示例代码与数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的新系列教程Python+Dash快 ...
- (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札109)Python+Dash快速web应用开发——静态部件篇(中)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札118)Python+Dash快速web应用开发——特殊部件篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札103)Python+Dash快速web应用开发——页面布局篇
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札110)Python+Dash快速web应用开发——静态部件篇(下)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- (数据科学学习手札123)Python+Dash快速web应用开发——部署发布篇
1 简介 这是我的系列教程Python+Dash快速web应用开发的第二十期,在上一期中我介绍了利用内网穿透的方式,将任何可以联网的电脑作为"服务器"向外临时发布你的Dash应用. ...
随机推荐
- 其它语言通过HiveServer2访问Hive
先解释一下几个名词: metadata :hive元数据,即hive定义的表名,字段名,类型,分区,用户这些数据.一般存储关系型书库mysql中,在测试阶段也可以用hive内置Derby数据库. me ...
- CTF练习②
参考的文章链接 :https://www.cnblogs.com/chrysanthemum/p/11657008.html 这个题是强网杯的一道SQL注入的题,网上有不少的在线靶场和writeup, ...
- SQL注入-DNS注入(二)
其实就是盲注的简化版本,不过这种方式确实简单,不需要写py脚本一点点去跑 参考文章: https://www.jianshu.com/p/c805209244c2 这 ...
- SpringCloud 的版本问题 (深入)
学过SpringCloud 的 同学 ,就应该知道,SpringCloud是一个生态 . Spring Cloud是一个由众多独立子项目组成的大型综合项目,每个子项目都维护着自己的发布版本号.Spri ...
- Python炫技操作:五种Python 转义表示法
1. 为什么要有转义? ASCII 表中一共有 128 个字符.这里面有我们非常熟悉的字母.数字.标点符号,这些都可以从我们的键盘中输出.除此之外,还有一些非常特殊的字符,这些字符,我通常很难用键盘上 ...
- 移位运算符<<与>>
程序设计中,我们有时会看到两种运算符:<<和>>,这两种运算符均为移位运算符,属于位操作运算符中的一种,分别为<<(左移)和>>(右移). 其中,左移运 ...
- kvm环境部署及常用指令
Linux下通过kvm创建虚拟机,通过vnc连接,做好配置后,通过ssh登录,并开启iptables Kvm虚拟化搭建教程参考链接:https://jingyan.baidu.com/article/ ...
- 私有Maven仓库安装和使用
安装 这里选择安装的是windows平台,linux安装类似,下载可能要梯子 官网下载页 https://help.sonatype.com/repomanager2/download 下载链接 ht ...
- 敏捷史话(一):用一半的时间做两倍的事——Scrum之父Jeff Sutherland
普通的人生大抵相似,传奇的人生各有各的传奇.Jeff就是这样的传奇人物,年近80的他从来没有"廉颇老矣尚能饭否"的英雄迟暮,不久前还精神矍铄地与好几百名中国学生进行线上交流,积极回 ...
- git 只提交部分文件 拉取pull远程仓库
正常的团队开发中,在提交代码push之前要先pull拉取远程仓库的代码.而拉取pull操作需要先commit修改的文件才能成功. 那么问题来了,当我只想push提交部分代码的时候,同样需要pull拉取 ...