基于 Vue 3 + TypeScript + Vite + Element Plus 开发的学生成绩管理系统前端应用。
- 前端框架: Vue 3 (Composition API)
- 开发语言: TypeScript
- 构建工具: Vite
- UI 组件库: Element Plus
- 状态管理: Pinia
- 路由管理: Vue Router
- 日期处理: Day.js
- 自动生成 120 名学生数据（学号、姓名、性别、年龄、专业）
- 自动生成 6 名教师数据（工号、姓名、职称、院系）
- 自动生成 5 门课程数据（课程编号、名称、学分）
- 自动创建教学班（每门课至少 2 个教学班）
- 每个学生随机选择 3-5 门课程
- 自动分配到对应课程的教学班
- 确保每个教学班至少 20 名学生
- 查看教学班学生名单
- 分教学班录入成绩
- 支持录入平时成绩、期中成绩、实验成绩、期末成绩
- 自动计算综合成绩（权重：平时20% + 期中20% + 实验20% + 期末40%）
- 成绩采用正态分布生成（均值75，标准差10）
- 记录成绩录入时间
- 按学生查询：输入学号或姓名查询学生所有课程成绩
- 按教学班查询：查看教学班所有学生成绩
- 支持按学号或成绩排序
- 显示学生成绩汇总（平均分、总学分、GPA）
- 分数段分布统计（90-100、80-89、70-79、60-69、0-59）
- 支持按课程筛选统计
- 可视化展示分数段占比
- 显示优秀率、及格率、不及格率
- 支持按平均分、GPA、总学分排序
- 前三名特殊标记（🥇🥈🥉）
- 支持按专业筛选
- 查看学生详情和成绩单
- 导出排名数据
- 统计数据概览（学生、教师、课程、教学班数量）
- 课程列表展示
- 教学班列表展示
- 快速操作入口
Exp03/
├── src/
│ ├── views/ # 页面组件
│ │ ├── Dashboard.vue # 系统概览
│ │ ├── DataInit.vue # 数据初始化
│ │ ├── Enrollment.vue # 学生选课
│ │ ├── ScoreManagement.vue # 成绩录入
│ │ ├── ScoreQuery.vue # 成绩查询
│ │ ├── Statistics.vue # 统计分析
│ │ └── Ranking.vue # 学生排名
│ ├── services/ # 业务逻辑
│ │ └── dataService.ts # 数据管理服务
│ ├── types/ # TypeScript 类型定义
│ │ └── index.ts
│ ├── router/ # 路由配置
│ │ └── index.ts
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── style.css # 全局样式
├── index.html
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
npm installnpm run dev项目将在 http://localhost:3000 启动。
npm run buildnpm run preview- 进入"数据初始化"页面
- 点击"开始初始化"按钮
- 等待系统生成学生、教师、课程和教学班数据
- 进入"学生选课"页面
- 点击"开始选课"按钮
- 系统自动为学生分配课程和教学班
- 进入"成绩录入"页面
- 选择教学班和成绩类型
- 点击"生成成绩"或"生成全部成绩"
- 成绩查询：输入学号/姓名或选择教学班查询成绩
- 统计分析：查看分数段分布和各项统计指标
- 学生排名：查看全校学生排名和详细信息
- 数据持久化：数据保存在内存中，页面刷新后需重新初始化
- 响应式设计：支持不同屏幕尺寸
- 美观的UI：使用 Element Plus 组件库，界面现代化
- 数据可视化：分数段分布图表展示
- 操作便捷：流程清晰，步骤分明
- TypeScript 类型安全：全程类型检查，减少错误
- 本项目为前端独立项目，不依赖后端服务
- 数据存储在浏览器内存中，刷新页面会丢失数据
- 建议先完成数据初始化和选课，再进行成绩管理
- 成绩采用随机生成，符合正态分布规律
- 开发工具：VS Code
- 辅助工具：GitHub Copilot
- 实验目的：掌握 Vue 3 企业级应用开发
MIT