我构建了一个全栈教务管理系统
我所在的学院使用纸质登记册进行考勤，使用 Excel 表格记录成绩。通知则贴在物理布告栏上。我的团队决定将整个流程数字化。
我们构建了 Student Sphere。
该系统使用三个不同的仪表板：
学生仪表板：
- 查看考勤和资格
- 查看成绩
- 下载学习笔记
- 在线提交作业
- 查看学期通知
教师仪表板：
- 更新考勤和成绩
- 上传笔记和实验报告
- 设置作业截止日期
- 向特定学期发布通知
- 审核学生提交的内容
管理员仪表板：
- 批准新注册
- 管理用户账户
- 推进整个学期进度
- 查看系统统计数据
- 管理所有通知
技术栈：
前端：
- HTML5、CSS3 和原生 JavaScript (Vanilla JavaScript)
- 未使用 React 或 Vue 等框架
- 所有页面共用一个 CSS 文件
- 支持从移动端到 4K 屏幕的响应式设计
后端：
- Node.js 和 Express.js v5
- JWT 身份验证
- Bcrypt 密码哈希
- 拥有 30 多个端点的 REST API
数据库与部署：
- MongoDB Atlas
- 前端托管在 Netlify
- 后端托管在 Render
- 通过 WebView 使用 Java 构建的 Android 应用
我们面临两个主要的工程挑战。
挑战 1：API 性能
教师仪表板最初通过 46 次独立的 API 调用来加载学生数据，这导致了 14 秒的延迟。我将多次调用替换为单个 MongoDB $in 查询，从而显著缩短了加载时间。
挑战 2：不使用 React 的单页应用 (SPA) 我们仅使用原生 JavaScript 构建了一个基于角色的 SPA。我们手动管理路由和状态。我们使用 CSS 媒体查询来确保在移动设备上实现零水平滚动。
核心经验：
- 不使用框架进行构建可以让你了解 Web 技术底层的运作原理。
- 性能优化比添加新功能更重要。
- 早期的数据库模式 (schema) 决策会影响整个项目。
- 部署需要仔细管理 CORS 和环境变量。
该项目由来自 Ramgovind Institute of Technology, Koderma 的五名学生在 Ajay Kumar Dangi 先生的指导下完成。
在线网站：https://studentsphere0.netlify.app
前端 GitHub：https://github.com/sumankumarsinghrajput/studentsphere-frontend
后端 GitHub：https://github.com/sumankumarsinghrajput/studentsphere-backend
我为我的学院构建了一个全栈学术管理系统 —— 以下是实现过程
在我的学院，我们过去一直采用手动管理一切的方式，从学生考勤到成绩记录，再到课程安排。这种方式不仅效率低下，而且极易出错，数据丢失或记录不一致的问题时有发生。
为了解决这个问题，我决定利用我的编程技能构建一个数字化的解决方案：一个全栈学术管理系统。
技术栈
为了构建这个系统，我选择了目前最流行的 MERN 技术栈，因为它在处理 JSON 数据和构建单页应用（SPA）方面非常强大。
- MongoDB: 用于存储灵活的文档型数据。
- Express.js: 用于构建高效的后端 API。
- React: 用于构建响应式且交互性强的用户界面。
- Node.js: 作为后端运行环境。
- Tailwind CSS: 用于快速且一致的 UI 设计。
- JWT (JSON Web Tokens): 用于安全的身份验证。
核心功能
该系统根据用户角色划分为三个主要模块：
1. 管理员 (Admin)
管理员拥有最高权限，可以：
- 管理用户（添加、编辑或删除学生和教师）。
- 创建和管理课程。
- 监控整个学院的活动。
2. 教师 (Teacher)
教师可以：
- 管理其所授课程的考勤。
- 输入和更新学生的成绩。
- 查看班级概况。
3. 学生 (Student)
学生可以：
- 查看自己的考勤记录。
- 查看成绩单。
- 查看课程安排。
系统架构
系统采用了典型的客户端-服务器架构。
后端 (Backend)
后端使用 Node.js 和 Express 构建。我设计了 RESTful API 来处理所有数据请求。
- 模型 (Models): 使用 Mongoose 定义了
User、Course、Attendance和Grade的 Schema。 - 控制器 (Controllers): 包含业务逻辑，例如处理登录、计算平均分等。
- 中间件 (Middleware): 用于身份验证和权限检查，确保只有授权用户可以访问特定路由。
前端 (Frontend)
前端使用 React 构建。
- 状态管理: 使用 React Context API 或 Redux 来管理全局状态（如用户信息）。
- 路由: 使用
react-router-dom实现页面跳转。 - 组件化: 将 UI 拆分为可重用的组件（如
Navbar、Sidebar、Button等）。
开发过程中的挑战
构建这个系统并非一帆风顺。
身份验证与授权 是最大的挑战之一。我必须确保学生不能访问教师的页面，而教师不能修改管理员的设置。通过结合 JWT 和自定义中间件，我成功实现了基于角色的访问控制 (RBAC)。
复杂的状态管理 也是一个难点。当用户在不同页面之间切换时，保持登录状态和数据的一致性需要精细的逻辑处理。
总结
构建这个学术管理系统不仅让我巩固了 MERN 技术栈的知识，还让我深刻理解了如何将现实世界的问题转化为技术解决方案。
未来，我计划添加更多功能，例如：
- 自动生成成绩单的 PDF 功能。
- 集成在线支付系统用于学费缴纳。
- 实时通知系统（通过邮件或短信）。
如果你对这个项目感兴趣，欢迎在评论区交流！