当前位置：首页 > news >正文

【python3】Streamlit快速构建前端页面

news 2025/9/27 5:32:24

在这里插入图片描述

一、Streamlit 简介

Streamlit 是一款专为数据开发者设计的开源工具，能让你在几分钟内将普通 Python 脚本转换为交互式 Web 应用，无需复杂的前端知识（如 HTML、CSS、JavaScript）。无论是数据仪表盘、分析报告，还是 AI 聊天机器人，都能通过 Streamlit 快速实现并分享。

核心优势

简洁易用：完全基于 Python 语法，代码易读易写，新手也能快速上手。
实时预览：修改脚本后无需手动刷新，应用会自动更新，开发效率大幅提升。
功能丰富：内置输入组件（滑块、按钮等）、图表渲染、多页面支持等功能，满足多样化数据应用需求。
免费开源：基于 Apache-2.0 许可证，可自由使用、修改，且拥有活跃的社区支持。
轻松分享：通过 Streamlit 社区云平台，一键部署应用并分享给他人访问。

二、环境准备与安装

1. 前置条件

确保你的电脑已安装 Python 3.8 及以上版本（推荐 3.10+），可通过以下命令检查 Python 版本：

python --version  # Windows 系统
# 或
python3 --version  # Mac/Linux 系统

若未安装 Python，可从 Python 官网下载对应系统的安装包，安装时勾选“Add Python to PATH”（Windows）。

2. 安装 Streamlit

打开终端（Windows 用命令提示符/PowerShell，Mac/Linux 用终端），执行以下命令：

# 使用 pip 安装 Streamlit
pip install streamlit
# 若 pip 版本较旧，可先升级 pip
# pip install --upgrade pip

3. 验证安装

安装完成后，执行官方测试命令，验证环境是否正常：

streamlit hello

若安装成功，终端会输出访问链接（通常是 http://localhost:8501），同时自动打开浏览器，显示 Streamlit 官方示例应用（包含多种功能演示）。

三、第一个 Streamlit 应用：基础交互示例

我们从一个简单的“数值平方计算”应用开始，掌握 Streamlit 的核心开发流程。

1. 编写代码

在电脑中创建一个文件夹（如 streamlit_demos），作为项目目录。
在该目录下新建一个 Python 文件，命名为 first_app.py。
复制以下代码到文件中：

# 导入 Streamlit 库，并简称为 st（行业通用写法）
import streamlit as st# 1. 设置应用标题（显示在页面顶部）
st.title("我的第一个 Streamlit 应用")# 2. 添加文本说明
st.write("这是一个简单的数值平方计算工具，通过滑块选择数值，实时查看结果！")# 3. 添加交互组件：滑块（让用户选择数值）
# 参数说明：标签、最小值、最大值、默认值
x = st.slider("请选择一个数值", min_value=0, max_value=100, value=50)# 4. 计算并展示结果
# st.write() 可输出文本、数值、表格等多种内容
st.write(f"你选择的数值是：{x}")
st.write(f"该数值的平方是：{x * x}")

2. 运行应用

打开终端，通过 cd 命令切换到项目目录（如 streamlit_demos）：

cd C:\Users\你的用户名\streamlit_demos  # Windows 示例
# 或
cd /Users/你的用户名/streamlit_demos  # Mac 示例

执行以下命令运行应用：
```
streamlit run first_app.py
```
终端会输出访问链接，打开浏览器访问（默认端口 8501），即可看到交互式页面：
- 拖动滑块时，页面会实时更新数值和平方结果，无需刷新浏览器。

四、核心功能与常用组件

Streamlit 提供了丰富的组件，可满足数据应用的多样化需求。以下是最常用的功能分类及示例代码。

1. 文本与标题组件

用于组织页面结构，添加标题、副标题、说明文本等：

import streamlit as st# 一级标题（页面主标题）
st.title("数据分析报告")# 二级标题（模块标题）
st.header("1. 数据概览")# 三级标题（子模块标题）
st.subheader("1.1 数据来源")# 普通文本
st.write("本报告数据来自某电商平台 2024 年第一季度销售记录。")# 强调文本（加粗、斜体）
st.markdown("**注意**：以下数据已剔除异常值。")  # Markdown 语法支持
st.markdown("_数据更新时间：2024-04-01_")

2. 数据展示组件

支持展示 DataFrame、表格、图表等，是数据应用的核心功能：

import streamlit as st
import pandas as pd
import numpy as np# 生成模拟数据（DataFrame）
data = pd.DataFrame({"日期": pd.date_range(start="2024-01-01", periods=7),"销售额": np.random.randint(1000, 5000, size=7),"订单量": np.random.randint(20, 80, size=7)
})# 1. 展示 DataFrame（交互式表格，支持排序、筛选）
st.subheader("销售数据明细")
st.dataframe(data)  # 推荐用 dataframe()，支持更多交互# 2. 展示静态表格（无交互，仅用于展示）
st.subheader("数据汇总（静态）")
summary = data[["销售额", "订单量"]].sum()
st.table(summary)# 3. 展示图表（内置 Matplotlib/Plotly 支持，无需额外配置）
st.subheader("销售额趋势图")
# 折线图：x 轴为日期，y 轴为销售额
st.line_chart(data, x="日期", y="销售额", use_container_width=True)# 柱状图：订单量分布
st.subheader("订单量分布")
st.bar_chart(data, x="日期", y="订单量", color="#FF6B6B", use_container_width=True)

3. 交互输入组件

让用户与应用互动，获取输入后动态处理数据。常用组件如下：

