Captured at (local ISO): 2026-05-18 05:17:01

Preface

If you are a Python developer who wants to turn analysis scripts or ML models into interactive web apps without drowning in HTML/CSS/JS, Streamlit is a great fit. This post walks you through Streamlit fundamentals from zero—no CSS theming yet—just the simplest path to a working web app.

1. Environment Setup: Install in 5 Minutes

Streamlit has a low bar: Python 3.8+ and one command.

Open a terminal and run:

pip install streamlit

If downloads are slow, use a mirror (e.g. Aliyun):

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

For mirror setup details see:
Python: pip too slow? Two steps to configure a domestic mirror

Verify: streamlit --version prints a version—install succeeded:

2. Streamlit Hello World

Streamlit’s idea is code is the app—write Python, run it, get a web UI.

1. Create 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. Run the app
   cd to the folder containing first_app.py (relative paths), then:

streamlit run first_app.py

You should see:

  You can now view your Streamlit app in your browser.

  Local URL: http://localhost:8501
  Network URL: http://192.168.1.100:8501

Open the Local URL (usually http://localhost:8501):

3. Hot reload
   Edit and save first_app.py—the browser refreshes automatically without restarting streamlit run.

3. Core Streamlit Building Blocks

These four groups cover most basic apps.

1. Text widgets: displaying information

Streamlit text APIs mirror Markdown closely:
import streamlit as st

Headings

Levels 1–6, like # … ###### in Markdown:

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

Plain text and Markdown

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

Quotes and alerts

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

2. Data display: quick visualization

Streamlit works seamlessly with Pandas/NumPy—tables and charts with little boilerplate.

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. Interactive widgets: make the app “alive”

Buttons, sliders, select boxes, etc.—values are plain Python variables.

Button

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

After click:

Slider: numeric input

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

Selectbox: choose an option

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

、
Expanded:

Checkbox: toggle content

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

Checked:

4. File upload: user-provided data

st.file_uploader handles CSV/Excel uploads for analysis workflows.

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("请上传文件以查看数据")

After upload (dark-mode browser in screenshots):

4. Hands-on: simple data explorer

Combining the above—upload, pick columns, plot:

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 None
        
        if 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文件")

Dozens of lines of Python replace a traditional front-end + back-end split.

With file loaded:

5. Summary and what’s next

Today we covered: setup and Hello World; text, data, and interactive widgets; a full data-explorer demo—enough for many Python web demos and reports.
Next up: styling with CSS to go from “works” to “looks good”. Questions welcome in the comments.