
教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载导读本文是 Datawhale easy-vibe 项目制学习中 Stage 2 的综合实战任务基于一份真实的 PRD从零构建一个支持学生与管理员双角色的在线考试与管理系统。你将用 Express 完成登录鉴权、角色权限、题库与考试管理、交卷自动判分、成绩统计的完整业务链路最终交付一个可演示、可部署的完整业务系统原型。读完本文你将掌握PRD 分析 → 多角色页面搭建 → Express 后端 API → 业务闭环集成 → 部署演示的完整项目方法论这套模式可直接迁移到教育、SaaS、后台管理等各类真实业务场景。项目定位与整体架构这是一个多角色权限系统的典型实战案例。真实世界中的应用极少只有单一角色——几乎都存在普通用户与运营/管理员的划分二者看到不同的页面、拥有不同的操作权限。本项目把这一模式浓缩为一个完整可运行的考试业务系统。系统由三个子系统构成子系统职责官网Public Website平台介绍、登录入口学生端Student Portal考试列表、参加考试、交卷、查看成绩管理后台Admin Dashboard题库管理、考试管理、交卷记录、成绩统计后端使用 Express需要支持登录鉴权、角色权限、考试与题库管理、交卷与自动判分流程、成绩与统计管理。项目的需求文档PRD随作业一同提供是整个开发工作的唯一事实依据——所有页面设计、角色定义、考试流程与数据模型都从 PRD 中推导而不是凭空发挥。前置知识开始本项目前建议先完成以下章节的学习前端页面设计与组件库UI 设计、现代组件库后端 API 设计与开发LLM 辅助编写 API 代码数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 与 GitHub 工作流、Web 应用部署学习目标完成本项目后你将能够读懂真实 PRD并从中提取开发任务清单设计多角色系统的权限控制与页面路由使用 Express 构建完整后端 API实现考试 → 交卷 → 自动判分业务链路完成端到端集成交付可演示的业务系统原型Part 1需求分析1.1 阅读 PRD打开 PRD 文档随作业发布回答以下关键问题系统有多少种角色每种角色能做什么页面清单是否完整学生端和管理后台各有哪些页面支持哪些题型每种题型的判分逻辑是什么完整的考试流程是什么发布 → 开始 → 作答 → 交卷 → 判分 → 查看结果::: warning 如果上述问题没有明确答案不要开始写代码。需求不清晰是返工最常见的原因。 :::这一步骤的价值在于PRD 是唯一的需求真源。后续所有前端页面清单、后端 API 设计、数据表结构都要能回溯到 PRD 中的某一条描述。从 LLM 辅助编写 API 代码 章节的经验来看AI 生成代码的质量上限取决于你对需求的表达清晰度——需求模糊时模型产出的代码同样模糊。1.2 确认系统架构基于 PRD 梳理整体架构从架构图可以看出三条主线学生端围绕考试与作答展开管理后台围绕题库与交卷记录展开二者共用同一套鉴权与数据库。这种一个后端、多个前端入口的形态正是真实业务系统的常见结构。Part 2项目脚手架2.1 用 AI 生成前端页面参考以下 Prompt可直接复制给 AI 助手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注意 Prompt 中的几个关键设计点路由前缀即角色边界学生端统一挂在/student/*下管理后台统一挂在/admin/*下为后续后端 API 的权限校验奠定一一对应的基础先 mock 后联调第一版用假数据驱动交互不接真实 API避免前端开发被后端进度阻塞明确样式方向学生端简洁专注管理后台侧边栏 顶栏从脚手架阶段就拉开两个角色的视觉差异。2.2 打磨学生考试页考试页是学生端的核心页面值得重点打磨Continue 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这一版 Prompt 明确了考试页的四个核心交互要素倒计时、已答题数、答题卡、交卷确认弹窗。同时特别强调两个容易被忽略的细节——空状态empty states与加载状态loading states这是判断页面是否能上线的重要标尺。答题卡要能一眼看出哪些题已答、哪些题未答这也是后面自动判分统计的 UI 前提。2.3 打磨管理后台管理后台第一版聚焦三个核心模块考试管理创建考试、设置考试时长、管理发布状态题库管理添加题目、编辑题目、按题型筛选交卷记录查看学生交卷、得分、时间戳三个模块对应管理员的日常高频操作也正好覆盖了后端题库 CRUD 考试发布 成绩查询的全部数据面。2.4 验证页面结构逐项检查学生端和管理后台入口分离登录、考试列表、考试页、成绩页完整管理后台题库、考试管理、交卷记录页面可访问学生端与后台页面风格明显区分卡住了怎么办前端脚手架阶段遇到困难可回看这些章节从数据库到 Supabase后端 API 设计与开发现代组件库Part 3后端开发3.1 登录与权限控制Treat 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 的写法值得借鉴——它把权限控制的验收标准写进了需求里学生只能访问/student/*管理员只能访问/admin/*未登录跳转/login而不是只笼统说实现登录。结合 LLM 辅助编写 API 代码 章节推荐的工程结构一个可维护的 Express 后端应当分层组织而不是把所有逻辑堆进一个server.jsexam-api/ ├── .env # 敏感环境变量API 密钥、数据库连接串 ├── server.js # 项目入口启动服务、注册全局中间件 ├── package.json # 依赖管理 ├── src/ │ ├── routes/ # 路由层定义 URL 与 HTTP 方法 │ ├── controllers/ # 控制器层处理请求参数、调用服务、返回响应 │ ├── services/ # 服务层数据库访问与核心业务逻辑 │ └── middlewares/ # 中间件鉴权、全局错误处理 └── docs/ # API 文档各层职责的关键点中间件middleware是权限控制的落点登录校验、角色校验都应做成中间件挂在受保护路由之前一个requireAuth 一个requireRole(admin)即可完成 API 级权限隔离环境变量不硬编码JWT 密钥、数据库连接串等一律放.env通过process.env读取这是部署到 Zeabur、Railway、Render 等平台的前提前后端分离 统一 JSON 响应结构控制器层统一返回{ code, data, message }之类的固定结构前端与测试工具如 Postman都能稳定解析。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注意路由命名规律资源名词复数 HTTP 方法语义GET 查、POST 建、PATCH 改并且/api/admin/*与/api/student/*的划分与前端路由一一对应方便前端直接调用。参考 PromptHelp 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这个 Prompt 覆盖了后端全部业务面且明确要求分层与可测试性。实际开发时可以让 AI 为每个 API 生成对应的测试说明curl 命令或 Postman 集合再用 Postman 集合与 Jest 单测 的方法为判分这类核心逻辑补上自动化测试。3.3 评分逻辑评分逻辑是考试系统的核心业务规则必须明确定义每种题型的处理方式单选题Multiple Choice用户答案与正确答案一致即得分判断题True/False同样可自动判分简答题Short Answer第一版只保存答案得分置为null状态标记为reviewed false待人工批阅这一规则映射到数据结构上可以这样理解交卷记录submission中每条答案要么立即得到客观分要么进入待批阅队列等待管理员人工打分——这对应管理后台交卷记录页面的核心筛选维度。::: tip Bonus 加分项 如果想加入 AI 能力可以让管理员输入题目主题 难度由模型生成候选题目人工审核通过后再加入题库。但这属于加分项不是必选要求。 :::Part 4集成与上线4.1 端到端测试至少验证以下两条主链路学生登录 → 查看考试列表 → 开始考试 → 交卷 → 查看成绩管理员登录 → 创建考试 → 添加题目 → 发布 → 查看交卷记录端到端测试的意义在于打通页面 → API → 数据库的完整回路而不仅是验证单点功能。建议按角色分别走一遍完整流程重点确认数据是否真正落库、客观题分数是否自动计算、权限边界在真实调用中是否生效。4.2 部署前端部署到 Vercel / ZeaburExpress API部署到 Zeabur / Railway / Render数据库使用 Supabase Postgres 或托管 PostgreSQL部署前检查清单环境变量齐全前端与后端 API 地址正确生产环境登录状态正常管理员账号确实能进入后台README 包含安装、部署与测试说明部署阶段最常见的坑都在环境差异上本地能跑不代表生产能跑。.env中的数据库连接串、API 地址若写死或遗漏往往要等到部署后才发现。参见 Web 应用部署 了解具体平台的配置方式。交付物完成项目后提交以下内容可访问的线上演示链接源码仓库链接含 READMEPRD 文档核心页面截图首页、学生考试列表、考试页、管理后台60 秒演示视频覆盖学生考试流程与管理员管理流程README 至少应包含项目概述、核心页面说明、技术栈、本地启动步骤、环境变量清单。评分标准维度基础要求进阶要求页面完整度学生端与后台主要页面可访问页面风格统一具备基础移动端适配业务闭环学生可登录、考试、交卷、查成绩管理员可完整创建并发布考试数据正确性答案保存到数据库客观题自动判分简答题支持人工批阅或 AI 辅助权限控制学生与管理员访问边界清晰服务端 API 同样具备角色校验工程交付项目可运行可部署README 清晰含演示视频与测试说明对照评分标准可以发现基础要求对应本作业的全部核心链路进阶要求则是拉开差距的加分项——尤其是服务端 API 的角色校验和简答题的 AI 辅助批阅正好对应本课程 Stage 3 的 AI 进阶能力。提交前最终检查首页、登录、学生端、管理后台页面完整学生可正常开始考试并交卷管理员可创建考试并查看交卷记录客观题分数自动计算并保存到数据库学生与管理员权限边界已验证项目已部署或具备完整的本地启动说明参考章节UI 设计现代组件库从数据库到 SupabaseLLM 辅助编写 API 代码Git 与 GitHub 工作流Web 应用部署赞分享教程文档【免费下载链接】easy-vibe从 0 到 1 学会 vibe coding项目制学习项目地址https://gitcode.com/datawhalechina/easy-vibe点击查看免费下载相关推荐Easy-Vibe 实战项目用 Express 从零构建多角色在线考试与管理系统Easy Vibe 实战项目用 Express 从零构建多角色在线考试与管理系统 导读 本篇是 Easy Vibe 课程 Stage 2 的综合实战大作业教程文档人工智能Vibe CodingDatawhale Easy-Vibe 实战用 Express 从 0 到 1 实现多角色在线考试与管理系统Datawhale Easy Vibe 实战用 Express 从 0 到 1 实现多角色在线考试与管理系统 本文是 Datawhale easy vibe教程文档用 Express 从零构建在线考试与管理系统多角色权限、自动判分与全栈实战指南用 Express 从零构建在线考试与管理系统多角色权限、自动判分与全栈实战指南 导读 本文是 Easy Vibevibe coding 101 课程St教程文档人工智能Vibe Coding上一篇PostGraphile V5 数据过滤完全指南condition 参数、智能标签与 addPgTableCondition 高级筛选创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考