一、效果展示截圖

二、應用場景介紹

1. 多用戶實時協作

• 應用場景：多個用戶可以同時訪問同一個產品數據表，進行實時的查看、添加和刪除操作。
• 特點：
  • 實時更新：通過 WebSocket 實現前端與后端的實時通信，確保每個用戶的操作都能立即反映到所有在線用戶的界面上。
  • 并發處理：使用 FastAPI 和 SQLAlchemy 異步 ORM，支持高并發請求，確保在多用戶同時操作時系統的穩定性和響應速度。

2. 產品管理

• 應用場景：企業或團隊可以使用此應用來管理產品信息，包括產品名稱、SN號、規格型號、數量和描述等。
• 特點：
  • 數據持久化：產品數據存儲在 PostgreSQL 數據庫中，確保數據的安全性和可靠性。
  • 數據展示：使用 Flet 構建的前端界面，以表格形式展示產品數據，支持排序、篩選等功能。
  • 操作便捷：提供增加和刪除行的功能，方便用戶快速修改產品信息。

3. 數據可視化

• 應用場景：通過圖表和表格的形式，直觀展示產品數據，幫助用戶更好地理解和分析數據。
• 特點：
  • 動態更新：前端界面會根據后端返回的數據動態更新，確保用戶看到的是最新的數據。
  • 交互性強：用戶可以通過點擊按鈕進行增加和刪除操作，界面會實時反饋操作結果。

三、特色說明

1. 實時通信

• WebSocket：使用 WebSocket 實現前后端的實時通信，確保用戶操作的即時反饋。
• 異步通知：當有新的產品被添加時，后端會異步通知所有連接的客戶端，客戶端會自動更新數據表。

2. 高性能

• 異步框架：使用 FastAPI 和 SQLAlchemy 的異步 ORM，支持高并發請求，提高系統性能。
• 數據庫優化：使用 PostgreSQL 數據庫，支持高效的查詢和事務處理，確保數據的一致性和完整性。

3. 用戶友好的界面

• Flet：使用 Flet 框架構建前端界面，提供簡潔、美觀的用戶界面。
• 動態表格：表格支持動態加載數據，用戶可以實時查看和操作數據。
• 操作按鈕：提供增加和刪除行的按鈕，方便用戶快速修改數據。

4. 日志記錄

• 日志配置：使用 Python 的 logging 模塊配置日志記錄，記錄應用程序的啟動、數據庫初始化、WebSocket 連接等重要事件。
• 錯誤處理：在日志中記錄錯誤信息，便于調試和維護。

5. 安全性

• 數據驗證：使用 Pydantic 模型進行數據驗證，確保傳入的數據符合預期格式。
• 權限控制：雖然當前示例未實現權限控制，但在實際應用中可以加入用戶認證和授權機制，確保數據安全。

四、總結

這個應用模板提供了一個完整的解決方案，適用于需要多用戶實時協作的產品管理場景。通過 FastAPI 和 Flet 的結合，實現了高性能、實時更新和用戶友好的特性，適合企業或團隊使用。

五、源碼下載地址

六、使用方法

項目概述

這個項目是一個使用 FastAPI 和 Flet 構建的多人訪問 Web 數據表的前后端自定義框架。前端使用 Flet 構建了一個數據表格界面，后端使用 FastAPI 提供 RESTful API 和 WebSocket 服務。

目錄結構

my_project/
├── main.py
├── product_table_ui.py
└── requirements.txt

主要文件說明

1. main.py: 后端 FastAPI 應用程序，提供 RESTful API 和 WebSocket 服務。
2. product_table_ui.py: 前端 Flet 應用程序，構建數據表格界面并連接后端服務。
3. requirements.txt: 記錄項目依賴項的文件。

運行步驟

1. 創建并激活虛擬環境

推薦使用虛擬環境來管理項目依賴項。以下是創建和激活虛擬環境的步驟：

# 創建虛擬環境
python -m venv venv# 激活虛擬環境
source venv/bin/activate  # Linux/MacOS
.\venv\Scripts\activate  # Windows

2. 安裝項目依賴

確保你已經激活了虛擬環境，然后安裝項目所需的依賴項：

pip install fastapi
pip install pydantic
pip install sqlalchemy
pip install asyncpg
pip install uvicorn
pip install flet
pip install websockets
pip install requests

或者，如果你已經有了 requirements.txt 文件，可以直接安裝所有依賴項：

pip install -r requirements.txt

3. 初始化數據庫

確保你已經配置好了 PostgreSQL 數據庫，并且數據庫 URL 是正確的。運行以下命令來初始化數據庫：

python main.py

首次運行時，FastAPI 應用會自動初始化數據庫表。

4. 啟動 FastAPI 后端服務

在終端中運行以下命令啟動 FastAPI 服務：

uvicorn main:app --reload

這將啟動一個開發服務器，默認監聽 127.0.0.1:8000。

5. 啟動 Flet 前端應用

在另一個終端窗口中，運行以下命令啟動 Flet 前端應用：

python product_table_ui.py

這將啟動 Flet 應用，并打開一個瀏覽器窗口顯示數據表格界面。

功能說明

1. 添加產品

• 前端: 用戶可以通過點擊“增加一行”按鈕來添加新的產品行。
• 后端: 當用戶提交新產品的數據時，前端會發送一個 POST 請求到 /add_product/ 接口，后端會將數據保存到數據庫，并通過 WebSocket 通知所有連接的客戶端更新數據表格。

2. 獲取產品列表

• 前端: 初始加載時，前端會從 /get_products/ 接口獲取產品列表并顯示在數據表格中。
• 后端: 提供一個 GET 接口 /get_products/，返回當前數據庫中的所有產品數據。

3. WebSocket 實時更新

• 前端: 前端通過 WebSocket 連接到后端，實時接收新增產品的通知，并更新數據表格。
• 后端: 當有新產品添加時，后端會通過 WebSocket 發送通知給所有連接的客戶端。

注意事項

1. 數據庫配置: 確保 DATABASE_URL 配置正確，指向你的 PostgreSQL 數據庫。
2. 依賴項: 確保所有依賴項都已正確安裝。
3. 虛擬環境: 始終在虛擬環境中運行項目，以避免依賴項沖突。

通過以上步驟，你可以成功運行并使用這個多人訪問 Web 數據表的前后端自定義框架。