Python Streamlit快速構(gòu)建交互式可視化 Web 應(yīng)用的完整指南
引言:告別繁瑣,擁抱極簡
作為一名 Python 開發(fā)者,你是否曾有過這樣的困擾:辛辛苦苦完成的數(shù)據(jù)分析、機(jī)器學(xué)習(xí)模型,想要以一個(gè)漂亮、交互式的 Web 應(yīng)用形式分享給他人,卻苦于前端開發(fā)(HTML、CSS、JavaScript)的復(fù)雜門檻?傳統(tǒng)的 Web 框架(如 Flask、Django)固然強(qiáng)大,但對于只想快速展示結(jié)果、不愿陷入前端泥潭的 Python 用戶來說,學(xué)習(xí)曲線無疑是陡峭的。
別擔(dān)心!今天,我們將隆重介紹一個(gè)“傻瓜式”的 Python 神器——Streamlit。它徹底改變了 Python 用戶構(gòu)建 Web 應(yīng)用的方式,讓你無需任何前端知識,僅用幾行純 Python 代碼,就能創(chuàng)建出專業(yè)且高度交互的數(shù)據(jù)應(yīng)用和機(jī)器學(xué)習(xí)界面。
本篇文章旨在為完全的初學(xué)者提供一份詳盡、手把手的 Streamlit 入門指南。我們將從安裝 Streamlit 開始,逐步構(gòu)建一個(gè)功能豐富的交互式 Web 應(yīng)用,讓你親身體驗(yàn) Streamlit 的魔力。
準(zhǔn)備工作:你的開發(fā)環(huán)境就緒了嗎
在開始 Streamlit 的奇妙旅程之前,請確保你的開發(fā)環(huán)境滿足以下基本要求:
1. Python 環(huán)境
Python 版本: 確保你安裝了 Python 3.7 或更高版本。你可以在終端或命令行中輸入 python --version 來檢查。
虛擬環(huán)境(推薦): 強(qiáng)烈建議為每個(gè)項(xiàng)目創(chuàng)建一個(gè)獨(dú)立的 Python 虛擬環(huán)境。這有助于管理項(xiàng)目依賴,避免不同項(xiàng)目間的包沖突。
創(chuàng)建虛擬環(huán)境:python -m venv my_streamlit_env
激活虛擬環(huán)境:
- Windows:
.\my_streamlit_env\Scripts\activate - macOS/Linux:
source my_streamlit_env/bin/activate
2. 包管理器 pip
pip: Python 安裝時(shí)通常會(huì)自帶 pip 包管理器。它是我們安裝 Streamlit 及其他 Python 庫的關(guān)鍵工具。你可以在終端中輸入 pip --version 來檢查。
3. 代碼編輯器
選擇一個(gè)你喜歡的代碼編輯器: Visual Studio Code (VS Code)、PyCharm、Sublime Text 或任何你熟悉的文本編輯器都可以。VS Code 是一個(gè)非常流行的選擇,因?yàn)樗p量且功能強(qiáng)大,擁有豐富的 Python 擴(kuò)展。
傻瓜式上手指南:六步走,點(diǎn)亮你的第一個(gè)應(yīng)用
第一步:安裝 Streamlit
確保你的虛擬環(huán)境已激活(如果使用了虛擬環(huán)境),然后打開終端或命令行,輸入以下命令安裝 Streamlit:
pip install streamlit
安裝完成后,你可以運(yùn)行 Streamlit 的內(nèi)置示例應(yīng)用來驗(yàn)證安裝是否成功:
streamlit hello
如果一切順利,你的瀏覽器會(huì)自動(dòng)打開一個(gè)新頁面,展示 Streamlit 的歡迎界面和一些示例應(yīng)用。這意味著你已經(jīng)成功邁出了第一步!
第二步:你的第一個(gè) Streamlit 應(yīng)用 (Hello World!)

