Dash 是一个开源的 Python 框架,用于快速构建交互式 Web 应用。它基于 Flask 和 Bootstrap,允许开发者使用 Python 和 JavaScript 来创建功能丰富的 Web 应用。本教程将从零开始,带你轻松上手 Dash 框架,搭建一个简单的交互式 Web 应用。
第一步:安装 Dash 和依赖库
在开始之前,确保你已经安装了 Python。然后,使用以下命令安装 Dash 和其他依赖库:
pip install dash
第二步:创建项目结构
创建一个新目录作为你的项目根目录,然后在该目录下创建以下文件和文件夹:
my_dash_app/
│
├── app.py
├── static/
│ ├── css/
│ │ └── style.css
│ └── js/
│ └── script.js
└── templates/
└── layout.html
第三步:编写 Flask 应用
打开 app.py 文件,并添加以下代码:
import dash
from dash import html, dcc
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Input(id='input', type='text'),
html.Button('Submit', id='button'),
html.Div(id='output')
])
if __name__ == '__main__':
app.run_server(debug=True)
这段代码创建了一个简单的 Dash 应用,其中包含一个文本输入框、一个按钮和一个用于显示结果的 Div 元素。
第四步:编写 HTML 模板
打开 templates/layout.html 文件,并添加以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Dash App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="container">
<h1>My Dash App</h1>
{{ app.layout }}
</div>
</body>
</html>
这段代码定义了应用的 HTML 模板,其中包含了 Dash 应用的布局和样式。
第五步:编写 CSS 样式
打开 static/css/style.css 文件,并添加以下代码:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
这段代码定义了应用的 CSS 样式,包括字体、间距和标题样式。
第六步:编写 JavaScript 脚本
打开 static/js/script.js 文件,并添加以下代码:
function submitHandler() {
const input_value = document.getElementById('input').value;
const output_element = document.getElementById('output');
output_element.innerHTML = `You entered: ${input_value}`;
}
document.getElementById('button').addEventListener('click', submitHandler);
这段代码定义了一个 JavaScript 函数,用于处理按钮点击事件,并将输入框的值显示在输出 Div 元素中。
第七步:运行应用
在终端中,导航到 my_dash_app 目录,并运行以下命令:
python app.py
打开浏览器,访问 http://127.0.0.1:8050/,你应该能看到一个包含文本输入框、按钮和输出 Div 元素的页面。
恭喜你!你已经成功搭建了一个简单的交互式 Web 应用。你可以继续扩展这个应用,添加更多组件和功能,以实现你的需求。
