Streamlit：基础入门——零基础搭建第一个 Web 应用

前言

如果你是 Python 开发者，想快速将数据分析脚本、机器学习模型转成可交互的 Web 应用，却又不想陷入 HTML/CSS/JS 的复杂开发中，那么 Streamlit 绝对是你的理想工具。今天这篇文章，我们将带你从零开始掌握 Streamlit 的核心基础，不涉及任何 CSS 渲染内容，专注于用最简单的方式搭建可用的 Web 应用。

一、环境准备：5 分钟完成安装

Streamlit 的安装门槛极低，只要你有 Python 环境（推荐 3.8 及以上版本），通过一行命令就能完成部署。

打开终端 / 命令提示符，执行以下命令：

pip install streamlit

若安装缓慢，可切换国内镜像源（如阿里云）：

pip install -i https://mirrors.aliyun.com/pypi/simple/ streamlit

关于镜像源的具体内容可以参考我之前写的博客：

Python ：pip 下载太慢？教你 2 步配置国内镜像源，速度从 KB/s 到 MB

验证：输入streamlit --version，显示版本信息即安装成功，效果如下：

二、Streamlit 的 Hello World

Streamlit 的核心理念是「代码即应用」，无需额外配置，写好 Python 脚本后直接运行即可生成 Web 服务。

1. 编写基础脚本
   新建一个名为first_app.py的文件，输入以下代码：

# 导入Streamlit库，约定俗成简称为st
import streamlit as st# 添加标题（一级标题，类似Markdown的#）
st.title("我的第一个Streamlit应用")# 添加副标题（二级标题，类似Markdown的##）
st.subheader("Hello World! 👋")# 添加普通文本
st.write("这是一个用Streamlit快速搭建的Web应用，无需任何前端知识！")# 添加代码块（支持指定语言高亮）
st.code("""
import streamlit as st
st.title("Hello World")
""", language="python")

2. 运行应用
   在终端中进入first_app.py所在的文件夹（因为这边使用的是相对路径，如果使用绝对路径的话就没必要了），执行以下命令：

streamlit run first_app.py

执行后会出现类似以下的提示：

  You can now view your Streamlit app in your browser.Local URL: http://localhost:8501Network URL: http://192.168.1.100:8501

此时打开浏览器访问「Local URL」（通常是http://localhost:8501），就能看到你的第一个 Streamlit 应用啦！
效果如下：

3. 热重载特性（开发神器）
   Streamlit 默认开启「热重载」—— 当你修改first_app.py并保存后，浏览器中的应用会自动刷新，无需重新执行streamlit run命令，极大提升开发效率。

三、Streamlit 核心基础功能

掌握以下 4 类核心功能，就能满足 80% 的基础应用开发需求，我们逐一讲解并附示例代码。

1. 文本类组件：展示信息的基础

Streamlit 提供了多种文本展示方式，覆盖从标题到引用的全场景，语法和 Markdown 高度相似：
import streamlit as st

标题系列

Streamlit的标题分为 1-6级，对应Markdown的#到######

import streamlit as st
st.title("一级标题")
st.header("二级标题")
st.subheader("三级标题")

效果如下：

普通文本与Markdown

import streamlit as st
st.write("这是普通文本，支持直接写字符串")
# 也支持Markdown语法（如加粗、斜体、列表）
st.markdown("""
- 这是Markdown列表项1
- 这是Markdown列表项2
**加粗文本** | *斜体文本*
""")

效果如下

引用与警告

import streamlit as st
st.info("ℹ️ 这是信息提示框")  # 蓝色信息框
st.success("✅ 这是成功提示框")  # 绿色成功框
st.warning("⚠️ 这是警告提示框")  # 黄色警告框
st.error("❌ 这是错误提示框")  # 红色错误框

效果如下

2. 数据展示组件：快速可视化数据

如果你常做数据分析，Streamlit 对 Pandas、NumPy 数据的支持堪称「无缝衔接」，无需额外处理就能展示表格和图表。
示例：展示 DataFrame 与基础图表

import streamlit as st
import pandas as pd
import numpy as np# 1. 生成模拟数据（Pandas DataFrame）
data = pd.DataFrame({"姓名": ["张三", "李四", "王五", "赵六"],"年龄": [25, 32, 28, 40],"月薪": [8000, 15000, 12000, 20000]
})# 2. 展示原始数据表格
st.subheader("员工信息表")
st.dataframe(data)  # 可交互表格（支持排序、滚动）# 3. 展示静态表格（无交互，更简洁）
st.subheader("静态表格")
st.table(data.head(2))  # 只展示前2行# 4. 快速生成图表（基于DataFrame，无需额外配置）
st.subheader("月薪分布图表")
# 柱状图：x轴为姓名，y轴为月薪
st.bar_chart(data, x="姓名", y="月薪", color="#1f77b4")
# 折线图：x轴为姓名，y轴为年龄
st.line_chart(data, x="姓名", y="年龄", color="#ff7f0e")

效果如下：

3. 交互组件：让应用「活」起来

