Python 前端框架/工具合集

前言

Python 本身并不是為前端開發而設計的語言,但確實有一些 Python 框架可以“變相”地用于前端開發,比如生成 HTML、控制前端頁面邏輯,甚至可以直接運行在瀏覽器中。

目標

本文將對常見的使用python實現的前端框架,先做一個大概的學習總結,后續會有一系列的關于具體框架的詳細介紹,各位看官可以先點擊關注收藏。
重點看本篇最后的詳細介紹部分,你會有驚喜的發現。

前端框架/工具列表介紹

在這里插入圖片描述

為了方便學習,這里整理了的常見 Python 前端框架/工具,包括它們的名稱、類型、應用范圍、默認端口、啟動方式、啟動命令等信息,具體列表如下,看看是否有你想要了解的,或者我沒有整理的,也方便留言。

名稱類型應用范圍端口/運行環境啟動方式/命令特點/備注
StreamlitWeb UI 框架數據展示、儀表板、快速原型默認 8501streamlit run app.py極簡前端,可快速構建數據應用
GradioWeb UI 框架AI Demo、模型接口、前端交互默認 7860gradio.Interface(...).launch()簡潔美觀,適合部署 AI 接口
DashWeb UI 框架數據可視化、Plotly 圖表展示默認 8050app.run_server()基于 Flask + React,強可視化支持
Flask + Jinja2模板引擎 + 后端框架網頁生成、服務端渲染 SSR默認 5000flask run or python app.py使用 Jinja2 模板生成 HTML
Django + Templates模板引擎 + 后端框架全棧網站開發、內容管理默認 8000python manage.py runserver集成完整功能,適合中大型項目
Anvil云端全棧框架可視化 Web App、拖拽式 UI 構建云端/瀏覽器無本地端口,云端部署拖拽式開發、支持 Python 全棧
PyWebIO純 Python Web UI教學、小工具、交互式問答默認 8080pywebio.start_server()無需 HTML/CSS,類似命令行交互的 Web UI
NiceGUIWeb UI 框架簡潔現代 UI,快速構建 Web 應用默認 8080from nicegui import ui類似 Streamlit,但組件更多樣
Panel數據分析/科學可視化可嵌入 Jupyter 或獨立網頁應用默認 5006panel serve app.py支持交互式小部件,適合科研可視化
PyScriptWebAssembly 工具在瀏覽器中直接運行 Python 前端邏輯瀏覽器放入 HTML <py-script> 標簽可直接在 HTML 中嵌入 Python
BrythonJS 替代工具用 Python 編寫瀏覽器端 JS 腳本瀏覽器嵌入 <script type="text/python">替代 JS 的嘗試,適合簡單交互
Flask + HTMX/Tailwind現代 SSR 風格組合服務端生成+前端增強交互默認 5000flask run利用 HTMX 做無刷新交互,保持前后端一致
Toga (BeeWare)桌面 GUI,也支持 Web跨平臺 GUI 應用(Web/桌面/移動)WebViewpython app.py多平臺運行,Web 使用時基于 WebView 或 HTML5

簡要分類

簡單分為六大類別,如下:

類別對應框架適合人群 / 應用場景
Web App 快速開發Streamlit, Gradio, NiceGUI, DashAI Demo、數據看板、內部工具
服務端渲染網站Django, Flask + Jinja2, HTMX組合內容管理系統、博客、門戶網站
教學/交互工具PyWebIO, Panel編程教學、小工具開發
純前端運行(瀏覽器中運行 Python)PyScript, Brython簡易交互、教學演示、JS 替代嘗試
云端可視化平臺Anvil小白拖拽開發、SaaS Demo、表單應用
多端 GUI 支持Toga (BeeWare)想用 Python 寫跨平臺 GUI 的開發者

詳細介紹

后續會有一系列的篇幅來分別對這些框架做下詳細的介紹

系列編號標題
第01篇Python開源庫 Streamlit 詳細介紹
第02篇Gradio 入門實戰:幾行代碼部署你的 AI 模型界面
第03篇Dash 快速上手指南:用 Python 做炫酷圖表網站
第04篇NiceGUI 入門實戰:簡約風 Python 網頁新體驗
第05篇Panel入門實戰:快速構建交互式 Web 應用和大模型介紹
第06篇Django 零基礎起步:開發你的網站第一步
第07篇待定。。。。。計劃6/27/28日出

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/pingmian/86220.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/86220.shtml
英文地址,請注明出處:http://en.pswp.cn/pingmian/86220.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Swagger 在 Spring Boot 中的詳細使用指南

