尧图网页设计 
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 2 的综合实战大作业指南围绕一份真实 PRD指导你从零构建一个包含学生端与管理后台双角色的在线考试与管理系统。你将以 Express 为核心编写后端 API打通「登录鉴权 → 角色权限 → 题库与考试管理 → 提交流程 → 自动判分 → 成绩统计」的完整业务链路最终交付一个可演示、可部署的企业级业务系统原型。读完本文你将掌握多角色权限系统的建模思路、AI 辅助生成前后端骨架的提示词方法以及 Express 分层架构与判分规则的工程实现要点。项目概览三个子系统与一条业务主线本项目需要构建的产品是一个在线考试与管理系统包含三个子系统子系统职责官网前台平台介绍、登录入口学生端考试列表、答题、提交、成绩查看管理后台题库管理、考试管理、提交记录、成绩统计后端使用Express需要支持登录鉴权、角色权限、考试和题库管理、提交流程与自动判分、成绩和统计管理。这是 Stage 2 的综合实战环节——多角色权限系统在实际工作中非常常见教培、SaaS、后台管理等场景均适用掌握这种模式后你便能应对各类业务系统需求。前置知识开始本项目之前你应当已经掌握前端页面设计与组件库使用UI 设计、现代组件库后端接口设计与开发接口代码编写数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 和 GitHub、部署 Web 应用学习目标完成本实战后你将能够阅读并理解一份真实的 PRD从中提取开发任务清单设计多角色系统的权限控制和页面路由使用 Express 实现完整的后端 API实现考试、提交、自动判分的业务链路完成端到端联调交付一个可演示的业务系统原型整个项目按四个阶段推进需求分析 → 搭建骨架 → 后端开发 → 联调上线下文逐一展开。第一部分需求分析先想清楚再写代码1.1 阅读 PRD回答四个关键问题本项目以一份真实 PRD 为输入需求文档由实践任务提供。打开 PRD 后重点回答以下问题系统包含哪几个角色各自能做什么页面清单是否完整学生端和管理端分别有哪些页面支持哪些题型每种题型的判分逻辑是什么考试的完整流程是什么发布 → 开始 → 作答 → 提交 → 判分 → 查看成绩⚠️注意如果以上问题没有明确答案不要开始写代码。需求理解不清楚是导致返工的最常见原因。1.2 确认系统架构根据 PRD 梳理出系统的整体架构可借助 mermaid 图帮助自己和 AI对齐认知从架构图可以看清职责边界学生端只负责「鉴权 考试与作答」管理后台负责「题库管理 提交记录与成绩统计」二者最终都落库到同一数据库。这份架构梳理也是后续让 AI 生成代码时的核心上下文。第二部分搭建项目骨架AI 生成前端页面2.1 用一条结构化提示词生成前端骨架前端建议采用Next.js App Router TypeScript Tailwind CSS shadcn/ui技术栈。将页面清单与风格要求完整地喂给 AI是获得高质量骨架的前提请基于当前 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 数据不接真实接口 - 注意桌面端和移动端的基本可用性这份提示词之所以有效是因为它明确了技术栈、完整页面路由和两条关键体验约束学生端「清晰专注」、管理端「侧边栏 顶部栏」并且要求先用 mock 数据隔离前后端依赖避免骨架阶段就被接口联调拖住。2.2 完善学生答题页学生端核心页面答题页是整个学生端体验的主战场建议继续用一条聚焦的提示词让 AI 迭代完善请继续完善学生答题页。 这是一个在线考试系统的答题页面需要包含 - 顶部显示考试标题、倒计时、已答题数量 - 中间显示题干和选项 - 支持单选、判断、简答三种题型 - 左侧或顶部有答题卡显示每道题是否已作答 - 点击提交前弹出确认框 先用 mock 数据实现交互不接真实接口。 要求 - 界面简洁不要像后台表格页 - 倒计时要醒目但不要制造过强压迫感 - 有空状态和 loading 状态设计上要注意答题页不应长成「后台表格页」的样子——顶部信息栏标题/倒计时/进度与作答区、答题卡分区要清晰倒计时「醒目但不施压」并补齐空状态与 loading 状态这些细节直接决定演示时的专业度。2.3 完善管理员后台管理后台第一版聚焦三个核心区域考试管理创建考试、设置时长、发布状态题库管理新增题目、编辑题目、按题型筛选提交记录查看学生提交、分数、时间这三个区域分别对应了后台最典型的「资源管理」形态列表 表单 状态流转实现时可以沿用 shadcn/ui 的 Table、Dialog、Form 等组件快速搭建。2.4 验证页面结构逐项检查骨架是否完整学生端和管理端入口是否分开登录页、考试列表、答题页、成绩页是否完整管理端题库、考试管理、提交记录页是否可访问学生端和管理端的页面风格有明显区分遇到阻碍如果你在前端搭建阶段卡住可以回顾这些章节从数据库到 Supabase、应用后端接口设计与开发、使用现代组件库更新你的界面。第三部分后端开发Express 业务链路3.1 登录与权限控制权限控制是本项目最重要的后端模式。可以参考这条提示词让 AI 以「0 基础也能听懂」的方式交付实现请把我当成 0 基础帮我完成在线考试系统的登录与权限控制。 后端使用 Express。 目标 1. 学生和管理员都可以登录 2. 登录后返回用户角色 3. 学生只能访问 /student/* 相关接口 4. 管理员只能访问 /admin/* 相关接口 5. 未登录用户访问受保护页面时跳转 /login 实现要求 - 给出清晰的目录结构建议 - 明确说明中间件负责什么 - 涉及环境变量的地方不要硬编码 - 完成后说明如何验证权限是否生效实现时建议采用仓库配套课程中推荐的分层工程结构见 应用后端接口设计与开发my-api-project/ ├── .env # 敏感环境变量如 API Keys、数据库连接串 ├── server.js # 项目入口服务器启动、全局中间件注册 ├── package.json # 依赖管理文件 ├── src/ │ ├── routes/ # 路由层定义 URL 路径与请求方法 │ ├── controllers/ # 控制器层处理业务请求参数调用服务并返回响应 │ ├── services/ # 服务层封装数据库交互和核心业务逻辑 │ └── middlewares/ # 中间件登录鉴权、错误全局捕获 └── docs/ # API 文档存放目录核心要点中间件职责单一authMiddleware负责解析登录态JWT/sessionroleMiddleware负责校验角色student/admin两者可组合使用——这样requireAuth与requireRole(admin)就能复用到任意受保护路由上。角色边界即路由前缀边界/student/*只允许学生角色/admin/*只允许管理员角色未登录访问受保护页面统一重定向到/login。环境变量不硬编码JWT 密钥、数据库连接串等一律从.env读取保证本地与生产环境可迁移。权限验证方法完成后分别用学生账号访问/admin/*接口应被拒绝、未登录状态访问受保护接口应被重定向/返回 401即可验证权限是否生效。3.2 考试与题库管理接口建议按模块实现以下接口模块推荐接口考试管理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参考提示词请帮我为在线考试系统设计并实现 Express API。 功能范围 - 管理员创建考试 - 管理员维护题库 - 学生查看已发布考试 - 学生开始考试并创建 submission - 学生提交答案后自动判分单选题和判断题 - 简答题先标记为待复核 - 学生查看自己的历史成绩 - 管理员查看所有提交记录 要求 - 接口命名清晰 - 返回统一 JSON 结构 - 代码中区分 controller、service、middleware、db 层 - 说明每个接口如何测试结合配套课程 应用后端接口设计与开发 的工程准则还应注意RESTful 命名URL 表达「资源」名词动作交给 HTTP MethodGET /api/exams查列表、POST /api/admin/exams创建、PATCH /api/admin/exams/:id更新避免getExam、createExam这类动词式路径。规范状态码200/201 表示成功/创建成功400 表示参数错误401/403 表示未登录/无权操作404 表示资源不存在500 表示服务端错误——不要把报错调用栈直接暴露给前端。统一返回结构所有接口返回一致的 JSON 包装如{ code, data, message }前端解析逻辑才可复用。永远不信任用户输入核心参数校验必须在后端再做一次前端的输入可能是伪造的。3.3 判分逻辑核心业务规则判分逻辑是考试系统的灵魂规则如下单选题用户答案与标准答案一致则得分判断题同样可以自动判分简答题第一版先只保存答案分数为空状态为reviewed false标记为待复核数据库落库时建议为submission一次作答与submission_answers逐题答案设计两张表客观题答案用于提交时自动判分并写回分数简答题答案保留原文等待后续人工复核或 AI 辅助批改。这样「自动判分 人工复核」两条路径在数据模型上一开始就分得清。加分项如果你想增加 AI 能力可以让管理员在后台输入「主题 难度」由模型先生成一批候选题再人工审核后入库。这属于加分项不是必须的。第四部分联调与上线4.1 端到端测试至少验证以下两个完整场景学生登录 → 查看考试列表 → 开始答题 → 提交 → 查看成绩管理员登录 → 创建考试 → 添加题目 → 发布 → 查看提交记录这两条链路分别覆盖「学生消费侧」和「管理员供给侧」跑通即代表核心业务闭环成立。4.2 部署前端部署到 Vercel / ZeaburExpress API 部署到 Zeabur / Railway / Render数据库用 Supabase Postgres 或托管 PostgreSQL部署前检查环境变量是否齐全前后端 API 地址是否正确登录态在生产环境是否正常管理员账号是否能真实访问后台README 是否包含启动、部署、测试说明交付物清单完成本项目后你需要提交以下内容可访问的线上演示链接源码仓库链接含 READMEPRD 文档核心页面截图首页、学生考试列表、答题页、管理后台60 秒演示视频覆盖学生答题流程和管理员管理流程README 至少包含项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。评分标准自我对照维度基本要求进阶要求页面完整度学生端和管理端主要页面都可访问页面风格统一移动端基本可用业务闭环学生可登录、参加考试、提交并查看成绩管理员可完整创建并发布考试数据正确性提交答案后能写入数据库客观题能自动判分简答题支持人工复核或 AI 辅助权限控制学生与管理员访问边界清晰服务端接口也有角色校验工程交付项目可运行、可部署、README 清晰有演示视频和测试说明提交前检查首页、登录页、学生端、管理端页面均已完成学生可以正常开始考试并提交答案管理员可以创建考试并查看提交记录客观题分数能够自动计算并写入数据库学生与管理员权限边界已验证项目已部署或具备完整本地运行说明参考资料UI 设计使用现代组件库更新你的界面从数据库到 Supabase大模型辅助编写接口代码与接口文档Git 和 GitHub 工作流如何部署 Web 应用本作业在 Stage 2 大作业序列中的位置可参考 Stage 2 索引大作业 2在线考试与管理系统本文档对应的原始实战指南位于 docs/es-es/stage-2/assignments/exam-management-express/index.md需求文档 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 实战项目：用 Express 从零构建多角色在线考试与管理系统
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 2 的综合实战大作业指南围绕一份真实 PRD指导你从零构建一个包含学生端与管理后台双角色的在线考试与管理系统。你将以 Express 为核心编写后端 API打通「登录鉴权 → 角色权限 → 题库与考试管理 → 提交流程 → 自动判分 → 成绩统计」的完整业务链路最终交付一个可演示、可部署的企业级业务系统原型。读完本文你将掌握多角色权限系统的建模思路、AI 辅助生成前后端骨架的提示词方法以及 Express 分层架构与判分规则的工程实现要点。项目概览三个子系统与一条业务主线本项目需要构建的产品是一个在线考试与管理系统包含三个子系统子系统职责官网前台平台介绍、登录入口学生端考试列表、答题、提交、成绩查看管理后台题库管理、考试管理、提交记录、成绩统计后端使用Express需要支持登录鉴权、角色权限、考试和题库管理、提交流程与自动判分、成绩和统计管理。这是 Stage 2 的综合实战环节——多角色权限系统在实际工作中非常常见教培、SaaS、后台管理等场景均适用掌握这种模式后你便能应对各类业务系统需求。前置知识开始本项目之前你应当已经掌握前端页面设计与组件库使用UI 设计、现代组件库后端接口设计与开发接口代码编写数据库基础与 Supabase从数据库到 SupabaseGit 工作流与部署Git 和 GitHub、部署 Web 应用学习目标完成本实战后你将能够阅读并理解一份真实的 PRD从中提取开发任务清单设计多角色系统的权限控制和页面路由使用 Express 实现完整的后端 API实现考试、提交、自动判分的业务链路完成端到端联调交付一个可演示的业务系统原型整个项目按四个阶段推进需求分析 → 搭建骨架 → 后端开发 → 联调上线下文逐一展开。第一部分需求分析先想清楚再写代码1.1 阅读 PRD回答四个关键问题本项目以一份真实 PRD 为输入需求文档由实践任务提供。打开 PRD 后重点回答以下问题系统包含哪几个角色各自能做什么页面清单是否完整学生端和管理端分别有哪些页面支持哪些题型每种题型的判分逻辑是什么考试的完整流程是什么发布 → 开始 → 作答 → 提交 → 判分 → 查看成绩⚠️注意如果以上问题没有明确答案不要开始写代码。需求理解不清楚是导致返工的最常见原因。1.2 确认系统架构根据 PRD 梳理出系统的整体架构可借助 mermaid 图帮助自己和 AI对齐认知从架构图可以看清职责边界学生端只负责「鉴权 考试与作答」管理后台负责「题库管理 提交记录与成绩统计」二者最终都落库到同一数据库。这份架构梳理也是后续让 AI 生成代码时的核心上下文。第二部分搭建项目骨架AI 生成前端页面2.1 用一条结构化提示词生成前端骨架前端建议采用Next.js App Router TypeScript Tailwind CSS shadcn/ui技术栈。将页面清单与风格要求完整地喂给 AI是获得高质量骨架的前提请基于当前 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 数据不接真实接口 - 注意桌面端和移动端的基本可用性这份提示词之所以有效是因为它明确了技术栈、完整页面路由和两条关键体验约束学生端「清晰专注」、管理端「侧边栏 顶部栏」并且要求先用 mock 数据隔离前后端依赖避免骨架阶段就被接口联调拖住。2.2 完善学生答题页学生端核心页面答题页是整个学生端体验的主战场建议继续用一条聚焦的提示词让 AI 迭代完善请继续完善学生答题页。 这是一个在线考试系统的答题页面需要包含 - 顶部显示考试标题、倒计时、已答题数量 - 中间显示题干和选项 - 支持单选、判断、简答三种题型 - 左侧或顶部有答题卡显示每道题是否已作答 - 点击提交前弹出确认框 先用 mock 数据实现交互不接真实接口。 要求 - 界面简洁不要像后台表格页 - 倒计时要醒目但不要制造过强压迫感 - 有空状态和 loading 状态设计上要注意答题页不应长成「后台表格页」的样子——顶部信息栏标题/倒计时/进度与作答区、答题卡分区要清晰倒计时「醒目但不施压」并补齐空状态与 loading 状态这些细节直接决定演示时的专业度。2.3 完善管理员后台管理后台第一版聚焦三个核心区域考试管理创建考试、设置时长、发布状态题库管理新增题目、编辑题目、按题型筛选提交记录查看学生提交、分数、时间这三个区域分别对应了后台最典型的「资源管理」形态列表 表单 状态流转实现时可以沿用 shadcn/ui 的 Table、Dialog、Form 等组件快速搭建。2.4 验证页面结构逐项检查骨架是否完整学生端和管理端入口是否分开登录页、考试列表、答题页、成绩页是否完整管理端题库、考试管理、提交记录页是否可访问学生端和管理端的页面风格有明显区分遇到阻碍如果你在前端搭建阶段卡住可以回顾这些章节从数据库到 Supabase、应用后端接口设计与开发、使用现代组件库更新你的界面。第三部分后端开发Express 业务链路3.1 登录与权限控制权限控制是本项目最重要的后端模式。可以参考这条提示词让 AI 以「0 基础也能听懂」的方式交付实现请把我当成 0 基础帮我完成在线考试系统的登录与权限控制。 后端使用 Express。 目标 1. 学生和管理员都可以登录 2. 登录后返回用户角色 3. 学生只能访问 /student/* 相关接口 4. 管理员只能访问 /admin/* 相关接口 5. 未登录用户访问受保护页面时跳转 /login 实现要求 - 给出清晰的目录结构建议 - 明确说明中间件负责什么 - 涉及环境变量的地方不要硬编码 - 完成后说明如何验证权限是否生效实现时建议采用仓库配套课程中推荐的分层工程结构见 应用后端接口设计与开发my-api-project/ ├── .env # 敏感环境变量如 API Keys、数据库连接串 ├── server.js # 项目入口服务器启动、全局中间件注册 ├── package.json # 依赖管理文件 ├── src/ │ ├── routes/ # 路由层定义 URL 路径与请求方法 │ ├── controllers/ # 控制器层处理业务请求参数调用服务并返回响应 │ ├── services/ # 服务层封装数据库交互和核心业务逻辑 │ └── middlewares/ # 中间件登录鉴权、错误全局捕获 └── docs/ # API 文档存放目录核心要点中间件职责单一authMiddleware负责解析登录态JWT/sessionroleMiddleware负责校验角色student/admin两者可组合使用——这样requireAuth与requireRole(admin)就能复用到任意受保护路由上。角色边界即路由前缀边界/student/*只允许学生角色/admin/*只允许管理员角色未登录访问受保护页面统一重定向到/login。环境变量不硬编码JWT 密钥、数据库连接串等一律从.env读取保证本地与生产环境可迁移。权限验证方法完成后分别用学生账号访问/admin/*接口应被拒绝、未登录状态访问受保护接口应被重定向/返回 401即可验证权限是否生效。3.2 考试与题库管理接口建议按模块实现以下接口模块推荐接口考试管理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参考提示词请帮我为在线考试系统设计并实现 Express API。 功能范围 - 管理员创建考试 - 管理员维护题库 - 学生查看已发布考试 - 学生开始考试并创建 submission - 学生提交答案后自动判分单选题和判断题 - 简答题先标记为待复核 - 学生查看自己的历史成绩 - 管理员查看所有提交记录 要求 - 接口命名清晰 - 返回统一 JSON 结构 - 代码中区分 controller、service、middleware、db 层 - 说明每个接口如何测试结合配套课程 应用后端接口设计与开发 的工程准则还应注意RESTful 命名URL 表达「资源」名词动作交给 HTTP MethodGET /api/exams查列表、POST /api/admin/exams创建、PATCH /api/admin/exams/:id更新避免getExam、createExam这类动词式路径。规范状态码200/201 表示成功/创建成功400 表示参数错误401/403 表示未登录/无权操作404 表示资源不存在500 表示服务端错误——不要把报错调用栈直接暴露给前端。统一返回结构所有接口返回一致的 JSON 包装如{ code, data, message }前端解析逻辑才可复用。永远不信任用户输入核心参数校验必须在后端再做一次前端的输入可能是伪造的。3.3 判分逻辑核心业务规则判分逻辑是考试系统的灵魂规则如下单选题用户答案与标准答案一致则得分判断题同样可以自动判分简答题第一版先只保存答案分数为空状态为reviewed false标记为待复核数据库落库时建议为submission一次作答与submission_answers逐题答案设计两张表客观题答案用于提交时自动判分并写回分数简答题答案保留原文等待后续人工复核或 AI 辅助批改。这样「自动判分 人工复核」两条路径在数据模型上一开始就分得清。加分项如果你想增加 AI 能力可以让管理员在后台输入「主题 难度」由模型先生成一批候选题再人工审核后入库。这属于加分项不是必须的。第四部分联调与上线4.1 端到端测试至少验证以下两个完整场景学生登录 → 查看考试列表 → 开始答题 → 提交 → 查看成绩管理员登录 → 创建考试 → 添加题目 → 发布 → 查看提交记录这两条链路分别覆盖「学生消费侧」和「管理员供给侧」跑通即代表核心业务闭环成立。4.2 部署前端部署到 Vercel / ZeaburExpress API 部署到 Zeabur / Railway / Render数据库用 Supabase Postgres 或托管 PostgreSQL部署前检查环境变量是否齐全前后端 API 地址是否正确登录态在生产环境是否正常管理员账号是否能真实访问后台README 是否包含启动、部署、测试说明交付物清单完成本项目后你需要提交以下内容可访问的线上演示链接源码仓库链接含 READMEPRD 文档核心页面截图首页、学生考试列表、答题页、管理后台60 秒演示视频覆盖学生答题流程和管理员管理流程README 至少包含项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。评分标准自我对照维度基本要求进阶要求页面完整度学生端和管理端主要页面都可访问页面风格统一移动端基本可用业务闭环学生可登录、参加考试、提交并查看成绩管理员可完整创建并发布考试数据正确性提交答案后能写入数据库客观题能自动判分简答题支持人工复核或 AI 辅助权限控制学生与管理员访问边界清晰服务端接口也有角色校验工程交付项目可运行、可部署、README 清晰有演示视频和测试说明提交前检查首页、登录页、学生端、管理端页面均已完成学生可以正常开始考试并提交答案管理员可以创建考试并查看提交记录客观题分数能够自动计算并写入数据库学生与管理员权限边界已验证项目已部署或具备完整本地运行说明参考资料UI 设计使用现代组件库更新你的界面从数据库到 Supabase大模型辅助编写接口代码与接口文档Git 和 GitHub 工作流如何部署 Web 应用本作业在 Stage 2 大作业序列中的位置可参考 Stage 2 索引大作业 2在线考试与管理系统本文档对应的原始实战指南位于 docs/es-es/stage-2/assignments/exam-management-express/index.md需求文档 PRD 为该实践任务的外部输入请按任务说明获取本仓库中该目录下仅保留实践指南文件。【免费下载链接】easy-vibe vibe coding 101The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考