尧图网站建设 
Easy Vibe Vibe Coding 实战用 Express 构建多角色权限控制的在线考试与管理系统【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文基于 easy-vibe 课程 Stage-2 的综合实战作业 在线考试与管理系统开发实践 编写。该作业要求你从一份真实的 PRD 出发用 Next.js 前端 Express 后端完整实现一个包含学生端、管理后台与题库的在线考试系统。读完后你将掌握多角色系统的页面路由与权限隔离设计、Exam/Question/Submission 三条核心业务链路的 Express API 落地方式以及自动判分与人工复核混合评分逻辑的工程实现最终交付一个可演示的端到端系统原型。项目概览为什么选择考试系统作为 Express 实战这个实战项目的核心要求是从真实 PRD 出发从零实现一个在线考试与管理系统。它的特殊之处在于系统包含学生与管理员两种角色两者拥有不同的页面集和权限边界你需要使用 Express 作为后端框架实现一条完整的考试业务链路出卷 → 开考 → 答题 → 提交 → 自动判分 → 成绩查看。整个产品由三个子系统组成子系统职责官网前台平台介绍、登录入口学生门户考试列表、答题、提交、成绩查看管理后台题库、考试管理、提交记录、成绩统计作业配套的完整产品需求文档PRD存放在 PRD在线考试与管理系统定义了技术选型、角色权限、页面架构、数据模型与接口草案是整个开发过程的需求源头。前置知识作业明确列出的依赖项前端设计与组件库UI 设计、现代组件库后端 API 设计与开发编写 API 代码数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 与 GitHub、Web 应用部署学习目标阅读一份真实 PRD并从中提取开发任务清单为多角色系统设计方案权限控制与页面路由使用 Express 实现一套完整的后端 API实现考试、提交、自动判分这条完整业务链路完成端到端测试交付一个可演示的系统原型第一部分需求分析——先读懂 PRD再动代码1.1 精读 PRD 的四个关键问题作业强调如果以下问题没有清晰答案就不要开始写代码。系统包含哪些角色每个角色能做什么页面清单是否完整支持哪些题型每种题型的评分逻辑是什么考试的完整流程是什么结合 PRD 可以直接得到答案角色与权限表角色权限学生查看考试、开始答题、提交试卷、查看成绩管理员管理题库、考试、提交记录和成绩统计MVP 范围第一版必须包含登录、学生考试列表、学生答题页、提交结果与历史成绩、管理后台、题库管理、考试管理、提交记录与成绩查看第一版不做随机组卷、复杂防作弊、多校区多租户、监考视频——明确划定边界正是 PRD 的价值所在。1.2 确认系统架构作业给出的 PRD 到子系统的拆解架构如下PRD 进一步给出了前端三入口与 API 层的整体视图技术选型约定为前端Next.js或 React Vite后端Node.js Express数据库PostgreSQL鉴权JWT RBAC。1.3 核心数据模型PRD 中的建议数据表是整个系统的骨架也是设计 Express 路由和判分逻辑时的参照物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, -- 选项以 JSON 存储兼顾选择题与简答题 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 )关键状态流决定后端状态机设计考试草稿 → 已发布 → 已关闭提交进行中 → 已提交 → 已评阅 / 待复核学生成绩未出分 → 已出分PRD 还给出了关键用户链路即端到端测试时应当完整走通的两条路径第二部分创建项目脚手架——用 AI 生成前端页面2.1 用 PRD 生成前端骨架作业给出的提示词要素如下技术栈锁定为 Next.js App Router TypeScript Tailwind CSS shadcn/ui9 个页面请基于当前 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注意路由设计已经体现了多角色隔离思路学生页面统一挂在/student/*前缀下管理页面统一挂在/admin/*前缀下——这与后端的 API 前缀隔离策略见第三部分是一一对应的也是 PRD站点入口约定官网前台 / 学生端 / 管理后台三套入口在单应用内的落地方式。2.2 精化答题页答题页是学生门户的核心页面作业给出的精化提示词要素请精化学生答题页。 - 顶部考试标题、倒计时、已答题目数 - 中部题目与选项 - 支持单选、判断、简答题 - 答案导航卡放在左侧或顶部 - 提交前弹出确认对话框PRD 对学生侧页面的设计定位可帮助把握页面细节学生端强调流程感管理端强调配置感成绩页强调结果感后台首页强调概览感。2.3 检查页面结构作业给出的自检清单学生和管理员入口已分离登录、考试列表、答题页、成绩页完整管理端题库、考试管理、提交记录可访问学生页面与管理页面样式有明显区分第三部分后端开发——Express 登录、权限与业务 API3.1 登录与权限控制作业给出的后端提示词要素后端Express请帮我实现在线考试系统的登录与权限控制。 后端Express。 目标 1. 学生和管理员可以登录 2. 登录后返回用户角色 3. 学生只能调用 /student/* API 4. 管理员只能调用 /admin/* API 5. 未登录用户重定向到 /login这里的权限设计要点值得展开角色来自数据库profiles.role登录接口返回角色后前端据此决定跳转/student/exams还是/admin路径前缀即权限边界/api/student/*与/api/admin/*两组路由各自挂载不同的中间件从源码组织角度看Express 中最自然的落地方式是用express.Router拆出两个路由模块分别挂requireRole(student)与requireRole(admin)鉴权中间件评分标准中明确把服务端角色校验列为进阶要求——即前端路由守卫只是体验优化真正的边界必须落在 Express 中间件层否则学生直接请求/api/admin/exams就能绕过限制。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/submissions对照 PRD 中的接口草案完整接口面还应包括方法路径说明POST/api/auth/login登录GET/api/exams/:id获取考试详情GET/api/admin/exams获取考试列表GET/api/admin/scores获取成绩统计后端模块按auth、exams、questions、submissions、scores、admin六个模块组织PRD 建议的开发顺序是① 登录与角色鉴权 → ② 学生端考试列表和答题页 → ③ 提交与成绩链路 → ④ 管理后台题库和考试管理 → ⑤ 提交记录和统计页。这个顺序保证了每一步都有可运行的垂直切片而非先写完全部后端再连前端。3.3 判分逻辑三种题型三种处理作业对评分逻辑的明确规定单选题用户答案与标准答案一致即得分判断题可自动判分简答题只保存答案分数留空状态reviewed false等待人工复核从questions表结构看这一逻辑的实现路径很清晰options jsonbcorrect_answer两个字段只对选择类题型有值POST /api/submissions/:id/submit处理器内部按questions.type分支——选择类直接比对correct_answer累加total_score简答题则跳过评分并置reviewed false。这也正是 PRD 非功能要求中自动判分与人工复核状态要清晰的落点。::: tip 加分项 可以引入 AI 让管理员批量生成候选题目写入questions表但这是可选项不是交付要求。 :::第四部分测试与部署4.1 端到端测试作业要求完整走通两条链路学生链路登录 → 考试列表 → 开始考试 → 答题 → 查看成绩管理员链路登录 → 创建考试 → 添加题目 → 发布考试 → 查看提交记录结合 1.3 节的状态流测试时应重点验证未发布草稿的考试不出现在学生考试列表、超时倒计时归零时的提交行为、以及简答题提交后成绩页显示待复核而非空白报错。4.2 部署方案作业给出的三端部署建议前端Vercel / ZeaburExpress APIZeabur / Railway / Render数据库Supabase Postgres 或托管 PostgreSQL具体平台操作可参考课程中的 Web 应用部署 与 从数据库到 Supabase 两节。部署时需特别注意两点Express 与前端分离部署后前端要配置正确的 API Base URL 环境变量Supabase Postgres 连接串应通过 PaaS 平台的环境变量注入而不是硬编码进代码也避免提交进 Git 仓库。交付物与验收标准交付物清单在线 Demo 链接源代码仓库含 READMEPRD 文档核心页面截图60 秒演示视频评分维度维度基础要求进阶要求页面完整性学生和管理员主要页面可访问统一设计、移动端基本可用业务闭环学生可完成考试并查看成绩管理员可完整创建考试数据正确性答案写入数据库、自动判分简答题支持人工或 AI 辅助评阅权限学生/管理员边界清晰服务端角色校验工程化可运行、可部署、README 清晰演示视频与测试说明提交前最后检查首页、登录、学生门户、管理端页面全部完成学生可开始考试并提交答案管理员可创建考试并查看提交记录自动判分功能正确学生与管理员的权限边界已验证项目已部署或提供完整的本地运行说明参考资料本作业依赖的 easy-vibe 课程章节均为仓库内相对路径可直接查阅UI 设计现代组件库从数据库到 Supabase编写 API 代码Git 与 GitHubWeb 应用部署PRD在线考试与管理系统【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Easy Vibe Vibe Coding 实战：用 Express 构建多角色权限控制的在线考试与管理系统
Easy Vibe Vibe Coding 实战用 Express 构建多角色权限控制的在线考试与管理系统【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe本文基于 easy-vibe 课程 Stage-2 的综合实战作业 在线考试与管理系统开发实践 编写。该作业要求你从一份真实的 PRD 出发用 Next.js 前端 Express 后端完整实现一个包含学生端、管理后台与题库的在线考试系统。读完后你将掌握多角色系统的页面路由与权限隔离设计、Exam/Question/Submission 三条核心业务链路的 Express API 落地方式以及自动判分与人工复核混合评分逻辑的工程实现最终交付一个可演示的端到端系统原型。项目概览为什么选择考试系统作为 Express 实战这个实战项目的核心要求是从真实 PRD 出发从零实现一个在线考试与管理系统。它的特殊之处在于系统包含学生与管理员两种角色两者拥有不同的页面集和权限边界你需要使用 Express 作为后端框架实现一条完整的考试业务链路出卷 → 开考 → 答题 → 提交 → 自动判分 → 成绩查看。整个产品由三个子系统组成子系统职责官网前台平台介绍、登录入口学生门户考试列表、答题、提交、成绩查看管理后台题库、考试管理、提交记录、成绩统计作业配套的完整产品需求文档PRD存放在 PRD在线考试与管理系统定义了技术选型、角色权限、页面架构、数据模型与接口草案是整个开发过程的需求源头。前置知识作业明确列出的依赖项前端设计与组件库UI 设计、现代组件库后端 API 设计与开发编写 API 代码数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 与 GitHub、Web 应用部署学习目标阅读一份真实 PRD并从中提取开发任务清单为多角色系统设计方案权限控制与页面路由使用 Express 实现一套完整的后端 API实现考试、提交、自动判分这条完整业务链路完成端到端测试交付一个可演示的系统原型第一部分需求分析——先读懂 PRD再动代码1.1 精读 PRD 的四个关键问题作业强调如果以下问题没有清晰答案就不要开始写代码。系统包含哪些角色每个角色能做什么页面清单是否完整支持哪些题型每种题型的评分逻辑是什么考试的完整流程是什么结合 PRD 可以直接得到答案角色与权限表角色权限学生查看考试、开始答题、提交试卷、查看成绩管理员管理题库、考试、提交记录和成绩统计MVP 范围第一版必须包含登录、学生考试列表、学生答题页、提交结果与历史成绩、管理后台、题库管理、考试管理、提交记录与成绩查看第一版不做随机组卷、复杂防作弊、多校区多租户、监考视频——明确划定边界正是 PRD 的价值所在。1.2 确认系统架构作业给出的 PRD 到子系统的拆解架构如下PRD 进一步给出了前端三入口与 API 层的整体视图技术选型约定为前端Next.js或 React Vite后端Node.js Express数据库PostgreSQL鉴权JWT RBAC。1.3 核心数据模型PRD 中的建议数据表是整个系统的骨架也是设计 Express 路由和判分逻辑时的参照物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, -- 选项以 JSON 存储兼顾选择题与简答题 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 )关键状态流决定后端状态机设计考试草稿 → 已发布 → 已关闭提交进行中 → 已提交 → 已评阅 / 待复核学生成绩未出分 → 已出分PRD 还给出了关键用户链路即端到端测试时应当完整走通的两条路径第二部分创建项目脚手架——用 AI 生成前端页面2.1 用 PRD 生成前端骨架作业给出的提示词要素如下技术栈锁定为 Next.js App Router TypeScript Tailwind CSS shadcn/ui9 个页面请基于当前 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注意路由设计已经体现了多角色隔离思路学生页面统一挂在/student/*前缀下管理页面统一挂在/admin/*前缀下——这与后端的 API 前缀隔离策略见第三部分是一一对应的也是 PRD站点入口约定官网前台 / 学生端 / 管理后台三套入口在单应用内的落地方式。2.2 精化答题页答题页是学生门户的核心页面作业给出的精化提示词要素请精化学生答题页。 - 顶部考试标题、倒计时、已答题目数 - 中部题目与选项 - 支持单选、判断、简答题 - 答案导航卡放在左侧或顶部 - 提交前弹出确认对话框PRD 对学生侧页面的设计定位可帮助把握页面细节学生端强调流程感管理端强调配置感成绩页强调结果感后台首页强调概览感。2.3 检查页面结构作业给出的自检清单学生和管理员入口已分离登录、考试列表、答题页、成绩页完整管理端题库、考试管理、提交记录可访问学生页面与管理页面样式有明显区分第三部分后端开发——Express 登录、权限与业务 API3.1 登录与权限控制作业给出的后端提示词要素后端Express请帮我实现在线考试系统的登录与权限控制。 后端Express。 目标 1. 学生和管理员可以登录 2. 登录后返回用户角色 3. 学生只能调用 /student/* API 4. 管理员只能调用 /admin/* API 5. 未登录用户重定向到 /login这里的权限设计要点值得展开角色来自数据库profiles.role登录接口返回角色后前端据此决定跳转/student/exams还是/admin路径前缀即权限边界/api/student/*与/api/admin/*两组路由各自挂载不同的中间件从源码组织角度看Express 中最自然的落地方式是用express.Router拆出两个路由模块分别挂requireRole(student)与requireRole(admin)鉴权中间件评分标准中明确把服务端角色校验列为进阶要求——即前端路由守卫只是体验优化真正的边界必须落在 Express 中间件层否则学生直接请求/api/admin/exams就能绕过限制。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/submissions对照 PRD 中的接口草案完整接口面还应包括方法路径说明POST/api/auth/login登录GET/api/exams/:id获取考试详情GET/api/admin/exams获取考试列表GET/api/admin/scores获取成绩统计后端模块按auth、exams、questions、submissions、scores、admin六个模块组织PRD 建议的开发顺序是① 登录与角色鉴权 → ② 学生端考试列表和答题页 → ③ 提交与成绩链路 → ④ 管理后台题库和考试管理 → ⑤ 提交记录和统计页。这个顺序保证了每一步都有可运行的垂直切片而非先写完全部后端再连前端。3.3 判分逻辑三种题型三种处理作业对评分逻辑的明确规定单选题用户答案与标准答案一致即得分判断题可自动判分简答题只保存答案分数留空状态reviewed false等待人工复核从questions表结构看这一逻辑的实现路径很清晰options jsonbcorrect_answer两个字段只对选择类题型有值POST /api/submissions/:id/submit处理器内部按questions.type分支——选择类直接比对correct_answer累加total_score简答题则跳过评分并置reviewed false。这也正是 PRD 非功能要求中自动判分与人工复核状态要清晰的落点。::: tip 加分项 可以引入 AI 让管理员批量生成候选题目写入questions表但这是可选项不是交付要求。 :::第四部分测试与部署4.1 端到端测试作业要求完整走通两条链路学生链路登录 → 考试列表 → 开始考试 → 答题 → 查看成绩管理员链路登录 → 创建考试 → 添加题目 → 发布考试 → 查看提交记录结合 1.3 节的状态流测试时应重点验证未发布草稿的考试不出现在学生考试列表、超时倒计时归零时的提交行为、以及简答题提交后成绩页显示待复核而非空白报错。4.2 部署方案作业给出的三端部署建议前端Vercel / ZeaburExpress APIZeabur / Railway / Render数据库Supabase Postgres 或托管 PostgreSQL具体平台操作可参考课程中的 Web 应用部署 与 从数据库到 Supabase 两节。部署时需特别注意两点Express 与前端分离部署后前端要配置正确的 API Base URL 环境变量Supabase Postgres 连接串应通过 PaaS 平台的环境变量注入而不是硬编码进代码也避免提交进 Git 仓库。交付物与验收标准交付物清单在线 Demo 链接源代码仓库含 READMEPRD 文档核心页面截图60 秒演示视频评分维度维度基础要求进阶要求页面完整性学生和管理员主要页面可访问统一设计、移动端基本可用业务闭环学生可完成考试并查看成绩管理员可完整创建考试数据正确性答案写入数据库、自动判分简答题支持人工或 AI 辅助评阅权限学生/管理员边界清晰服务端角色校验工程化可运行、可部署、README 清晰演示视频与测试说明提交前最后检查首页、登录、学生门户、管理端页面全部完成学生可开始考试并提交答案管理员可创建考试并查看提交记录自动判分功能正确学生与管理员的权限边界已验证项目已部署或提供完整的本地运行说明参考资料本作业依赖的 easy-vibe 课程章节均为仓库内相对路径可直接查阅UI 设计现代组件库从数据库到 Supabase编写 API 代码Git 与 GitHubWeb 应用部署PRD在线考试与管理系统【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考