Python+Dash快速web应用开发——基础概念篇

简介: Python+Dash快速web应用开发——基础概念篇

1 简介

这是我的新系列教程「Python+Dash快速web应用开发」的第一期,我们都清楚学习一个新工具需要一定的动力,那么为什么我要专门为Dash制作一个系列教程呢?

图1

Dash是一个高效简洁的Python框架,建立在FlaskPoltly.js以及React.js的基础上,设计之初是为了帮助「前端知识匮乏」的数据分析人员,以纯Python编程的方式快速开发出交互式的数据可视化web应用。

Dash已经过数年的迭代发展,早期的Dash我也体验过,但当时还比较简陋,很多问题亟待解决,因此并没有引起我的多大注意。

但随着近一两年的高速发展和积极更新迭代,现阶段的Dash已经是一个相当成熟的框架,且其功能已经丰富到不仅仅可以用来开发在线数据可视化作品,即使是轻量级的数据仪表盘BI应用,甚至是搭建文档说明博客或常规的网站,都驾驭得住,配合丰富的第三方拓展,只会Python的你可以开发出相当精美正式的web应用。

图2

而关于Dash的像样的中文教程几乎没有(其实英文教程也没多少😅),有的也大多只是在照搬官方文档,因此类似之前写作完成反响不错的geopandas教程那样,我来写一个看得过去的系列教程吧~下面开始我们的Dash之旅吧!

2 Dash中的基础概念

在学习Dash的一开始,我们需要对Dash的若干基础概念进行了解,首先我们来从头开始搭建Dash环境,因为主要是面向数据分析处理人员,所以我推荐使用conda进行环境管理,参考下列命令即可完成环境的初始化:

conda create -n dash-dev python=3.7 -y
conda activate dash-dev
pip install dash -U

上述代码执行完成后,你就已经创建好最基本的Dash运行所需环境了,你可以创建代码如下的py脚本并执行(推荐使用pycharmvscode等工具进行Dash开发):

app1.py

import dash
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.H1('第一个Dash应用!')
if __name__ == '__main__':
    app.run_server()

运行上述脚本之后,一切正常的话,按照提示点击进对应网址会看到如下内容:

图3

至此我们就完成了Dash环境的搭建,下面我们来了解Dash应用中的一些基础概念:

2.1 用layout设计页面内容

一个web应用的关键之一在于其前端所呈现的页面内容,在Dash中我们通过对其layout属性进行定义,从而自由设计页面内容。

在前面的app1.py中,我们设置了app.layout = html.H1('第一个Dash应用!'),这里的html即开头导入的dash_html_components,它是dash的自带依赖库,用于在Dash应用中定义常见的html元素,就像前面用到的H1对应一级标题,即<h1></h1>标签。

而每个html.XX对象,其接收的第一个位置上的参数都是children,它用于表示对应html标签所包裹的内容,譬如上文的'第一个Dash应用!',也可以通过传入多元素列表或进行多层嵌套,从而构建结构更复杂的页面内容,就像下面的例子一样:

app2.py

import dash
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.H1('标题1'),
        html.H1('标题2'),
        html.P(['测试', html.Br(), '测试']),
        html.Table(
            html.Tr(
                [
                    html.Td('第一列'),
                    html.Td('第二列')
                ]
            )
        )
    ]
)
if __name__ == '__main__':
    app.run_server()

图4

而除了常见的html元素之外,Dash还在其官方依赖库dash_core_components中内置了众多常见网页小部件,是我们实现交互式所依托的重要元素,就像下面的例子一样我们利用其Dropdown部件创建出一个下拉选择部件:

app3.py

import dash
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.H1('下拉选择'),
        html.Br(),
        dcc.Dropdown(
            options=[
                {'label': '选项一', 'value': 1},
                {'label': '选项二', 'value': 2},
                {'label': '选项三', 'value': 3}
            ]
        )
    ]
)
if __name__ == '__main__':
    app.run_server()

图5

Dashplotly既然“师出同门”,自然已经相互打通,我们同样可以非常轻松的在网页中插入数据可视化的内容,这里我们使用到plotly.express,它简化了诸多plotly图表的创建过程,将创建好的图表对象作为figure参数传入dcc.Graph()中即可:

app4.py

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
app = dash.Dash(__name__)
fig = px.scatter(x=range(10), y=range(10))
app.layout = html.Div(
    [
        html.H1('嵌入plotly图表'),
        dcc.Graph(figure=fig)
    ]
)
if __name__ == '__main__':
    app.run_server()

图6

除了上述的几个官方Dash依赖库以外,还有很多优秀的第三方库都可以帮助我们快速创建出效果惊人的前端内容,关于这部分的详细内容我将会在本系列之后的文章中分主题详细介绍,敬请期待。

2.2 用callback实现交互

Dash最大的优点之一就是其高度封装了React.js,使得我们无需编写js代码即可实现前端与后端之间的异步交互,为了实现这一步,我们需要使用到dash.dependencies中的InputOutput,再配合自定义回调函数来实现所需交互功能。

举一个非常简单的例子:我们设计一个web页面,其中有一个「下拉选项」部件,当我们下拉选取到某个选项值对应的省份时,其下方打印出对应的省会城市:

app5.py

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.H1('根据省名查询省会城市:'),
        html.Br(),
        dcc.Dropdown(
            id='province',
            options=[
                {'label': '四川省', 'value': '四川省'},
                {'label': '陕西省', 'value': '陕西省'},
                {'label': '广东省', 'value': '广东省'}
            ],
            value='四川省'
        ),
        html.P(id='city')
    ]
)
province2city_dict = {
    '四川省': '成都市',
    '陕西省': '西安市',
    '广东省': '广州市'
}
@app.callback(Output('city', 'children'),
              Input('province', 'value'))
