基于Streamlit框架快速创建和分享自定义的交互式Web应用

基于Streamlit框架快速创建和分享自定义的交互式Web应用

概述

Streamlit 是一个强大的 Python 库，用于快速构建数据科学和机器学习 Web 应用。结合 PyCharm 这一优秀的 Python IDE，可以极大地提升开发效率和调试体验。本文将详细介绍在 Windows 10/11 系统下，使用 PyCharm Community Edition 2024 配置、运行和调试 Streamlit 1.57.0 应用的完整流程。

核心技术架构

┌────────────────┐    ┌────────────────┐    ┌────────────────┐
│ Python脚本     │ -> │ Streamlit运行时 │ -> │ 交互式Web应用  │
│(数据分析/模型)  │    │  (Python/JS)   │    │  (浏览器)      │
└────────────────┘    └────────────────┘    └────────────────┘
         ↑                     ↑                     ↑
         │                     │                     │
┌────────────────┐    ┌────────────────┐    ┌────────────────┐
│ 数据源         │    │ 组件库         │    │ 用户交互       │
│(文件/数据库/API)│    │ (UI元素)       │    │ (输入/操作)    │
└────────────────┘    └────────────────┘    └────────────────┘

开发环境准备

系统与软件版本

• 操作系统: Windows 10 或 Windows 11
• IDE: PyCharm Community Edition 2024 (或其他版本)
• Streamlit 版本: 1.57.0 (或其他版本)
• Python: 建议使用 Python 3.8 及以上版本

Streamlit 安装方式

方式一：全局安装（简单快捷）

直接在系统 Python 环境中安装 Streamlit：

# 基础安装命令
pip install streamlit

# 使用国内阿里云镜像加速安装（推荐）
pip install streamlit -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com

# 配置 pip 永久使用阿里云镜像
pip config set global.index-url http://mirrors.aliyun.com/pypi/simple

安装验证：

streamlit --version
# 应输出类似：streamlit, version 1.57.0

启动示例应用：

streamlit run app.py --server.port 8501

方式二：虚拟环境安装（推荐，项目隔离）

为每个 Streamlit 项目创建独立的虚拟环境，避免依赖冲突。

# 1. 创建虚拟环境（将 your_env_name 替换为你的环境名）
python -m venv your_env_name

# 2. 激活虚拟环境
# Windows PowerShell 或 CMD:
.\your_env_name\Scripts\activate
# 激活成功后，命令行前面会出现 (your_env_name) 的提示

# 3. 在虚拟环境中安装 Streamlit
pip install streamlit

# 4. 验证安装并运行示例
streamlit hello

在 PyCharm 中配置项目

1. 创建新项目

1. 打开 PyCharm，选择 File → New Project
2. 指定项目位置和名称
3. 在 Python Interpreter 设置中：
   • 如果使用方式一（全局环境），选择系统已有的 Python 解释器
   • 如果使用方式二（虚拟环境），选择 Existing interpreter，然后浏览到虚拟环境目录下的 python.exe（例如：your_env_name\Scripts\python.exe）

2. 安装依赖

在 PyCharm 的终端（Terminal）中，确保已激活正确的环境，然后运行安装命令：

# 如果尚未安装 streamlit
pip install streamlit

# 安装其他可能需要的库，如 pandas, numpy, matplotlib 等
pip install pandas numpy matplotlib

或者通过 PyCharm 的图形界面安装：

1. File → Settings → Project: [你的项目名] → Python Interpreter
2. 点击 + 按钮
3. 搜索 streamlit 并安装

创建第一个 Streamlit 应用

在项目根目录下创建 app.py 文件，输入以下基础代码：

import streamlit as st
import pandas as pd
import numpy as np

st.set_page_config(
    page_title="我的第一个 Streamlit 应用",
    page_icon="🚀",
    layout="wide"
)

# 应用标题
st.title("🚀 欢迎使用 Streamlit！")
st.subheader("在 PyCharm 中开发与调试")

# 侧边栏
with st.sidebar:
    st.header("控制面板")
    user_name = st.text_input("请输入您的姓名", "开发者")
    slider_value = st.slider("选择一个数值", 0, 100, 50)

# 主内容区
st.write(f"你好，**{user_name}**！")
st.write(f"你选择的数值是：**{slider_value}**")

# 数据展示示例
df = pd.DataFrame({
    '第一列': np.random.randn(10),
    '第二列': np.random.randn(10),
    '第三列': np.random.randn(10)
})

st.write("### 随机数据表格")
st.dataframe(df)

