dash--项目的前端展示简单基础

1.前置工作

创建虚拟环境:

复制代码
sudo apt-get install python3-venv # 安装
python3 -m venv venv # 在本目录下创建venv虚拟环境(也是一个文件夹。如果用不到这个虚拟环境以后就rm -rf venv)
source venv/bin/activate # 激活虚拟环境

临时使用清华大学的镜像源安装 Python 包:

复制代码
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple 包名

永久更改 pip 的默认源:

复制代码
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple

2.示例

创建一个基本的 Dash 应用程序的入口文件 app.py,并在其中添加一个简单的布局和回调:

复制代码
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

# 创建 Dash 应用程序
app = dash.Dash(__name__)

# 布局
app.layout = html.Div([
    html.H1("Welcome to My Dashboard"),
    dcc.Input(id='input', value='initial text', type='text'),
    html.Div(id='output')
])

# 回调函数
@app.callback(
    Output('output', 'children'),
    [Input('input', 'value')]
)
def update_output(value):
    return f'You entered: {value}'

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

运行python app.py,然后在浏览器中访问 http://127.0.0.1:8050/

在这个示例中,我们创建了一个带有一个输入框和一个文本输出的简单布局。然后,我们定义了一个回调函数,该函数接收输入框的值,并将其显示在文本输出中。

可以使用 Dash 的核心组件和 HTML 组件来创建各种不同类型的图表、表格和交互元素,并使用回调函数来处理用户输入并更新显示。

3. 分离app.pycallbacks.pylayout.py

app.py

复制代码
import dash
from layout import layout


# 导入外部CSS文件
external_stylesheets = ['https://codepen.io/dilums/pen/ZEBowxX.css']

# 创建Dash应用并加载外部样式表
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

from callbacks import *

# 设置应用的布局
app.layout = layout

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

callbacks.py

复制代码
from dash.dependencies import Input, Output
from app import app

# 示例回调函数,将输入文本框的内容显示在输出Div中
@app.callback(
    Output('my-output', 'children'),
    [Input('my-input', 'value')]
)
def update_output(value):
    return f'输入的内容是: {value}'

# 如果有多个回调函数,可以在此继续添加

layout.py

复制代码
from dash import html
from dash import dcc

layout = html.Div([html.H1("简单的Dash应用"),
    
    # 一个简单的文本框
    dcc.Input(id='my-input', value='', type='text'),
    
    # 一个显示文本的空间
    html.Div(id='my-output')
])

分离三个文件,让这个项目更方便重构。

4.使用 pip freeze 命令来生成当前虚拟环境中已安装的包的列表

复制代码
`pip freeze > requirements.txt`
相关推荐
LoveDreaMing8 分钟前
微前端-无界的实操和源码分析
前端·javascript·架构
Java中文社群14 分钟前
用代码书写浪漫,网友直呼“太美了”!
python
@LetsTGBot搜索引擎机器人25 分钟前
打造属于你的 Telegram 中文版:汉化方案 + @letstgbot 搜索引擎整合教程
开发语言·python·搜索引擎·机器人·.net
去伪存真30 分钟前
「实测可行」Tailwind CSS 4 与 UnoCSS 最新配置全攻略:一把跑通不踩坑
前端
十八朵郁金香33 分钟前
【H5工具】一个简约高级感渐变海报H5设计工具
前端·javascript·产品运营·axure·个人开发
人工智能的苟富贵34 分钟前
使用 Tauri + Rust 构建跨平台桌面应用:前端技术的新边界
开发语言·前端·rust·electron
拉不动的猪43 分钟前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
小p1 小时前
react学习2:react中常用的hooks
前端·react.js
南清的coding日记1 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
Xiaouuuuua1 小时前
2026年计算机毕业设计项目合集
前端·vue.js·课程设计