現(xiàn)在,讓我們來創(chuàng)建一個(gè)最簡單的 Streamlit 應(yīng)用。
在你選擇的目錄下,創(chuàng)建一個(gè)名為 my_first_app.py 的 Python 文件。
將以下代碼粘貼到文件中:
# my_first_app.py
import streamlit as st
# 設(shè)置頁面標(biāo)題
st.title('我的第一個(gè) Streamlit 應(yīng)用')
# 添加一個(gè)頭部
st.header('歡迎來到 Streamlit 的世界!')
# 添加一些普通文本
st.write('這是一個(gè)使用 Streamlit 構(gòu)建的簡單 Web 頁面。')
st.write('你可以在這里展示你的數(shù)據(jù)、模型結(jié)果等。')
# 使用 Markdown 格式
st.markdown('### 這是一個(gè)三級標(biāo)題')
st.markdown('**加粗文字** 和 *斜體文字*')
st.markdown('你甚至可以插入鏈接:[Streamlit 官方網(wǎng)站](https://streamlit.io/)')
# 顯示一個(gè)代碼塊
st.code("""
def greet(name):
return f"Hello, {name}!"
print(greet("Streamlit 用戶"))
""")
保存文件。
回到終端或命令行,確保你位于 my_first_app.py 文件所在的目錄,然后運(yùn)行以下命令:
streamlit run my_first_app.py
同樣,你的瀏覽器會(huì)自動(dòng)打開一個(gè)新頁面,顯示你剛剛編寫的 Streamlit 應(yīng)用。恭喜!你已經(jīng)成功創(chuàng)建并運(yùn)行了你的第一個(gè) Streamlit 應(yīng)用。
Streamlit 的魔法: 你會(huì)發(fā)現(xiàn),當(dāng)你修改 my_first_app.py 文件并保存時(shí),Streamlit 應(yīng)用會(huì)自動(dòng)刷新,無需你手動(dòng)重啟服務(wù)器。這是 Streamlit 提高開發(fā)效率的重要特性之一。
第三步:添加交互式組件
Streamlit 最強(qiáng)大的功能之一就是它能輕松添加各種交互式組件。用戶可以通過這些組件與你的應(yīng)用進(jìn)行互動(dòng),輸入數(shù)據(jù)、選擇選項(xiàng),從而動(dòng)態(tài)地改變應(yīng)用的內(nèi)容。
讓我們修改 my_first_app.py 文件,添加一些交互組件:
# my_first_app.py (更新版)
import streamlit as st
st.title('交互式 Streamlit 應(yīng)用示例')
st.header('嘗試與這些組件互動(dòng)吧!')
# 文本輸入框 (st.text_input)
user_name = st.text_input('請輸入你的名字:', '訪客')
st.write(f'你好,{user_name}!歡迎使用 Streamlit。')
# 滑塊 (st.slider)
age = st.slider('請選擇你的年齡:', 0, 100, 25) # (標(biāo)簽, 最小值, 最大值, 默認(rèn)值)
st.write(f'你選擇的年齡是:{age} 歲。')
# 按鈕 (st.button)
if st.button('點(diǎn)擊我!'):
st.write('你點(diǎn)擊了按鈕!')
# 下拉選擇框 (st.selectbox)
option = st.selectbox(
'你最喜歡的水果是什么?',
('蘋果', '香蕉', '橙子', '葡萄')
)
st.write(f'你選擇的水果是:{option}')
# 復(fù)選框 (st.checkbox)
show_details = st.checkbox('顯示詳細(xì)信息')
if show_details:
st.write('這里是更多詳細(xì)信息,只有當(dāng)你勾選了復(fù)選框才會(huì)顯示。')
# 單選按鈕組 (st.radio)
gender = st.radio(
"你的性別是?",
('男', '女', '其他')
)
st.write(f"你選擇的性別是:{gender}")
# 文件上傳器 (st.file_uploader)
uploaded_file = st.file_uploader("上傳一個(gè)文件")
if uploaded_file is not None:
st.write("文件已成功上傳!文件名為:", uploaded_file.name)
# 你可以在這里讀取文件內(nèi)容,例如:
# import pandas as pd
# df = pd.read_csv(uploaded_file)
# st.dataframe(df)
保存文件后,刷新你的 Streamlit 應(yīng)用頁面,你會(huì)看到這些新添加的交互組件。嘗試與它們互動(dòng),觀察頁面內(nèi)容的動(dòng)態(tài)變化!
第四步:展示數(shù)據(jù)與圖表