Swagger 是一個強大的 API 文檔生成工具&#xff0c;在 Spring Boot 項目中主要通過 springdoc-openapi 庫實現。下面我將詳細講解 Swagger 的配置、注解使用和高級功能。 一、基礎配置 1. 添加依賴 在 pom.xml 中添加&#xff1a; xml 復制 下載 運行 <dependency&…

群暉如何開啟及使用ssh:小白用戶上手指南-家庭云計算專家

最近很多用戶希望提供群暉下onlyoffice的安裝服務,但是很多都是萌新小白,不知道怎么啟用ssh和使用ssh客戶端.這里提供簡單的方法,統一答復: 重要的事情說3遍:一定不要自己發揮,全部按說明的來;一定要在內網環境用內網ip訪問;不要用域名和端口號,謝謝各位萌新了!!! 一、ssh啟用…

Ubuntu查看與切換顯示管理器(已測試ubuntu20,ubuntu24)

一級標題 顯示管理器是用戶使用圖形化的登錄界面。 當用戶成功輸入用戶名和密碼后&#xff0c;即可開始使用圖形化界面會話。gdm3和 lightdm 都是顯示管理器。 它們提供了圖形化登錄并處理用戶身份驗證。 查看正在使用的顯示管理器&#xff1a; cat /etc/X11/default-displa…

ROS 2 中 Astra Pro 相機與 YOLOv5 檢測功能編譯啟動全記錄

先記錄大概主要流程&#xff0c;后期有時間了再完善細節以及附上截圖 一、編譯 Astra Pro 相機功能包 1. 清理并編譯相機包 cd ~/Astra_ws rm -rf build/astra_camera install/astra_camera # 清理舊編譯 colcon build --packages-select astra_camera --parallel-workers …

當實體類名和數據庫表列名不一致時不能封裝數據的解決辦法

1. <resultMap> 是什么&#xff1f; 作用&#xff1a;<resultMap> 用來定義數據庫表字段和Java實體類屬性之間的對應關系。 為什么需要&#xff1f; 數據庫字段通常用下劃線命名&#xff08;如 brand_name&#xff09;&#xff0c;而Java類屬性用駝峰命名&#…

window系統上labelImg的安裝與使用

一、window上安裝Anaconda 下載&#xff1a;https://repo.anaconda.com/archive/選擇版本&#xff0c;此次選擇的是Anaconda3-2025.06-0-Windows-x86_64.exe雙擊安裝在 Windows 搜索欄中輸入 Anaconda Prompt 并打開。 二、安裝pyton3.8 wondow環境 在 Windows 搜索欄中輸入…

SSE 流與普通 HTTP 響應的區別

1. 連接特性 特性普通 HTTP 響應SSE 流連接持續時間一次性&#xff0c;請求-響應后立即關閉持久連接&#xff0c;保持打開狀態通信方向單向 (客戶端→服務器→客戶端)單向 (服務器→客戶端)數據格式完整響應體流式文本數據 (text/event-stream) 2. 數據傳輸方式 普通 HTTP 響…

Proteus仿真51單片機控制L298N PWM電機調速

51單片機概述 51單片機是指Intel公司開發的MCS-51系列單片機及其兼容產品&#xff0c;是應用最廣泛的8位單片機系列之一。其名稱來源于該系列的第一款芯片8051。 主要特點&#xff1a; 8位CPU&#xff1a;處理數據寬度為8位 哈佛結構&#xff1a;程序存儲器和數據存儲器分開…

批量將exb文件轉為pdf的實用工具

最近在工作中遇到了一個棘手的問題&#xff1a;需要將大量CAXA電子圖板(.exb)格式的圖紙文件轉換為PDF格式以便于共享和查閱。手動一個個打開轉換不僅效率低下&#xff0c;而且容易出錯。于是&#xff0c;我決定開發一個批量轉換工具來解決這個問題。 使用效果 在實際使用中&…

從C++編程入手設計模式——命令模式

從C編程入手設計模式——命令模式 ? 命令模式是一個用指令封裝請求的優雅方法。換而言之&#xff0c;對于一個復雜的系統&#xff0c;當我們發現&#xff0c;使用一系列的指令&#xff08;Command&#xff09;來操作對象的時候&#xff0c;這個設計模式就會顯得非常的實用。我…

