L21. 交互层开发：让数据说话

Vibe Coding 宣言：再牛逼的后台，如果没有前端，在老板眼里就是一堆乱码。

0. 为什么这一课至关重要？ (Why It Matters)

• 颜值即正义：一个漂亮的界面能让你的作品价值翻倍。
• 告别黑底白字：命令行是给黑客用的，网页是给用户用的。
• Streamlit 魔法：不用学 HTML/CSS/JS，只用 Python 就能画出漂亮的网页。

1. 目标 (Goal)

学会使用 Streamlit 快速搭建数据看板 (Dashboard)，将后台数据可视化展示。

2. 核心概念/装备/指令 (The Core)

2.1 Streamlit (The Magic Wand)

• st.write(): 万能输出，丢啥显啥。
• st.dataframe(): 展示可交互的表格。
• st.line_chart(): 画折线图。
• st.sidebar: 侧边栏布局。

3. 实战演练 (Action)

Step 1: 安装

pip install streamlit

Step 2: Hello World

新建 app.py：

import streamlit as st
import pandas as pd

st.title("我的比价神器 🚀")
st.write("这是我的第一个 Vibe Coding 作品。")

# 模拟数据
df = pd.DataFrame({
    '商品': ['iPhone 15', 'MacBook Pro', 'AirPods'],
    '价格': [5999, 12999, 1299]
})

st.dataframe(df)
st.bar_chart(df.set_index('商品'))

Step 3: 启动

在终端运行：

streamlit run app.py

它会自动打开浏览器，你就能看到网页了。

Step 4: 接入真实数据

修改 app.py，调用我们之前的 StorageManager：

from storage import StorageManager

db = StorageManager()
df = db.get_products()

# 侧边栏过滤器
min_price = st.sidebar.slider("最低价格", 0, 10000, 0)
filtered_df = df[df['price'] > min_price]

st.dataframe(filtered_df)

4. 常见问题 (FAQ - Vibe Style)

Q: 每次修改代码都要重启吗？ A: 不用！ 网页右上角有个 Rerun，点击 Always rerun。只要你保存代码，网页自动刷新。

Q: 能做复杂的交互吗？ A: 能，但没必要。 Streamlit 适合做数据展示。如果要做复杂的电商网站，得学 React（下一课）。

Q: 怎么分享给别人看？ A: Streamlit Cloud。 直接连接 GitHub，一键部署。这是最快的上线方式。

5. 验收标准 (Definition of Done)

1. 运行 streamlit run app.py 成功打开网页。
2. 网页上有标题、表格和图表。
3. 能通过侧边栏筛选数据。

---

Next Mission: L22. 前端入门：React 初体验