Streamlit 在數(shù)據(jù)展示和可視化方面表現(xiàn)出色,與主流的 Python 數(shù)據(jù)科學(xué)庫(如 Pandas、Matplotlib、Plotly)無縫集成。
讓我們繼續(xù)修改 my_first_app.py,添加數(shù)據(jù)和圖表展示功能:
# my_first_app.py (再次更新版)
import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
st.title('數(shù)據(jù)與圖表展示')
# --- 展示數(shù)據(jù) ---
st.subheader('展示 DataFrame')
st.write('Streamlit 可以輕松地展示 Pandas DataFrame。')
# 創(chuàng)建一個(gè)示例 DataFrame
data = {
'城市': ['北京', '上海', '廣州', '深圳', '杭州'],
'人口': [2154, 2428, 1530, 1344, 1036], # 單位:萬人
'GDP': [35371, 38701, 25019, 27670, 16106] # 單位:億元
}
df = pd.DataFrame(data)
st.dataframe(df) # 展示交互式 DataFrame
# st.table(df) # 如果你想要一個(gè)靜態(tài)表格,可以使用 st.table
# --- 繪制圖表 ---
st.subheader('繪制折線圖')
st.write('Streamlit 內(nèi)置了簡單的圖表繪制功能,也支持 Matplotlib、Plotly 等。')
# 生成一些隨機(jī)數(shù)據(jù)用于繪圖
chart_data = pd.DataFrame(
np.random.randn(20, 3),
columns=['a', 'b', 'c']
)
st.line_chart(chart_data) # 使用 Streamlit 內(nèi)置的折線圖
st.subheader('使用 Matplotlib 繪制圖表')
# 創(chuàng)建一個(gè) Matplotlib 圖表
fig, ax = plt.subplots()
ax.scatter(df['人口'], df['GDP'])
ax.set_xlabel('人口 (萬人)')
ax.set_ylabel('GDP (億元)')
ax.set_title('城市人口與GDP散點(diǎn)圖')
st.pyplot(fig) # 將 Matplotlib 圖表顯示在 Streamlit 中
# 你也可以使用 st.bar_chart, st.area_chart 等 Streamlit 內(nèi)置圖表
# 或者集成 Plotly, Altair, Bokeh 等高級可視化庫
保存并刷新應(yīng)用?,F(xiàn)在你的 Streamlit 頁面不僅有交互組件,還能漂亮地展示表格數(shù)據(jù)和各種圖表了。
第五步:優(yōu)化布局與側(cè)邊欄

