easy-vibe 实战项目基于 Express 与多角色权限的在线考试与管理系统完整开发指南【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe导读本文是 easy-vibe 课程 Stage 2Junior Developer的综合实战作业——Project 2Online Exam and Management System的完整开发指南。该作业要求你基于一份真实 PRD产品需求文档从零构建一个包含公开官网 学生端 管理端三个子系统的在线考试与管理平台前端使用 Next.js App Router TypeScript Tailwind CSS shadcn/ui后端使用 Express 实现登录鉴权、角色权限、题库与考试管理、提交与自动判分、成绩统计的完整业务闭环。读完本文你将掌握多角色权限系统的设计模式、Express 后端的分层架构、客观题自动判分与主观题待批改的业务逻辑以及一套可复制、可演示的全栈业务系统交付流程。作业定位为什么要做多角色权限系统本作业是 Stage 2 的综合实战部分。在 Stage 2 总览 中本作业被列为两大主线项目之一Project 2其课程定位是Project 2 takes you into a more business-system-like scenario: role-based permissions, question banks, exams, submissions, and admin management.它与此前的 Project 1Copywriting SaaS互补Project 1 走的是登录 → AI 生成 → 数据库 → 支付 → 管理后台的 SaaS 流水线而本作业进入更贴近真实业务系统的场景——基于角色的权限、题库、考试、提交与管理。多角色权限系统在真实世界中极其常见教育、SaaS、后台管理系统掌握学生/管理员看到不同页面、执行不同操作这套模式后你可以迁移到各类业务系统开发中。完成本作业后你将形成一份由可运行项目仓库、可访问的演示链接、README 与演示视频构成的完整作品集。前置知识Prerequisites开始本作业前建议你已完成或熟悉以下前置课程均在 easy-vibe 仓库内能力域对应章节仓库路径前端页面设计与组件库UI Design、Modern Component Librariesdocs/en/stage-2/frontend/后端 API 设计与开发Backend API Design and Developmentdocs/en/stage-2/backend/ai-interface-code/数据库基础与 SupabaseDatabase to Supabasedocs/en/stage-2/backend/database-supabase/Git 工作流与部署Git GitHub Workflow、Web App Deploymentdocs/en/stage-2/backend/学习目标完成本项目后你将能够读懂一份真实 PRD并从中提取出可执行的开发任务清单设计多角色系统的权限控制与页面路由学生端与管理端权限边界清晰使用 Express 构建完整的后端 API覆盖登录、题库、考试、提交、判分、统计全流程实现考试 → 提交 → 自动判分的业务流水线包括客观题自动判分与主观题标记待批改完成端到端集成交付一个可演示的业务系统原型。系统概览三个子系统本作业要求构建的在线考试与管理系统包含三个子系统子系统职责公开官网Public Website平台介绍、登录入口学生端Student Portal考试列表、参加考试、提交答卷、查看成绩管理端Admin Dashboard题库管理、考试管理、提交记录、成绩统计后端使用 Express需要支持登录鉴权、角色权限、考试与题库管理、提交流程与自动判分、成绩与统计管理。关于 PRD本作业的必备输入是产品需求文档PRD。注意easy-vibe 仓库中仅包含本作业的index.md即本文所依据的文档PRD 正文需你根据本作业指引自行获取或编写。在动手写代码前务必让 PRD 中的角色、页面、题型、判分逻辑与考试流程都有明确答案——需求不清晰是返工最常见的根源。系统架构图基于 PRD 梳理的整体架构如下Part 1需求分析1.1 阅读 PRD回答关键问题打开 PRD 文档带着以下问题阅读系统有多少种角色每种角色分别能做什么页面清单是否完整学生端和管理端各有哪些页面支持哪些题型每种题型的判分逻辑是什么完整的考试流程是什么发布 → 开始 → 作答 → 提交 → 判分 → 查看结果::: warning 如果上述问题没有明确答案不要开始编码。需求不清晰是返工最常见的原因。 :::1.2 确认系统架构根据 PRD 梳理出整体架构如上图PRD 驱动三个子系统的设计学生端依赖 Auth 鉴权与考试作答模块管理端依赖题库、提交与成绩模块所有数据统一落到数据库。Part 2项目脚手架Scaffold2.1 用 AI 生成前端页面骨架本作业鼓励使用 AI 辅助生成前端脚手架推荐的 Prompt 如下Based on the current PRD, help me generate a frontend scaffold for an online exam and management system. Tech stack: - Next.js App Router - TypeScript - Tailwind CSS - shadcn/ui Page list: 1. Homepage / 2. Login page /login 3. Student exam list /student/exams 4. Student exam taking /student/exams/[id] 5. Student grades /student/history 6. Admin dashboard /admin 7. Exam management /admin/exams 8. Question bank /admin/questions 9. Submission records /admin/submissions Requirements: - Student pages should be clean, focused, and easy to answer questions on - Admin pages should use sidebar top bar layout - Use mock data first, no real API integration - Ensure basic usability on both desktop and mobile要点解析技术栈固定Next.js App Router TypeScript Tailwind CSS shadcn/ui这与此前 Modern Component Libraries 章节的组件库工作流一致页面清单即路由规划9 个页面覆盖公开区/、/login、学生区/student/*与管理区/admin/*三条路由分支这正是后续权限控制的路由基础先用 mock 数据第一版不接真实 API让页面骨架先跑通避免前后端互相阻塞。2.2 细化学生考试页核心页面考试作答页是学生端的核心值得单独花精力细化。推荐 PromptContinue refining the student exam-taking page. This is an exam-taking page for an online exam system, it should include: - Top bar: exam title, countdown timer, number of answered questions - Main area: question stem and options - Support three question types: single choice, true/false, short answer - Answer card on the left or top showing which questions have been answered - Confirmation dialog before submission Use mock data for interactions first, no real API. Requirements: - Clean interface, shouldnt look like a backend table page - Countdown should be prominent but not overly stressful - Include empty states and loading states关键设计点顶部栏考试标题 倒计时 已答数量、答题卡标识已答/未答题目、提交前二次确认弹窗、以及空状态与加载状态。这里强调界面要干净、不能像后台表格页——倒计时要醒目但不过度制造紧张感这是产品体验层面的要求。2.3 细化管理端后台管理端第一版聚焦三个核心区域考试管理创建考试、设置时长、管理发布状态题库管理添加题目、编辑题目、按题型筛选提交记录查看学生提交、分数与时间戳。2.4 核对页面结构逐项检查学生端和管理端入口分离登录、考试列表、考试作答、成绩页面完整管理端的题库、考试管理、提交记录页面可访问学生端与管理端的页面风格有明显区分卡住了怎么办前端脚手架阶段卡住时回看这些章节Database to Supabase、Backend API Design Development、Modern Component Libraries。Part 3后端开发3.1 登录与权限控制推荐 PromptTreat me as a beginner and help me implement login and permission control for the online exam system. Backend: Express. Goals: 1. Both students and admins can log in 2. Login returns the users role 3. Students can only access /student/* APIs 4. Admins can only access /admin/* APIs 5. Unauthenticated users accessing protected pages redirect to /login Requirements: - Suggest a clear directory structure - Explain what the middleware is responsible for - Dont hardcode environment variables - Explain how to verify permissions work after implementation该 Prompt 的核心诉求与 easy-vibe 的 Backend API Design and Development 章节所倡导的 Node.js 工程结构完全一致。该章节给出了一个可维护的 Express 项目骨架正是本作业后端应该采用的分层方式my-api-project/ ├── .env # Sensitive environment variables such as API keys and DB URLs ├── server.js # Project entry point: boot server, register global middleware ├── package.json # Dependency management ├── src/ │ ├── routes/ # Route layer: define URLs and HTTP methods │ ├── controllers/ # Controller layer: process request params, call services, return responses │ ├── services/ # Service layer: database access and core business logic │ └── middlewares/ # Middleware: auth, global error handling └── docs/ # API documentation对照本作业登录返回用户角色role学生只能访问/student/*API管理员只能访问/admin/*API未登录访问受保护页面时跳转/login。中间件middleware承担角色校验职责——你可以实现一个auth中间件验证登录态再叠加一个requireRole(admin)之类的中间件做细粒度权限控制。同时注意不要硬编码环境变量如 JWT 密钥、数据库连接串一律从.env读取这既是安全要求也是后续部署时配置环境变量的前提。实现完成后务必通过真实请求验证权限是否生效例如以学生身份请求管理员 API 应被拒绝。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注意这里的路由语义/api/exams对学生可见查看已发布考试/api/admin/*前缀天然形成管理端权限边界/api/student/history与/api/admin/submissions分别服务学生端与管理端的成绩视图。设计实现 Prompt 参考Help me design and implement Express APIs for the online exam system. Scope: - Admin creates exams - Admin manages question bank - Students view published exams - Students start exam and create submission - Student submissions auto-grade multiple choice and true/false - Short answer questions marked as pending review - Students view their grade history - Admins view all submission records Requirements: - Clear API naming - Unified JSON response structure - Separate code into controller, service, middleware, and db layers - Explain how to test each API要点统一 JSON 响应结构如{ code, data, message }或{ success, data, error }全项目保持一致分层清晰——controller处理请求参数、调用服务、返回响应、service数据库访问与核心业务逻辑、middleware鉴权与错误处理、db数据库访问层。这四层划分与上一节引用的 Express 工程骨架一一对应。3.3 判分逻辑核心业务规则判分逻辑是考试系统的核心业务规则单选题Multiple Choice用户答案与正确答案一致即得分判断题True/False同样可以自动判分简答题Short Answer第一版只保存答案分数为null状态标记为reviewed false待人工批改。这套规则直接决定了数据模型与提交接口的实现客观题单选、判断在提交时即可算出分数并写入数据库主观题简答则进入待批改队列。这与评分标准中客观题自动判分、主观题支持人工批改或 AI 辅助的进阶要求相呼应。::: tip 加分项Bonus 如果你想加入 AI 能力可以让管理员输入主题 难度由模型生成候选题目经人工审核后再加入题库。但这是加分项不是必选项。 :::Part 4集成与上线4.1 端到端测试至少验证以下两个主流程学生流程学生登录 → 查看考试列表 → 开始考试 → 提交 → 查看成绩管理员流程管理员登录 → 创建考试 → 添加题目 → 发布 → 查看提交记录建议覆盖登录状态在前后端的一致性、权限边界的真实拦截、客观题分数自动计算并落库、主观题进入待批改状态。4.2 部署推荐部署方案前端部署到 Vercel / ZeaburExpress API部署到 Zeabur / Railway / Render数据库使用 Supabase Postgres 或托管 PostgreSQL部署前检查清单环境变量完整JWT 密钥、数据库连接串、前端/后端 URL 等前端与后端 API URL 配置正确生产环境的登录状态正常管理员账号能真正访问管理后台README 包含本地启动、部署与测试说明关于 Express 后端的部署方式可参考 Web App Deployment 章节的全栈部署流程数据库建模与连接可参考 Database to Supabase 章节。交付物Deliverables完成项目后提交以下内容可访问的在线演示链接源码仓库链接含 READMEPRD 文档核心页面截图首页、学生考试列表、考试作答页、管理后台60 秒演示视频覆盖学生考试流程与管理端管理流程README 至少应包含项目概述、核心页面说明、技术栈、本地启动步骤、环境变量清单。评分标准Grading Criteria维度基础要求进阶要求页面完整度学生端与管理端主要页面可访问页面风格统一具备基础移动端适配业务闭环学生可登录、考试、提交、查看成绩管理员可完整地创建并发布考试数据正确性提交答案保存到数据库客观题自动判分简答题支持人工批改或 AI 辅助权限控制学生端与管理端访问边界清晰服务端 API 同样具备角色校验工程交付项目可运行、可部署README 清晰提供演示视频与测试说明对照评分标准可以看出两个值得注意的点权限控制有双重要求基础要求是前端页面路由的边界清晰进阶要求是服务端 API 也必须做角色校验——也就是说不能只在前端隐藏按钮后端/api/admin/*必须真正拦截未授权请求判分逻辑决定数据正确性得分提交答案必须真实落库、客观题必须真实计算分数而不是在前端算完再传结果。提交前检查清单最终提交前逐项确认首页、登录、学生端、管理后台页面完整学生可以正常开始考试并提交答案管理员可以创建考试并查看提交记录客观题分数自动计算并保存到数据库学生端与管理端权限边界已验证项目已部署或提供完整的本地运行说明参考资料以下为 easy-vibe 仓库内与本作业直接相关的前置章节UI DesignModern Component LibrariesDatabase to SupabaseBackend API Design and DevelopmentAPI Code with LLM AssistanceGit GitHub WorkflowWeb App DeploymentStage 2 总览与项目对比【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考