【基礎篇-消息隊列】——如何通過網絡傳輸結構化的數據( 序列化與反序列化)

目錄 一、引入前提二、選擇哪種序列化實現2.1、選擇哪種序列化實現需要權衡的幾個因素2.2、如何選擇哪種序列化實現三、實現高性能的序列化和反序列化四、小結本文來源:極客時間vip課程筆記 一、引入前提 在 TCP 的連接上,它傳輸數據的基本形式就是二進制流,也就是一段一段的…

LINUX 622 SAMBA

SAMBA案例 user01通過wondows或linux在/samba/share 中創建、刪除文件 環境配置 samba安裝 [rootsamba caozx26]# yum install samba -y 已加載插件&#xff1a;fastestmirror, langpacks Loading mirror speeds from cached hostfile 正在解決依賴關系 --> 正在檢查事務…

Linux Sonic Agent 端部署(詳細版)(騰訊云)

&#xff08;因為服務器是Linux的&#xff0c;只是安裝了&#xff0c;并沒有驗證&#xff09; 1、編輯docker-compose.yml文件 在Services下添加Agent sonic-agent:image: "sonicorg/sonic-agent-linux:v2.7.2"environment:- SONIC_SERVER_HOST${SONIC_SERVER_HOST…

SpringCloud學習筆記 - 2、關于Cloud各種組件的停更/升級/替換

文章目錄 前言SpringCloud是什么&#xff1f;SpringCloud 在 2018 年&#xff0c;技術體系SpringCloud 在 2020 年&#xff0c;“移除”了技術體系SpringCloud 在 2024 年&#xff0c;移除了技術體系SpringCloud 2024年&#xff0c;技術體系服務注冊與發現 模塊1、Eureka2、Con…

全面掌握 Nginx的功能和使用方法

從 C10K 到現代云原生 第一章 稀缺性哲學與 C10K 挑戰 Nginx 的誕生并非偶然&#xff0c;它是在特定歷史背景下&#xff0c;對一個嚴峻工程危機的直接而革命性的回應。要真正理解 Nginx 的設計精髓&#xff0c;我們必須回到 20 世紀末&#xff0c;探究那個催生了它的時代性難題…

[Linux] Vim編輯器 Linux輸入輸出重定向

Vim編輯器 Vim模式 command模式&#xff1a;該模式下鍵盤中的字母有特殊含義。如&#xff1a;G是跳轉到最后一行&#xff1b;gg是跳轉到第一行。 edit模式&#xff1a;在command模式下按i進入該模式。在該模式可以輸入內容。在該模式下按esc返回command模式。 extended com…

用Rust寫平衡三進制乘法器

1、平衡三進制乘法表 前面寫了平衡三進制的加法器&#xff0c;這個乘法器是在這基礎上的&#xff0c;沒看過的可以回去看看&#xff0c;說到乘法器還是要參考前蘇聯的資料的&#xff0c;平衡三進制的乘法也是很方便的&#xff0c;在平衡三進制基礎中有詳細講過&#xff0c;下圖…

解決Vue2官網Webpack源碼泄露漏洞

一&#xff1a;漏洞產生 Webpack是一個JavaScript應用程序的靜態資源打包器。大部分Vue等應用項目會使用Webpack進行打包&#xff0c;如果沒有正確配置&#xff0c;就會導致項目源碼泄露&#xff0c;可能泄露的各種信息如API、加密算法、管理員郵箱、內部功能等等。 F12查看源…

新中國風通用讀書頌詞分享PPT模版

新國風PPT模版&#xff0c;古風影視劇PPT模版&#xff0c;天青色中國風讀書頌詞分享會PPT模版&#xff0c;國風通用PPT模版&#xff0c;茶味PPT模版&#xff0c;風雪夜歸人PPT模版&#xff0c;小別離PPT模版&#xff0c;西江月茶詞PPT模版 新中國風通用讀書頌詞分享PPT模版&…

Rust自動化測試的框架

Rust實現Web自動化測試的框架 以下是10個使用Rust實現Web自動化測試的框架示例,涵蓋不同場景和工具鏈: 使用thirtyfour(基于Selenium) use thirtyfour::prelude::*;async fn example_selenium() -> WebDriverResult<()> {let caps = DesiredCapabilities::chro…