import streamlit as st# 1. 滑块（已在第一个示例中演示）
x = st.slider("选择数值", 0, 100, 50)# 2. 文本输入框（获取用户输入的文本）
name = st.text_input("请输入你的名字", placeholder="例如：张三")
if name:  # 若用户输入了内容，才显示问候语st.write(f"你好，{name}！")# 3. 下拉选择框
city = st.selectbox("选择你所在的城市", ["北京", "上海", "广州", "深圳", "其他"])
st.write(f"你所在的城市：{city}")# 4. 复选框（用于开启/关闭功能）
if st.checkbox("显示详细数据"):st.write("这里是详细数据内容...")  # 只有勾选时才显示# 5. 按钮（触发特定操作）
if st.button("点击生成报告"):st.success("报告生成成功！")  # 显示成功提示# 此处可添加生成报告的逻辑（如保存文件、发送邮件等）

4. 布局组件

用于灵活规划页面结构，避免内容混乱。常用布局包括“侧边栏”和“分栏”：

import streamlit as st
import pandas as pd# 1. 侧边栏（将组件放在左侧，节省主页面空间）
st.sidebar.title("参数设置")  # 侧边栏标题
start_date = st.sidebar.date_input("开始日期", value=pd.to_datetime("2024-01-01"))
end_date = st.sidebar.date_input("结束日期", value=pd.to_datetime("2024-01-07"))# 主页面内容
st.title("销售数据分析")
st.write(f"分析时间范围：{start_date} 至 {end_date}")# 2. 分栏（将主页面分成多列，并列展示内容）
col1, col2 = st.columns(2)  # 分成 2 列，比例 1:1# 第一列展示销售额
with col1:st.subheader("销售额")st.metric(label="总销售额", value="15,600 元", delta="+12%")  # 带增长幅度的指标卡# 第二列展示订单量
with col2:st.subheader("订单量")st.metric(label="总订单量", value="245 单", delta="-3%")

五、多页面应用开发

当应用功能复杂时，单页面会显得臃肿，此时可通过“多页面”功能拆分模块（如“数据概览”“趋势分析”“用户画像”）。

多页面目录结构

首先按照以下结构组织项目文件（必须严格遵守）：

streamlit_demos/          # 项目根目录
├── 01_数据概览.py         # 页面 1（数字前缀确保排序）
├── 02_趋势分析.py         # 页面 2
├── 03_用户画像.py         # 页面 3
└── data/                 # 数据文件夹（可选，存放 CSV/Excel 等）└── sales_data.csv

页面跳转与数据共享

页面跳转：运行应用后，左侧侧边栏会自动生成页面导航菜单，用户可点击切换页面。
数据共享：多页面间若需共享数据（如数据集、用户输入参数），可通过 st.session_state 实现（类似“全局变量”）：

示例：页面 1 保存参数，页面 2 读取参数

01_数据概览.py（保存参数）：

import streamlit as stst.title("数据概览")
# 选择时间范围并保存到 session_state
date_range = st.date_input("选择时间范围", [pd.to_datetime("2024-01-01"), pd.to_datetime("2024-01-31")])
st.session_state["selected_date"] = date_range  # 保存到全局状态

02_趋势分析.py（读取参数）：

import streamlit as stst.title("趋势分析")
# 从 session_state 读取之前保存的时间范围
if "selected_date" in st.session_state:selected_date = st.session_state["selected_date"]st.write(f"当前分析时间范围：{selected_date[0]} 至 {selected_date[1]}")
else:st.warning("请先在「数据概览」页面选择时间范围！")

六、应用部署与分享

开发完成后，可通过 Streamlit 社区云（免费）部署应用，生成公开链接，让他人无需安装环境即可访问。

部署步骤

准备 GitHub 仓库：
- 将项目代码上传到 GitHub 仓库（需包含所有 .py 文件和数据文件，确保 requirements.txt 存在）。
- 若项目依赖额外库（如 pandas numpy），需在根目录创建 requirements.txt 文件，列出所有依赖：
```
streamlit>=1.20.0
pandas>=2.0.0
numpy>=1.24.0
```
访问 Streamlit 社区云：
- 打开 Streamlit Community Cloud，用 GitHub 账号登录。
- 点击右上角 “New app”，进入部署配置页面：
  - Repository：选择你的 GitHub 仓库（如 your-username/streamlit_demos）。
  - Branch：选择分支（通常是 main）。
  - Main file path：选择主页面文件（如 01_数据概览.py）。
- 点击 “Deploy”，等待部署完成（通常 1-3 分钟）。
分享应用：
- 部署成功后，会生成一个公开链接（如 https://your-app-name.streamlit.app），可直接分享给他人访问。

七、常见问题与解决方案

1. 应用运行报错：“ModuleNotFoundError: No module named ‘xxx’”

原因：缺少依赖库（如 pandas numpy）。
解决方案：安装对应的库，命令：pip install xxx；若部署到社区云，需将库名添加到 requirements.txt。

2. 中文显示乱码

原因：Streamlit 默认字体可能不支持中文。

解决方案：在代码开头添加以下代码，设置中文字体：

import streamlit as st
from matplotlib import font_manager# 设置中文字体
plt.rcParams['font.sans-serif'] = ['SimHei', 'DejaVu Sans']
plt.rcParams['axes.unicode_minus'] = False  # 解决负号显示问题

3. 应用加载缓慢

原因：数据文件过大，或代码中存在耗时操作（如循环计算）。

解决方案：

对大文件进行预处理（如抽样、压缩），避免每次运行都重新加载全量数据。

用 @st.cache_data 装饰器缓存数据（避免重复计算）：

@st.cache_data  # 缓存数据，仅在数据或参数变化时重新计算
def load_data(file_path):data = pd.read_csv(file_path)return data# 调用函数（首次加载后，后续会直接使用缓存）
data = load_data("data/sales_data.csv")