一、效果展示截图

二、应用场景介绍

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 数据表的前后端自定义框架。