當(dāng)你的應(yīng)用內(nèi)容增多時(shí),合理的布局變得尤為重要。Streamlit 提供了側(cè)邊欄(Sidebar)和列(Columns)功能,幫助你更好地組織內(nèi)容。
# my_first_app.py (最終版)
import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
st.title('Streamlit 應(yīng)用布局示例')
# --- 側(cè)邊欄 (st.sidebar) ---
st.sidebar.header('側(cè)邊欄控制面板')
# 將交互組件放入側(cè)邊欄
sidebar_name = st.sidebar.text_input('側(cè)邊欄:請輸入你的名字:', '訪客')
st.sidebar.write(f'你好,{sidebar_name}!')
sidebar_age = st.sidebar.slider('側(cè)邊欄:選擇年齡:', 0, 100, 30)
st.sidebar.write(f'你選擇的年齡是:{sidebar_age} 歲。')
# --- 主區(qū)域內(nèi)容 ---
st.header('主內(nèi)容區(qū)域')
st.write(f'從側(cè)邊欄獲取的名字是:**{sidebar_name}**')
st.write(f'從側(cè)邊欄獲取的年齡是:**{sidebar_age}**')
# --- 列布局 (st.columns) ---
st.subheader('使用列布局')
# 創(chuàng)建兩列,比例為 1:2
col1, col2 = st.columns([1, 2])
with col1:
st.write('### 第一列')
st.write('這是第一列的內(nèi)容,通常用于放置較小的組件或描述性文本。')
st.button('點(diǎn)擊這里 (第一列)')
with col2:
st.write('### 第二列')
st.write('這是第二列的內(nèi)容,可以放置圖表或更復(fù)雜的數(shù)據(jù)展示。')
# 在第二列中展示一個(gè) DataFrame
data_col2 = pd.DataFrame({
'項(xiàng)目': ['A', 'B', 'C', 'D'],
'值': np.random.randint(1, 100, 4)
})
st.dataframe(data_col2)
st.write('---') # 分隔線
# --- 展開器 (st.expander) ---
st.subheader('使用展開器')
with st.expander("點(diǎn)擊查看更多信息"):
st.write("這里是隱藏起來的詳細(xì)內(nèi)容,點(diǎn)擊上方標(biāo)題即可展開或收起。")
st.success("你發(fā)現(xiàn)了一個(gè)秘密!")
# --- 狀態(tài)顯示 (st.info, st.success, st.warning, st.error) ---
st.subheader('信息提示')
st.info('這是一個(gè)普通的信息提示。')
st.success('操作成功!')
st.warning('請注意,這里有一個(gè)警告!')
st.error('發(fā)生了一個(gè)錯(cuò)誤!')
st.write('---')
# --- 進(jìn)度條 (st.progress) ---
st.subheader('進(jìn)度條示例')
progress_text = "操作進(jìn)行中,請稍候..."
my_bar = st.progress(0, text=progress_text)
for percent_complete in range(100):
import time
time.sleep(0.02) # 模擬耗時(shí)操作
my_bar.progress(percent_complete + 1, text=progress_text)
st.success("任務(wù)完成!")
保存并刷新應(yīng)用。你會(huì)看到頁面左側(cè)多了一個(gè)側(cè)邊欄,并且主內(nèi)容區(qū)域被分成了兩列,內(nèi)容組織更加清晰。展開器和各種提示信息也讓應(yīng)用更加友好。
第六步:運(yùn)行與分享
你已經(jīng)學(xué)會(huì)了如何構(gòu)建一個(gè) Streamlit 應(yīng)用,現(xiàn)在是時(shí)候了解如何運(yùn)行它以及如何分享給他人了。
本地運(yùn)行:
在終端中,進(jìn)入你的 .py 文件所在的目錄。
運(yùn)行命令:streamlit run your_app_name.py (例如:streamlit run my_first_app.py)
Streamlit 會(huì)在本地啟動(dòng)一個(gè) Web 服務(wù)器,并在你的默認(rèn)瀏覽器中打開應(yīng)用。你會(huì)在終端看到類似這樣的輸出:
You can now view your Streamlit app in your browser.
Local URL: http://localhost:8501
Network URL: http://192.168.1.100:8501
Local URL (本地地址): 只有你當(dāng)前設(shè)備可以訪問。
Network URL (網(wǎng)絡(luò)地址): 在同一局域網(wǎng)內(nèi)的其他設(shè)備(如手機(jī)、其他電腦)可以通過這個(gè)地址訪問你的應(yīng)用。
分享你的應(yīng)用:
- Streamlit Cloud (推薦): Streamlit 官方提供了 Streamlit Cloud 服務(wù),讓你可以免費(fèi)將你的 Streamlit 應(yīng)用部署到云端,并生成一個(gè)公開可訪問的 URL。你只需要將你的應(yīng)用代碼上傳到 GitHub 倉庫,然后通過 Streamlit Cloud 平臺(tái)進(jìn)行部署即可。這是分享應(yīng)用最簡單、最推薦的方式。
- 其他部署方式: 對于更高級的用戶,Streamlit 應(yīng)用也可以部署到 Docker 容器、Heroku、AWS、GCP 等云平臺(tái)。但這超出了本篇初學(xué)者指南的范圍。
常見問題與排錯(cuò)
1. 應(yīng)用不更新
Streamlit 默認(rèn)會(huì)監(jiān)聽你的 .py 文件變化并自動(dòng)刷新。如果遇到不更新的情況:
- 確保文件已保存。
- 檢查終端是否有錯(cuò)誤信息。 有時(shí)代碼錯(cuò)誤會(huì)導(dǎo)致應(yīng)用無法正常刷新。
- 手動(dòng)刷新瀏覽器。 (Ctrl+R / Cmd+R)
- 清除緩存: 在 Streamlit 應(yīng)用頁面,點(diǎn)擊右上角的
?菜單 ->Clear cache。 - 重啟 Streamlit 服務(wù)器: 在終端中按
Ctrl+C停止應(yīng)用,然后重新運(yùn)行streamlit run your_app.py。
2. 依賴包未安裝
如果你的應(yīng)用使用了 Pandas、Matplotlib 等庫,但運(yùn)行報(bào)錯(cuò) ModuleNotFoundError,說明這些庫沒有安裝。
- 激活你的虛擬環(huán)境。
- 使用 pip 安裝缺失的包: 例如
pip install pandas matplotlib。 - 推薦使用
requirements.txt: 在項(xiàng)目根目錄創(chuàng)建一個(gè)requirements.txt文件,列出所有依賴包及其版本(例如pandas==1.5.3)。然后通過pip install -r requirements.txt一次性安裝所有依賴。
3. 端口被占用
如果 Streamlit 提示端口 8501 被占用,它通常會(huì)自動(dòng)嘗試使用下一個(gè)可用的端口(如 8502)。你也可以在運(yùn)行命令時(shí)手動(dòng)指定端口:
streamlit run your_app.py --server.port 8888
4.streamlit hello運(yùn)行失敗
- 檢查 Streamlit 是否正確安裝: 運(yùn)行
pip show streamlit,如果未安裝會(huì)有提示。 - 檢查 Python 環(huán)境: 確保你正在使用的 Python 環(huán)境是安裝了 Streamlit 的環(huán)境(特別是當(dāng)你使用了虛擬環(huán)境時(shí))。
總結(jié)
Streamlit 的出現(xiàn),無疑是 Python 數(shù)據(jù)科學(xué)領(lǐng)域的一大福音。它讓數(shù)據(jù)科學(xué)家、分析師和機(jī)器學(xué)習(xí)工程師能夠:
- 告別前端: 專注于 Python 代碼,無需學(xué)習(xí) HTML、CSS、JavaScript。
- 快速迭代: 實(shí)時(shí)刷新機(jī)制讓你在開發(fā)過程中即時(shí)看到改動(dòng)效果。
- 交互性強(qiáng): 豐富的組件庫讓你的應(yīng)用充滿活力。
- 部署簡單: Streamlit Cloud 提供一鍵部署,輕松分享你的成果。
Streamlit 不僅僅是一個(gè)工具,它更是一種理念——讓數(shù)據(jù)和模型的力量更容易被發(fā)現(xiàn)、被理解、被分享?,F(xiàn)在,就請你開始動(dòng)手實(shí)踐,用 Streamlit 創(chuàng)造出屬于你自己的精彩 Web 應(yīng)用吧!祝你編碼愉快!
到此這篇關(guān)于Python Streamlit快速構(gòu)建交互式可視化 Web 應(yīng)用的完整指南的文章就介紹到這了,更多相關(guān)Python Streamlit交互式Web應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
pandas報(bào)錯(cuò)AttributeError: DataFrame object has&
這篇文章主要介紹了pandas報(bào)錯(cuò)AttributeError: DataFrame object has no attribute ix問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Python基于進(jìn)程池實(shí)現(xiàn)多進(jìn)程過程解析
這篇文章主要介紹了Python基于進(jìn)程池實(shí)現(xiàn)多進(jìn)程過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
Python中xlsx文件轉(zhuǎn)置操作詳解(行轉(zhuǎn)列和列轉(zhuǎn)行)
很多時(shí)候我們處理的Excel表格并不是我們想要的樣子,需要將表格的形式進(jìn)行相應(yīng)轉(zhuǎn)換后進(jìn)行數(shù)據(jù)分析操作,下面這篇文章主要給大家介紹了關(guān)于Python中xlsx文件轉(zhuǎn)置操作(行轉(zhuǎn)列和列轉(zhuǎn)行)的相關(guān)資料,需要的朋友可以參考下2022-07-07
Python+Appium自動(dòng)化操作微信的教程分享
Appium?是一個(gè)開源的自動(dòng)化測試工具,支持?Android、iOS?平臺(tái)上的原生應(yīng)用,支持?Java、Python、PHP?等多種語言。本文主要介紹了Python+Appium自動(dòng)化操作微信的教程,希望對大家有所幫助2023-01-01
Python實(shí)現(xiàn)自動(dòng)打開電腦應(yīng)用的示例代碼
這篇文章主要介紹了Python實(shí)現(xiàn)自動(dòng)打開電腦應(yīng)用的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04

