ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

不会前端怎么做数据网页?Streamlit 入门指南:几行 Python 变出可交互应用

不会前端怎么做数据网页?Streamlit 入门指南:几行 Python 变出可交互应用 Streamlit 入门指南几行 Python 做出数据应用一、开头痛点想把数据变成应用却被前端劝退很多 Python 工程师都遇到过这样的尴尬用 pandas 跑出一串漂亮的分析结果用 matplotlib 画出几张图最后只能截图发群里或者用 Jupyter Notebook 自己看。想把它做成「别人打开网页就能用」的工具就得学 HTML、CSS、JavaScript再配一个 Flask/Django 后端——光是环境就劝退一大半人。Streamlit 就是为解决这个问题而生的。它让你只用 Python就能写出一个带交互、能实时刷新的 Web 应用不用写一行前端代码。改完脚本保存网页自动热更新。数据分析师、算法工程师、运维同学都能在几十行代码内把脚本变成可分享的产品原型。二、环境准备一行命令装好Streamlit 是纯 Python 库支持 Python 3.8。建议先用虚拟环境隔离依赖避免污染全局# 创建并激活虚拟环境可选但推荐python-mvenv .venvsource.venv/bin/activate# Windows 用 .venv\Scripts\activate# 安装 Streamlitpipinstallstreamlit装完验证一下版本能正常打印就说明环境 OK# check_version.pyimportstreamlitasst# 打印当前 Streamlit 版本确认安装成功print(Streamlit 版本,st.__version__)在终端运行streamlit run check_version.py会启动本地服务并自动打开浏览器默认地址是http://localhost:8501。本文所有示例都用这个端口访问。三、最小可运行示例Hello, Streamlit我们先写一个「能跑起来」的最简应用建立整体直觉# app.pyimportstreamlitasst# st.title 渲染页面大标题st.title(我的第一个 Streamlit 应用)# st.write 是最通用的输出函数能渲染文本、数字、DataFrame、图表等st.write(你好这是用纯 Python 写出来的网页)# 一个滑动条返回当前数值拖动时页面会实时重跑脚本agest.slider(请选择你的年龄,0,120,25)st.write(你选择的年龄是,age)运行streamlit run app.py拖动滑块右侧数字会立刻跟着变。这背后有个关键机制每次交互整个脚本都会从上到下重跑一遍Streamlit 再把新的输出映射到界面上。理解这一点后面很多「坑」就迎刃而解了。四、核心概念控件、布局、状态与缓存1) 输入控件widgets控件函数会「返回」当前的值你把它赋给变量即可namest.text_input(你的名字,张三)# 文本输入框agreest.checkbox(我同意条款)# 勾选框返回布尔值optionst.selectbox(选择城市,[北京,上海,广州])# 下拉框clickedst.button(点我提交)# 按钮点击的那次重跑返回 True2) 布局layout用st.sidebar把控件放到左侧栏用st.columns做并排布局st.sidebar.title(筛选条件)# 侧边栏thresholdst.sidebar.slider(阈值,0,100,50)col1,col2st.columns(2)# 两列并排col1.metric(销量,1280)col2.metric(增长率,12%)3) 会话状态session_state因为脚本每次都重跑想让数据「跨重跑」保存就要用st.session_stateifcountnotinst.session_state:st.session_state.count0# 只在首次初始化ifst.button(加一):st.session_state.count1st.write(当前计数,st.session_state.count)4) 缓存cache加载大文件或训练模型很慢每次重跑都重来会卡死。st.cache_data把函数结果按入参缓存起来st.cache_datadefload_data(path):importpandasaspdreturnpd.read_csv(path)# 同一 path 只真正读取一次五、进阶用法文件上传与图表联动Streamlit 对 pandas、matplotlib、Plotly 等生态是原生友好的。下面演示「上传 CSV → 自动出图 → 用滑块过滤」的进阶组合importpandasaspdimportstreamlitasst uploadedst.file_uploader(上传一个 CSV 文件,typecsv)ifuploadedisnotNone:dfpd.read_csv(uploaded)# 直接把上传对象喂给 pandasst.dataframe(df.head(20))# 交互式表格可排序numeric_colsdf.select_dtypes(number).columns.tolist()ifnumeric_cols:colst.selectbox(选择要画图的数值列,numeric_cols)top_nst.slider(显示前 N 行,5,50,10)st.line_chart(df[col].head(top_n))# 内置折线图无需额外配置如果用 matplotlib 画图记得用st.pyplot()承接importmatplotlib.pyplotasplt fig,axplt.subplots()ax.hist(df[col],bins20)st.pyplot(fig)# 把 figure 交给 Streamlit 渲染六、实战场景一个迷你销售看板完整代码把前面概念串起来做一个能用的小应用上传销售数据按城市筛选看趋势和汇总。# dashboard.pyimportpandasaspdimportstreamlitasstst.cache_datadefload_data(uploaded_file):读取上传的 CSV缓存避免重复解析。returnpd.read_csv(uploaded_file)st.set_page_config(page_title销售看板,layoutwide)st.title( 迷你销售看板)uploadedst.file_uploader(上传销售数据 CSV需含 city、amount、date 列,typecsv)ifuploadedisNone:st.info(请先上传一个 CSV 文件开始使用。)st.stop()# 没上传就停止后续渲染dfload_data(uploaded)df[date]pd.to_datetime(df[date])# 转成日期类型便于按时间画图citiesst.sidebar.multiselect(选择城市,df[city].unique(),defaultlist(df[city].unique())[:3])filtereddf[df[city].isin(cities)]col1,col2st.columns(2)col1.metric(总销售额,f{filtered[amount].sum():,.0f})col2.metric(订单数,len(filtered))st.subheader(销售额趋势)st.line_chart(filtered.set_index(date)[amount].resample(D).sum())st.subheader(城市汇总)st.dataframe(filtered.groupby(city)[amount].sum().reset_index())运行streamlit run dashboard.py上传一份带city/amount/date的 CSV就能得到一个可筛选、可联动的销售看板。这已经是一个能交付给同事看的原型了。七、常见坑与报错附解决办法坑 1ModuleNotFoundError: No module named streamlit现象终端跑streamlit run app.py报找不到模块。原因装到了 A 环境却用 B 环境的 Python 启动或根本没装。解决确认安装和运行的解释器一致——which python/pip show streamlit核对路径虚拟环境下先activate再运行。坑 2端口 8501 被占用自动跳到 8502/8503现象启动时提示Port 8501 is already in use, trying 8502。原因上一次没关或服务已在跑。解决要么关掉旧进程要么显式指定端口streamlit run app.py --server.port 8503。坑 3点了st.button后状态没记住现象在按钮回调里1刷新后计数又变回初始值。原因脚本每次交互都从头重跑button点击只在「那一次」重跑返回True之后就重置直接写变量无法跨重跑保存。解决用st.session_state持久化见第四节或用st.checkbox/st.toggle这类天然带状态的控件替代。八、总结与下一步Streamlit 的核心优势就一句话把 Python 脚本直接变成可交互的 Web 应用无需任何前端知识。本文覆盖了安装、最小示例、核心控件、布局与状态、缓存、文件上传以及一个完整的销售看板实战。下一步建议你用st.cache_resource缓存数据库连接或机器学习模型适合不可变的大对象把多个页面拆成pages/目录做成多页应用用streamlit deployStreamlit Community Cloud免费托管把原型分享给任何人。动手把今天你的某个 pandas 脚本包一层st.你就拥有了人生第一个数据应用。
返回列表