教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载本篇技术指南以 easy-vibe 第二阶段综合实战项目「在线考试与管理系统」为背景讲解如何从一个真实的 PRD产品需求文档出发从零构建一套包含官网前台、学生端和管理后台的多角色业务系统。读完本文你将掌握PRD 需求拆解与开发任务清单提取、多角色权限控制与页面路由设计、基于 Express 的完整后端 API 实现登录鉴权、题库与考试管理、交卷与自动评分、以及端到端测试、部署与演示交付的完整链路。项目总览一套典型的多角色业务系统本项目的特别之处在于它不是一个单纯的答题页面而是一整套包含多个角色、多个子系统、完整业务闭环的产品。根据任务书定义系统包含三个子系统子系统职责官网前台平台展示、登录入口学生端Portail étudiant考试列表、答题、交卷、成绩查询管理后台Back-office admin题库管理、考试管理、提交记录、成绩统计后端采用Express需要支持认证、角色与权限管理、考试与题库管理、交卷与自动评分流程、成绩与统计管理。任务书明确给出技术选型建议前端Next.js或React Vite、后端Node.js Express、数据库PostgreSQL、鉴权采用JWT Role-based Access Control基于角色的访问控制。该综合实战项目在整个 easy-vibe 第二阶段课程中的定位可以参阅 第二阶段总览它是「项目 2」紧接「项目 1SaaS 文案生成站」之后重点练习角色与权限、题库建模、考试流程、提交与批改统计等贴近真实业务系统的能力。完整的 PRD 文档位于仓库 docs/zh-cn/stage-2/assignments/exam-management-express/PRD.md它是整个项目的需求唯一来源后续所有页面、接口和数据模型的设计都应以它为准。项目推进遵循四个阶段需求分析 → 骨架构建 → 后端开发 → 测试上线。下面按此顺序展开。Partie 1需求分析——先读 PRD再动手需求分析是整条链路的起点任务书明确警告如果下面这些问题没有清晰答案就不要开始写代码——需求理解错误是返工最常见的原因。1.1 带着问题读 PRD打开 PRD 后需要回答四个核心问题系统包含哪些角色他们各自能做什么页面清单是否完整学生端和管理后台分别有哪些页面支持哪些题型每种题型的评分逻辑是什么一次考试的完整流程是什么发布 → 开始 → 答题 → 交卷 → 评分 → 查看结果结合仓库内 PRD 原文这些问题的标准答案如下角色与权限PRD 第 4 节角色权限学生查看考试、开始答题、提交试卷、查看成绩管理员管理题库、考试、提交记录和成绩统计页面架构PRD 定义为「3 套入口10 个大页面」——官网前台 1 个大页面、学生端 4 个大页面、管理后台 5 个大页面。具体为官网前台官网首页www:/学生端登录页app:/login、考试列表页app:/student/exams、答题页app:/student/exams/:id、历史成绩页app:/student/history管理后台后台首页admin:/、题库管理admin:/questions、考试管理admin:/exams、提交记录admin:/submissions、成绩统计admin:/scores关键状态流PRD 第 5.1 节考试草稿 → 已发布 → 已关闭提交进行中 → 已提交 → 已评阅 / 待复核学生成绩未出分 → 已出分1.2 确认系统架构从 PRD 提炼出的整体架构如下对应任务书中的架构图PRD 中还给出了系统级总览官网前台、学生端、管理后台三者均通过「应用 API / 管理 API」访问后端后端统一接入JWT / Session Auth鉴权层最终落库到PostgreSQL。这意味着前端三套入口共享同一套后端 API 体系权限差异通过角色在 API 层隔离。1.3 明确 MVP 边界PRD 对 MVP 范围有清晰界定。第一版必须包含登录、学生考试列表、学生答题页、提交结果与历史成绩、管理后台、题库管理、考试管理、提交记录与成绩查看。第一版明确不做随机组卷、复杂防作弊、多校区多租户、监考视频。在后续开发中应克制范围蔓延优先把主链路跑通。Partie 2项目骨架构建——用 AI 快速生成前端2.1 生成前端页面骨架将 PRD 转成任务清单后下一步是让 AI 生成前端骨架。任务书给出的参考 Prompt 如下请基于当前 PRD生成在线考试管理系统的前端骨架。 技术栈要求 - Next.js App Router - TypeScript - Tailwind CSS - shadcn/ui 页面清单 1. 首页 / 2. 登录页 /login 3. 考试列表学生端 /student/exams 4. 答题页学生端 /student/exams/[id] 5. 成绩页学生端 /student/history 6. 管理后台首页 /admin 7. 考试管理 /admin/exams 8. 题库管理 /admin/questions 9. 提交记录 /admin/submissions 要求 - 学生端页面要清晰、聚焦、易用 - 管理端使用「侧边栏 顶栏」布局 - 先用 mock 数据不接真实 API - 保证桌面端和移动端的基本可用性注意 Prompt 中的两个关键约束先用 mock 数据和桌面/移动端基本可用。先用假数据把页面形态定下来是为了让 AI 在不受 API 干扰的情况下先把信息架构和交互做对。2.2 重点打磨答题页答题页是学生端的核心页面需要优先投入。任务书要求该页面包含顶部考试标题、倒计时、已答题数量中部题目与选项支持三种题型单选、判断、简答左侧或顶部答题卡标识每道题是否已答提交前弹出确认框对应参考 Prompt请继续打磨答题页。 这是在线考试答题页需要包含 - 顶部考试标题、倒计时、已答题数 - 中部题目与选项 - 支持三种题型单选、判断、简答 - 左侧或顶部答题卡标识每题是否已作答 - 提交前展示确认弹窗 先用 mock 数据实现交互不接真实 API。 要求 - 界面清爽不要像后台管理页 - 倒计时要可见但不过分压迫 - 预留空状态和加载状态结合 PRD 的非功能要求第 9 节答题页在倒计时和断网提示上要有明确反馈这两点在打磨时也应一并纳入。2.3 完善管理后台管理后台第一版聚焦三个区域考试管理创建考试、设置时长、管理发布状态题库管理新增题目、编辑题目、按题型筛选提交记录查看学生提交、分数、用时PRD 为后台首页定义了核心指标考试总数、学生提交数、待批改数、成绩概览统计页admin:/scores则需要展示考试平均分、通过率、题目错误率等。第一版至少应看到已发布考试数、已参加人数、提交率、平均分/通过率、待复核题目数、题目错误率 Top10。2.4 页面结构检查清单骨架完成后逐项核对学生端和管理后台的入口是否分离登录页、考试列表、答题页、成绩页是否齐全后台的题库管理、考试管理、提交记录页是否可访问学生端与后台的视觉风格是否明显区分PRD 的产品借鉴点值得在此刻回顾借鉴 Canvas 的信息分层学生端和管理端职责清晰、借鉴 Moodle 的题库与考试管理思路题目、考试、提交、成绩是独立模块学生侧强调「流程感」管理端强调「配置感」成绩页强调「结果感」后台首页强调「概览感」。若前端构建受阻可回看 UI 设计、现代组件库 与 AI 接口代码编写 等前置章节。Partie 3后端开发——Express API 的完整实现前端骨架就绪后进入本项目最核心的部分Express 后端。3.1 登录与权限控制任务书给出的参考 Prompt请把我当新手帮我搭建在线考试系统的登录与权限控制。 后端使用 Express。 目标 1. 学生和管理员都能登录 2. 登录后返回用户角色 3. 学生只能访问 /student/* 路由 4. 管理员只能访问 /admin/* 路由 5. 未登录用户访问受保护页面时重定向到 /login 实现要求 - 给出清晰的目录结构 - 说明中间件的职责 - 环境变量不要硬编码 - 实现后说明如何验证权限生效结合仓库内 AI 接口代码编写 教程的分层规范一个可维护的 Express 项目不应把所有代码塞进单个server.js而应采用如下分层结构my-api-project/ ├── .env # 敏感环境变量API Keys、数据库连接串 ├── server.js # 项目入口启动服务、注册全局中间件 ├── package.json ├── src/ │ ├── routes/ # 路由层定义 URL 路径与请求方法 │ ├── controllers/ # 控制器层处理业务请求参数调用 service 并返回响应 │ ├── services/ # 服务层封装数据库交互与核心业务逻辑 │ └── middlewares/ # 中间件鉴权、全局错误捕获 └── docs/ # API 文档存放目录权限控制的实现要点鉴权中间件auth校验请求头中的 JWT解析出用户身份未登录返回 401 或重定向到/login角色中间件requireRole校验req.user.role学生角色放行/student/*管理员角色放行/admin/*角色不匹配返回 403两条中间件串联使用形成「先鉴权、再授权」的调用链JWT 密钥、数据库连接串等一律通过.env注入禁止硬编码任务书明确要求。验证权限是否生效的推荐方式分别以学生账号和管理员账号登录尝试访问对方专属路由观察是否被 403 拦截再以未登录状态访问受保护页面观察是否被重定向到/login。3.2 考试与题库 API 设计任务书推荐的 API 模块如下模块推荐 API考试管理GET /api/exams、POST /api/admin/exams、PATCH /api/admin/exams/:id题库管理GET /api/admin/questions、POST /api/admin/questions开始考试POST /api/submissions/start交卷POST /api/submissions/:id/submit成绩记录GET /api/student/history、GET /api/admin/submissionsPRD 第 8 节的接口草案进一步补充了完整清单POST /api/auth/login登录、GET /api/exams/:id考试详情、GET /api/admin/exams考试列表、GET /api/admin/scores成绩统计。综合两者即可覆盖全部业务场景。对应参考 Prompt请设计并实现在线考试系统的 Express API。 功能范围 - 管理员创建考试 - 管理员管理题库 - 学生查看已发布考试 - 学生开始考试并创建提交 - 学生交卷单选和判断题自动评分 - 简答题先标记为待复核 - 学生查看历史成绩 - 管理员查看全部提交记录 要求 - API 命名清晰 - 返回统一 JSON 结构 - 代码中清晰分离 controller、service、middleware、db 各层 - 说明如何测试每个 API结合 AI 接口代码编写 教程的最佳实践接口设计应遵循RESTful 资源命名路径表示资源名词动作交给 HTTP 方法表达。好设计如GET /api/users、POST /api/users避免POST /api/getUser这类动词式命名。标准化 HTTP 状态码200/201 表示成功/创建成功400 表示参数格式错误或必填缺失401/403 表示未登录/无权限404 表示资源不存在500 表示服务端错误。切忌把错误堆栈直接抛给前端有安全风险。永不信任前端输入前端输入可被伪造关键参数校验必须在后端接口内重新执行。统一响应结构所有接口返回一致的 JSON 封装便于前端统一处理成功与失败分支。配合 AI 生成文档与测试可将 routes 和 controllers 代码交给大模型生成 OpenAPI/Swagger 文档并要求其生成 Postman 可导入的集合与 Jest 单元测试覆盖边界情况如非法参数、权限越权。3.3 数据模型四张核心表PRD 第 6 节给出了建议数据表是后端建模的直接依据profiles ( id uuid primary key, email text, role text, created_at timestamptz ) exams ( id uuid primary key, title text, description text, duration_minutes int, status text, created_at timestamptz ) questions ( id uuid primary key, type text, stem text, options jsonb, correct_answer text, score int, created_at timestamptz ) submissions ( id uuid primary key, exam_id uuid, student_id uuid, status text, total_score numeric, submitted_at timestamptz )其中questions.options使用jsonb类型存储选项数组天然适配多选/判断/简答三种题型的差异化结构submissions通过exam_id、student_id关联考试与考生status记录提交状态流转进行中 → 已提交 → 已评阅/待复核。若采用 Supabase 作为数据库可参考 从数据库到 Supabase 教程用 SQL Editor 直接执行建表语句在 Project Settings 的 Data API 中获取Supabase URL与anon key通过supabase/supabase-js初始化客户端const { createClient } require(supabase/supabase-js); const supabase createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);服务层通过supabase.from(questions).insert([...])等链式调用完成读写并捕获错误抛出统一异常。环境变量建议命名为SUPABASE_URL、SUPABASE_KEY配合 Git 与 GitHub 工作流 中的.env管理规范将密钥排除在版本控制之外。3.4 评分逻辑——系统的核心业务规则评分逻辑是考试系统最核心的业务规则任务书给出明确约定单选题用户答案与标准答案一致即得分判断题同样支持自动评分简答题第一版只记录答案分数为空状态置为reviewed false待复核等待管理员人工批改。这对应 PRD 的状态设计「提交进行中 → 已提交 → 已评阅/待复核」客观题单选/判断在交卷时由后端即时自动判分并写入total_score简答题进入待复核队列由管理后台的提交记录页进行人工复核。进阶可选任务书给出一个 AI 能力加分项——允许管理员在后台输入「主题 难度等级」由大模型先生成一批候选题目经人工确认后再入库。这属于 bonus 而非必选项第一版不必实现。3.5 开发顺序建议PRD 第 10 节给出了后端开发的推荐顺序可有效避免依赖倒置登录与角色鉴权学生端考试列表和答题页提交与成绩链路管理后台题库和考试管理提交记录和统计页Partie 4测试与上线4.1 端到端测试上线前至少验证以下两条主链路学生登录 → 查看考试列表 → 开始考试 → 交卷 → 查看成绩管理员登录 → 创建考试 → 添加题目 → 发布 → 查看提交记录在此基础上对照 PRD 的非功能要求做一轮收尾核查学生端和管理端权限严格隔离交卷后成绩与答题记录稳定落库自动判分与人工复核状态清晰后台统计口径一致答题页倒计时与断网提示反馈明确。4.2 部署任务书给出的部署方案前端部署到 Vercel / ZeaburExpress API 部署到 Zeabur / Railway / Render数据库使用 Supabase Postgres 或托管 PostgreSQL各平台的接入方式可参阅 部署 Web 应用 教程——将 GitHub 仓库连接到 PaaS 平台平台自动拉取代码、识别应用类型、配置运行环境并分配公网地址。部署前检查清单环境变量是否全部配置前端/后端 API 地址是否正确生产环境登录态是否正常管理员账号能否真正进入后台README 是否包含启动、部署与测试说明交付物与验收标准必须提交的交付物可访问的在线演示链接源码仓库链接含 READMEPRD 文档主要页面截图首页、学生考试列表、答题页、管理后台60 秒演示视频覆盖学生答题流程和管理员管理流程README 至少应包含项目介绍、主要页面说明、技术栈、本地启动步骤、环境变量清单。评估标准维度基础要求进阶要求页面完整度学生端和管理后台主要页面可访问页面风格统一移动端使用正常业务闭环学生可登录、答题、交卷、看成绩管理员可端到端创建并发布考试数据准确性提交答案落库客观题自动评分简答题支持人工复核或 AI 辅助权限控制学生与管理员访问分离清晰服务端 API 也有角色校验技术交付项目可运行、可部署README 清晰有演示视频和测试说明提交前最后检查首页、登录页、学生端、管理后台页面全部完成学生能正常开始考试并提交答案管理员能创建考试并查看提交记录客观题分数自动计算并写入数据库学生与管理员权限隔离已验证项目已部署或具备完整的本地运行说明参考资料UI 设计用现代组件库更新你的界面从数据库到 SupabaseAI 辅助接口代码编写Git 与 GitHub 工作流如何部署一个 Web 应用项目 PRD 原文至此从「读 PRD」到「可演示的系统」的完整链路已经打通。多角色系统的核心价值在于只要掌握了「角色划分 权限隔离 业务状态机」这套模型就能举一反三地应对在线教育、SaaS 平台、后台管理等大量真实业务场景。完成本项目后把它部署上线、配上演示视频与 README即可作为你全栈能力的一块重要拼图。赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐Easy-Vibe 实战项目用 Express 从零构建多角色在线考试与管理系统Easy Vibe 实战项目用 Express 从零构建多角色在线考试与管理系统 导读 本篇是 Easy Vibe 课程 Stage 2 的综合实战大作业教程文档人工智能Vibe Coding使用 Express 构建多角色在线考试与管理系统从 PRD 到可演示原型的完整实战指南使用 Express 构建多角色在线考试与管理系统从 PRD 到可演示原型的完整实战指南 导读 本文是 Datawhale easy vibe 项目制学习中教程文档Datawhale Easy-Vibe 实战用 Express 从 0 到 1 实现多角色在线考试与管理系统Datawhale Easy Vibe 实战用 Express 从 0 到 1 实现多角色在线考试与管理系统 本文是 Datawhale easy vibe教程文档上一篇终极指南如何用openpilot开源项目让普通汽车拥有智能驾驶功能下一篇3个理由告诉你为什么Dramatron是编剧的创意倍增器创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考