Streamlit 提供了大量开箱即用的交互组件（按钮、滑块、下拉框等），且获取组件值的方式极其简单 —— 像调用变量一样直接使用。
示例：常用交互组件

按钮（Button）

import streamlit as st
import pandas as pd
if st.button("点击我显示隐藏内容"):st.success("你点击了按钮！这是隐藏的内容～")
else:st.write("点击上方按钮查看更多")

效果如下：

点击过后效果如下：

滑块（Slider）：获取数值

import streamlit as st
import pandas as pd
age = st.slider("请选择你的年龄", min_value=0, max_value=120, value=25)
st.write(f"你的年龄是：{age}岁")

效果如下（红色滑块可滑动）

下拉框（Selectbox）：选择选项

import streamlit as st
import pandas as pd
city = st.selectbox("你所在的城市",options=["北京", "上海", "广州", "深圳", "其他"]
)
st.write(f"你选择的城市是：{city}")

效果如下：
、
展开之后效果如下：

复选框（Checkbox）：控制内容显示

import streamlit as st
import pandas as pd
if st.checkbox("显示员工数据"):data = pd.DataFrame({"姓名": ["张三", "李四"],"月薪": [8000, 15000]})st.dataframe(data)

效果如下：

点开之后效果如下：

4. 文件上传组件：处理用户输入数据

在数据分析场景中，常需要用户上传 Excel/Csv 文件，Streamlit 的file_uploader组件能轻松实现这一需求。
示例：上传并展示 Csv 文件

import streamlit as st
import pandas as pd# 创建文件上传器（指定支持的文件类型）
uploaded_file = st.file_uploader("上传Csv/Excel文件", type=["csv", "xlsx"])# 若用户上传了文件，则处理并展示
if uploaded_file is not None:# 判断文件类型，选择对应的读取方式if uploaded_file.name.endswith("csv"):df = pd.read_csv(uploaded_file)else:  # xlsx格式df = pd.read_excel(uploaded_file)# 展示数据基本信息st.subheader("上传的数据预览")st.dataframe(df.head(5))  # 预览前5行st.subheader("数据基本统计")st.write(f"数据总行数：{len(df)}")st.write("数值列统计信息：")st.dataframe(df.describe())  # 统计均值、标准差等
else:st.write("请上传文件以查看数据")

效果如下：

上传文件之后效果如下：

这边因为浏览器的兼容问题，所以博主换了一个浏览器进行测试（这个浏览器是设置成黑夜模式的 所以整体界面是黑色）

四、实战案例：简易数据探索应用

将前面学的功能整合起来，我们做一个「简易数据探索应用」，支持上传文件、选择列、生成图表，完整代码如下：

import streamlit as st
import pandas as pd# 设置页面标题
st.title("简易数据探索应用")
st.divider()  # 添加分割线# 1. 上传文件
uploaded_file = st.file_uploader("第一步：上传数据文件", type=["csv", "xlsx"])if uploaded_file:# 读取数据df = pd.read_csv(uploaded_file) if uploaded_file.name.endswith("csv") else pd.read_excel(uploaded_file)# 2. 展示数据预览st.subheader("数据预览")st.dataframe(df.head(3))st.write(f"数据维度：{df.shape[0]}行 × {df.shape[1]}列")# 3. 选择要分析的列（仅数值列）numeric_cols = df.select_dtypes(include=["int64", "float64"]).columns.tolist()if numeric_cols:selected_col = st.selectbox("第二步：选择要分析的数值列", options=numeric_cols)# 4. 选择图表类型chart_type = st.radio("第三步：选择图表类型", options=["柱状图", "折线图", "直方图"])# 5. 生成图表st.subheader(f"{selected_col}的{chart_type}")# 选择x轴，如果有"月份"列则使用，否则使用索引x_col = "月份" if "月份" in df.columns else Noneif chart_type == "柱状图":st.bar_chart(df, x=x_col, y=selected_col)elif chart_type == "折线图":st.line_chart(df, x=x_col, y=selected_col)else:  # 直方图st.histogram(df[selected_col], bins=10)  # bins为分箱数else:st.warning("数据中没有数值列，无法生成图表")
else:st.info("请先上传Csv或Excel文件")

运行这个脚本后，你会得到一个能让用户自主上传数据、选择分析维度的交互式应用 —— 这就是 Streamlit 的魅力：用几十行 Python 代码，实现传统前端 + 后端才能完成的功能。

效果如下：

上传文件之后效果如下：

五、总结与后续预告

今天博客内容包含了 Streamlit 的核心基础：
环境搭建与 Hello World 程序
文本、数据、交互组件的使用
实战案例：整合功能实现数据探索应用
这些内容足以支撑开发大多数基础的 Python Web 应用（如数据分析报告、模型 Demo 等）。
当基础功能满足需求后，我们会进入「外观优化」阶段 —— 讲解如何通过 CSS 渲染自定义 Streamlit 应用的样式（如修改颜色、调整布局、美化组件），让应用从「能用」变得「好看」。
如果在实践中遇到任何问题，欢迎在评论区留言