📖 项目文档总结

一、项目简介

本次项目PopQuiz 是一款面向 课堂、培训与会议 的实时互动系统。
以 AI 自动生成测验 为核心功能，能够在演讲/授课过程中快速生成随堂测验，并通过 Web 端实时推送给听众，实现以下目标：

演讲者：可随时上传文件，快速生成与内容相关的问题，并实时获得反馈，调整讲课节奏。
听众：通过手机或网页秒收题目，进行答题和反馈（如“太快/太慢/乏味”）。

系统旨在用 10 秒钟检验听众注意力和理解程度，让课堂和演讲更高效。

亮点：

使用mongoDB和mysql双数据库实现不同种类数据的高效存储
我们采用课堂码机制（类似腾讯会议的房间号），老师创建学生加入的模式实现多对多课堂管理。
使用 Flask-CORS 中间件和 Axios withCredentials 配置解决，前后端跨域问题。
使用 FastAPI 替代 Flask 的部分功能，保证高并发下的响应速度。

二、项目分工及团队贡献分

朱帅：负责后端整体架构与 API 开发。分数：100
聂铭威：负责客户端与服务器的握手实现、问题生成逻辑的编写。分数：95
阿尔斯兰：负责前端页面的开发与优化。分数：90

三、整体技术架构

1. 技术选型

前端：
- Vue.js：响应式框架，用于构建高交互性的前端页面。
- Element-UI：提供了丰富的组件库和可定制主题，提高了 UI 开发效率。
- Axios：封装 HTTP 请求，用于与后端进行交互，支持跨域请求。
后端：
- Flask：作为系统的基础框架，提供轻量级 Web 服务和路由机制。
- FastAPI：用于高性能问题生成模块，实现快速响应的大模型调用。
- **蓝图 **：用于后端模块化设计和数据库接口封装。
数据库：
- MongoDB：用于存储演讲者上传的 PDF/TXT 文档及生成的问题数据（非结构化数据）。
- MySQL：用于存储结构化数据，包括用户信息、教师-学生课堂关联、答题记录和统计数据。
其他技术：
- **跨域支持 **：通过配置 Axios 和后端接口允许跨域请求。
- Web 部署：本地服务器部署 Flask + FastAPI 模块，前端通过 Vue CLI 打包并与后端握手。

2. 系统结构

整体采用 前后端分离架构：

WebApp：
- Vue 前端与 Flask 后端通过 RESTful API 通信。
- FastAPI 部署在后端作为独立服务模块，专门负责 AI 生成问题功能。
数据流：
1. 演讲者上传 PDF/TXT → 后端解析 → 存储到 MongoDB。
2. 后端调用 FastAPI 与大模型接口 → 生成问题与选项 → 写入 MongoDB。
3. 前端 Vue 通过 Axios 拉取数据 → 渲染至 Web 界面。

四、核心功能模块

1. 登录与注册

用户分为教师和学生两类。
用户注册后可登录系统，教师拥有课堂创建权限，学生可加入课堂。

2. 课堂码机制

教师创建课堂时会生成一个 课堂码（类似腾讯会议的房间号）。
学生通过输入课堂码加入课堂，实现一对多、多对多的课程结构。

3. 文件上传与解析

教师上传 TXT/PDF 文件。
后端利用文件解析模块提取文本，并存储至 MongoDB。

4. AI 问题生成

使用 FastAPI 与大模型接口交互，根据文档内容自动生成题目和选项。
问题通过 API 下发到前端。

5. 答题与统计

学生实时答题（选择题：A/B/C/D）。
答题结果通过 API 发送至后端存储。
教师界面支持 实时刷新，并统计答对/答错数量。

五、系统实现细节

1. 前端实现

框架：Vue 3 + Element UI。
特点：
- 高响应式的数据绑定，减少 DOM 操作。
- 使用组件化设计，UI 模块（登录框、题目列表、统计面板）分离。
- Axios 封装：统一管理请求头、错误处理和跨域配置。
- 动态路由：根据用户角色（教师/学生）渲染不同界面。

2. 后端实现

Flask：
- 负责用户注册、登录、课堂管理、答题记录 API。
- 使用 Blueprint 模块化组织代码，提高可维护性。
FastAPI：
- 提供高性能的 AI 题目生成 API。
- 与 Flask 通过网络请求链接。
数据库交互：
- MongoDB：存储非结构化文档内容和生成的题目。
- MySQL：存储用户、课堂、答题记录（结构化表）。

3. 部署与运行

启动 Flask 主服务与 FastAPI 问题生成服务。
Vue 前端通过 yarn serve 或 npm run serve 运行。
通过 Axios 请求后端 API，实现前后端联动。

六、项目难点与解决方案

多数据库协作：
使用 Flask 封装 MySQL 和 MongoDB 的数据接口，通过统一路由查询、写入数据。
前后端跨域问题：
使用 Flask-CORS 中间件和 Axios withCredentials 配置解决。
课堂码的设计：
类似会议号的机制，通过生成唯一随机码实现课堂连接逻辑。
AI 问题生成性能优化：
使用 FastAPI 替代 Flask 的部分功能，保证高并发下的响应速度。

七、未来优化方向

增加 WebSocket 功能，实现更高效的实时通信。
优化 AI 题目生成逻辑，让问题更加智能化。
增加 教师端导出统计数据 功能（CSV/Excel）。
完善自动化测试和 CI/CD 流程。

八、使用的主要技术栈

模块	技术/工具
前端	Vue.js, Element UI, Axios
后端	Flask, FastAPI, Python
数据库	MongoDB, MySQL
部署	本地服务器 / WebApp
交互	RESTful API, 跨域配置 (CORS)
其他	AI 问题生成接口, Blueprint 模块化设计

九、项目展示内容

终端展示：
运行 Flask 和 FastAPI 服务，显示服务器启动及握手日志。
前端演示：
- 登录/注册流程。
- 教师创建课堂创建课堂码并上传文件。
- 学生通过课堂码加入课堂并答题。
- 教师界面查看统计结果。

详细演示内容请移步演示视频issue查看，感谢阅读

小组毕业实习的感受与收获：

过去三周中，我们小组紧密合作完成了 PopQuiz 实时互动测验系统。
这是一个基于 Flask + FastAPI + Vue 的前后端分离项目，结合 AI 问题生成 和 课堂互动功能，能够让演讲者或老师上传文件，系统自动生成题目，并实时推送给听众，用于课堂或会议中的即时反馈和互动。

在项目开发中，我们的收获：

1.技术成长：
我们在这个项目中使用了双数据库架构（MongoDB + MySQL），并学习了 AI 大模型接口调用、前后端联调、跨域配置和组件化设计等实践技巧。
2.团队协作：
三位成员分工明确：前端、后端、AI 接口和数据库都由不同人负责，但最终通过 GitHub 源码管理和每日例会 实现了功能的整合。