# 图表示例
st.write("### 折线图示例")
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=['A', 'B', 'C'])
st.line_chart(chart_data)

# 按钮交互
if st.button("点击这里"):
    st.balloons()
    st.success("按钮被点击了！")

# 显示代码
with st.expander("查看应用源代码"):
    st.code(__file__)

运行 Streamlit 应用

方法一：通过 PyCharm 终端运行

1. 打开 PyCharm 底部的 Terminal 标签页
2. 确保已激活正确的 Python 环境（虚拟环境或全局环境）
3. 运行以下命令：

streamlit run app.py

默认情况下，Streamlit 会在 http://localhost:8501 启动服务。

方法二：自定义运行配置（推荐）

创建 PyCharm 运行配置，方便一键启动：

1. Run → Edit Configurations
2. 点击 + 按钮，选择 Python
3. 配置如下：
   • Script path: 浏览选择你的 app.py 文件
   • Parameters: run app.py
   • Python interpreter: 选择项目对应的解释器
   • Working directory: 选择项目根目录
4. 点击 OK 保存配置
5. 现在可以通过点击 PyCharm 工具栏的绿色运行按钮 ▶️ 启动应用

自定义端口：
如果需要在特定端口运行（如 8501），可以在 Parameters 中指定：

run app.py --server.port 8501

调试 Streamlit 应用

1. 设置断点

在 PyCharm 编辑器中，点击代码行号左侧的灰色区域，设置断点（红色圆点）。

2. 以调试模式启动

方法 A：使用运行配置

1. 确保已按照上述步骤创建了运行配置
2. 点击运行按钮旁边的 Debug 按钮（绿色虫子图标）

方法 B：直接调试

1. 在 app.py 文件中右键
2. 选择 Debug ‘app’

3. 调试流程

1. Streamlit 应用会在调试模式下启动
2. 当代码执行到断点时，程序会暂停
3. 在 PyCharm 的调试面板中，你可以：
   • 查看变量值
   • 单步执行（Step Over/Into）
   • 查看调用栈
   • 评估表达式
4. 继续执行或停止调试

4. 热重载与调试

Streamlit 支持热重载（Hot Reload），当你修改代码并保存后，应用会自动重新加载。在调试模式下：

1. 修改代码后保存
2. Streamlit 检测到文件变化，自动重启
3. 新的断点会生效
4. 注意：某些状态（如会话状态）可能会在重载时重置

常见问题与解决方案

1. 端口被占用

# 错误信息：Address already in use
# 解决方案：指定其他端口
streamlit run app.py --server.port 8502

2. 浏览器未自动打开

# 添加 --server.headless true 禁用自动打开浏览器
streamlit run app.py --server.headless true
# 然后手动访问 http://localhost:8501

3. 调试时断点不生效

• 确保以 Debug 模式运行，而不是普通运行模式
• 检查 PyCharm 的调试器配置是否正确
• 确保代码文件已保存

4. 虚拟环境激活问题

在 PyCharm 中，确保：

1. File → Settings → Project → Python Interpreter 选择了正确的虚拟环境
2. 终端中显示虚拟环境名称（如 (venv)）

高级配置

1. 自定义主题

在项目根目录创建 .streamlit/config.toml 文件：

[theme]
primaryColor = "#FF4B4B"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#262730"
font = "sans serif"

[server]
port = 8501
enableCORS = false
enableXsrfProtection = true

2. 环境变量配置

在 PyCharm 运行配置中设置环境变量：

1. Run → Edit Configurations
2. 选择你的 Streamlit 运行配置
3. 在 Environment variables 中添加，例如：

   STREAMLIT_SERVER_PORT=8501
   STREAMLIT_THEME_BASE=light
   

3. 使用 requirements.txt 管理依赖

# 生成 requirements.txt
pip freeze > requirements.txt

# 从 requirements.txt 安装
pip install -r requirements.txt

总结

通过以上步骤，你可以在 PyCharm 中高效地开发、运行和调试 Streamlit 应用。关键要点：

1. 环境隔离：推荐使用虚拟环境，避免依赖冲突
2. 运行配置：在 PyCharm 中创建运行配置，方便一键启动
3. 调试技巧：合理设置断点，利用 PyCharm 强大的调试功能
4. 热重载：利用 Streamlit 的热重载特性快速迭代开发

现在，你可以开始构建功能丰富的 Streamlit 应用了！如有问题，请参考 Streamlit 官方文档 或 PyCharm 帮助文档。

---