这是一个基于纯前端技术开发的学生选课管理系统，使用 HTML、CSS 和 JavaScript 实现，数据存储在浏览器的 LocalStorage 中。该系统提供了完整的选课管理功能，支持三种不同角色：学生、教师和管理员。
本系统是一个轻量级的选课管理平台，旨在帮助教育机构管理课程选择流程。系统采用角色分离设计，每个角色都有专属的功能界面和权限控制。
- ✅ 纯前端实现：无需后端服务器，所有数据存储在浏览器本地
- 👥 三种用户角色：学生、教师、管理员，各有不同的功能权限
- 📊 数据持久化：使用 LocalStorage 保存所有数据，支持数据导出和导入
- 🔐 安全登录：用户注册和登录功能，密码保护
- 📱 响应式设计：适配不同屏幕尺寸
- 💾 数据备份：支持系统数据的导出和恢复功能
学生登录后可以访问以下功能：
-
选课功能
- 浏览所有可用课程
- 查看课程详细信息（课程名称、教师、时间、地点、学分、容量等）
- 选择课程（实时检查课程容量）
- 退选课程
-
我的课程
- 查看已选课程列表
- 查看选课状态
- 管理已选课程
-
成绩查询
- 查看各科成绩
- 显示教师评语
-
课表查看
- 以周课表形式显示所有已选课程
- 直观显示上课时间和地点
-
个人资料
- 查看和编辑个人信息
- 修改密码
教师登录后可以访问以下功能：
-
课程管理
- 添加新课程
- 编辑现有课程信息
- 删除课程
- 查看选课学生名单
- 退选学生（将学生从课程中移除）
- 为学生评分和添加评语
-
课表查看
- 查看个人授课课表
- 显示所有教授的课程安排
-
数据管理
- 导出课程数据（JSON 格式）
- 导入课程数据
-
个人资料
- 查看和编辑个人信息
- 修改密码
管理员登录后可以访问以下功能：
-
教师管理
- 查看所有教师列表
- 查看教师详细信息
- 查看教师所授课程
-
学生管理
- 查看所有学生列表
- 查看学生详细信息
- 查看学生选课情况
-
课程管理
- 查看所有课程
- 控制选课系统开关（开启/关闭选课功能）
- 查看课程详细信息
-
数据管理
- 查看系统数据统计
- 导出所有系统数据（包括用户、课程、选课记录等）
- 导入系统数据（数据恢复功能）
- 清空所有数据
-
个人资料
- 查看和编辑管理员信息
- 修改密码
- 前端框架：纯 HTML5、CSS3、JavaScript (ES6+)
- 数据存储：浏览器 LocalStorage 和 SessionStorage
- 界面设计：响应式 CSS 布局
- 数据格式：JSON
├── index.html # 登录页面
├── register.html # 用户注册页面
├── student-dashboard.html # 学生仪表板
├── teacher-dashboard.html # 教师仪表板
├── admin-dashboard.html # 管理员仪表板
├── script.js # 登录页面逻辑
├── register.js # 注册页面逻辑
├── student-dashboard.js # 学生端功能逻辑
├── teacher-dashboard.js # 教师端功能逻辑
├── admin-dashboard.js # 管理员端功能逻辑
├── data-manager.js # 数据导入导出管理模块
├── styles.css # 登录和注册页面样式
├── dashboard.css # 仪表板样式
└── README.md # 项目说明文档
-
启动系统
- 直接在浏览器中打开
index.html文件 - 或使用本地服务器（如 Live Server、http-server 等）
- 直接在浏览器中打开
-
注册账号
- 点击登录页面的"立即注册"链接
- 选择用户类型（学生/教师/管理员）
- 输入学号/工号和密码
- 完成注册
-
登录系统
- 在登录页面选择用户类型
- 输入学号/工号和密码
- 点击登录按钮
-
使用系统
- 根据不同角色使用相应的功能
- 学生可以选课、查看成绩
- 教师可以管理课程、评分
- 管理员可以管理所有用户和课程
首次使用需要通过注册页面创建账号，系统不提供默认账号。
系统使用 LocalStorage 存储以下数据：
allUsers：所有用户账号信息allCourses：全局课程列表courseStatus：选课系统开关状态（open/closed）teacherCourses_teacher_{教师ID}：每个教师的课程数据studentProfile_student_{学生ID}：学生个人资料selectedCourses_student_{学生ID}：学生选课记录teacherProfile_{教师ID}：教师个人资料adminProfile_{管理员ID}：管理员个人资料droppedCourses：被退选的课程记录
currentUser：当前登录用户信息（确保每个浏览器标签页独立登录）
-
教师端导出：在教师仪表板中点击"导出数据"按钮，可导出个人课程数据
-
管理员端导出：在管理员仪表板的"数据管理"标签中点击"导出系统数据"，可导出所有系统数据
-
导出格式：数据以 JSON 格式保存，文件名格式为
system-data-backup-YYYY-MM-DD.json
-
教师端导入：在教师仪表板中点击"导入数据"按钮，选择之前导出的课程数据文件
-
管理员端导入：
- 方式一：在登录页面选择"管理员"用户类型时，会显示数据恢复选项
- 方式二：在管理员仪表板的"数据管理"标签中导入数据
-
注意事项：导入数据将覆盖当前所有数据，操作前会有确认提示
- 教师创建课程并设置课程信息（名称、时间、地点、容量等）
- 管理员开启选课系统
- 学生浏览可用课程并选择课程
- 系统自动检查课程容量，满员则无法选课
- 学生可以在选课开放期间退选课程
- 教师可以查看选课学生名单并管理
- 教师在"我的课程"中选择课程
- 查看该课程的学生名单
- 为每个学生录入成绩和评语
- 学生在"成绩查询"中查看成绩
- 添加课程：教师填写课程表单，包括课程名称、时间、地点、学分、容量等信息
- 编辑课程：修改课程信息
- 删除课程：删除不需要的课程
- 学生管理：查看选课学生，必要时可以退选学生
- 每个教师的课程数据独立存储
- 每个学生的选课记录独立存储
- 使用 SessionStorage 确保多标签页独立登录
- 系统自动在数据变更时创建备份
- 备份存储在 LocalStorage 中
- 支持手动导出备份文件
- 教师修改课程信息后，学生端自动同步
- 学生选课后，教师端实时看到学生名单
- 管理员可以查看所有数据的最新状态
- 课程设置最大容量
- 选课时自动检查是否已满
- 显示当前已选人数和剩余名额
-
数据保存：所有数据保存在浏览器的 LocalStorage 中，清除浏览器数据会导致信息丢失，建议定期导出备份
-
浏览器兼容性：推荐使用现代浏览器（Chrome、Firefox、Edge、Safari 等）
-
安全性：这是一个演示性质的前端项目，不适合用于生产环境。在实际应用中应该使用后端服务器和数据库
-
数据限制：LocalStorage 通常有 5-10MB 的存储限制，大量数据可能会受到限制
-
密码安全：
⚠️ 重要：当前密码以明文存储在 LocalStorage 中，这是严重的安全漏洞！此系统仅用于学习演示，绝不可用于任何真实环境。实际应用必须使用后端服务器、密码加密和安全的身份验证机制
- 添加后端服务器和数据库支持
- 实现密码加密和安全认证
- 添加找回密码功能
- 支持课程冲突检测
- 添加课程搜索和筛选功能
- 支持课程评价和反馈
- 添加通知和消息系统
- 支持批量操作
- 添加数据分析和报表功能
- 优化移动端体验
# 如果使用 Node.js 的 http-server
npm install -g http-server
http-server
# 或使用 Python 的简单服务器
python -m http.server 8000
# 或使用 VS Code 的 Live Server 扩展
# 右键点击 index.html 选择 "Open with Live Server"然后在浏览器中访问 http://localhost:8000 或相应端口。
{
"userType": "student",
"userID": "2024001",
"password": "SecureP@ssw0rd123" // 注意：示例密码，实际应使用强密码
}{
"name": "数据结构",
"teacher": "张三",
"time": "周一 1-2节",
"location": "A101",
"credits": 4,
"capacity": 50,
"students": 30,
"enrolledStudents": [
{
"studentId": "2024001",
"studentName": "李四",
"major": "计算机科学与技术",
"enrollTime": "2024-01-15T08:30:00.000Z",
"score": "95",
"comment": "优秀",
"dropped": false
}
]
}本项目为开源项目，供学习和参考使用。
如有问题或建议，欢迎提交 Issue。
注意：这是一个教学演示项目，主要用于学习前端开发技术。如需用于实际生产环境，请进行相应的安全加固和功能完善。