def province2city(province):
    return province2city_dict[province]
if __name__ == '__main__':
    app.run_server()

图7

在交互操作的时候查看后台可以看到,每一次点选都在进行与后台的「异步通信」,我们整个应用的页面并没有刷新,如果不用Dash,你就得书写相应的js语句,较为繁琐:

图8

Dash目前已经支持「多输入多输出」的回调函数书写方式,以及「阻止初次回调」「基于表单提交状态的回调」等诸多特性,理论上你可以创建出任何形式的页面交互行为,这些内容我们都会在之后的系列文章中详细教授给大家。

2.3 监听图表交互式选择行为

Dashplotly的高度耦合,还体现在其可以监听针对plotly图表的悬浮、选择、框选等行为,广泛适用于plotly中的大量常规图表与地图,这一点懂的朋友应该都明白,借助这个特性,我们可以创建出交互能力强大的web应用,就像我下面的这个典型的例子:

app6.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
app = dash.Dash(__name__)
fig = px.scatter(x=range(10), y=range(10), height=400)
fig.update_layout(clickmode='event+select')  # 设置点击模式
app.layout = html.Div(
    [
        dcc.Graph(figure=fig, id='scatter'),
        html.Hr(),
        html.Div([
            '悬浮事件:',
            html.P(id='hover')
        ]),
        html.Hr(),
        html.Div([
            '点击事件:',
            html.P(id='click')
        ]),
        html.Hr(),
        html.Div([
            '选择事件:',
            html.P(id='select')
        ]),
        html.Hr(),
        html.Div([
            '框选事件:',
            html.P(id='zoom')
        ])
    ]
)
# 多对多的回调函数
@app.callback([Output('hover', 'children'),
               Output('click', 'children'),
               Output('select', 'children'),
               Output('zoom', 'children'),],
              [Input('scatter', 'hoverData'),
               Input('scatter', 'clickData'),
               Input('scatter', 'selectedData'),
               Input('scatter', 'relayoutData')])
def listen_to_hover(hoverData, clickData, selectedData, relayoutData):
    return str(hoverData), str(clickData), str(selectedData), str(relayoutData)
if __name__ == '__main__':
    app.run_server()

可以看到,我们监听到的悬浮、点击、选择以及框选四种行为对应传回的特征数据:

图9

目录
相关文章
|
2月前
|
存储 监控 算法
淘宝买家秀 API开发实录Python(2025)
本文讲述了作者在电商开发领域,尤其是对接淘宝买家秀 API 接口过程中所经历的挑战与收获。从申请接入、签名验证、频率限制到数据处理和实时监控,作者分享了多个实战经验与代码示例,帮助开发者更高效地获取和处理买家秀数据,提升开发效率。
|
10天前
|
设计模式 人工智能 API
AI智能体开发实战:17种核心架构模式详解与Python代码实现
本文系统解析17种智能体架构设计模式,涵盖多智能体协作、思维树、反思优化与工具调用等核心范式,结合LangChain与LangGraph实现代码工作流,并通过真实案例验证效果,助力构建高效AI系统。
136 7
|
2月前
|
算法 程序员 API
电商程序猿开发实录:淘宝商品python(2)
本文分享了开发者在对接淘宝商品详情API过程中的真实经历,涵盖权限申请、签名验证、限流控制、数据解析及消息订阅等关键环节,提供了实用的Python代码示例,帮助开发者高效调用API,提升系统稳定性与数据处理能力。
|
3月前
|
数据采集 存储 数据库
Python爬虫开发:Cookie池与定期清除的代码实现
Python爬虫开发:Cookie池与定期清除的代码实现
|
4月前
|
人工智能 搜索推荐 数据可视化
用 Python 制作简单小游戏教程:手把手教你开发猜数字游戏
本教程详细讲解了用Python实现经典猜数字游戏的完整流程,涵盖从基础规则到高级功能的全方位开发。内容包括游戏逻辑设计、输入验证与错误处理、猜测次数统计、难度选择、彩色输出等核心功能,并提供完整代码示例。同时,介绍了开发环境搭建及调试方法,帮助初学者快速上手。最后还提出了图形界面、网络对战、成就系统等扩展方向,鼓励读者自主创新,打造个性化游戏版本。适合Python入门者实践与进阶学习。
351 1
|
4月前
|
Linux 数据库 数据安全/隐私保护
Python web Django快速入门手册全栈版,共2590字,短小精悍
本教程涵盖Django从安装到数据库模型创建的全流程。第一章介绍Windows、Linux及macOS下虚拟环境搭建与Django安装验证;第二章讲解项目创建、迁移与运行;第三章演示应用APP创建及项目汉化;第四章说明超级用户创建与后台登录;第五章深入数据库模型设计,包括类与表的对应关系及模型创建步骤。内容精炼实用,适合快速入门Django全栈开发。
119 1
|
4月前
|
存储 算法 数据可视化
用Python开发猜数字游戏:从零开始的手把手教程
猜数字游戏是编程入门经典项目,涵盖变量、循环、条件判断等核心概念。玩家通过输入猜测电脑生成的随机数,程序给出提示直至猜中。项目从基础实现到功能扩展,逐步提升难度,适合各阶段Python学习者。
206 0
|
4月前
|
数据采集 存储 监控
抖音直播间采集提取工具,直播间匿名截流获客软件,Python开发【仅供学习】
这是一套基于Python开发的抖音直播间数据采集与分析系统,包含观众信息获取、弹幕监控及数据存储等功能。代码采用requests、websockets和sqlite3等...
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
21天前
|
数据采集 机器学习/深度学习 人工智能
Python:现代编程的首选语言
Python:现代编程的首选语言
191 102

推荐镜像

更多