# 软工2班

**Repository Path**: misakarain/soft-work-class-2

## Basic Information

- **Project Name**: 软工2班
- **Description**: 软工2班小周期项目提交仓库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 76
- **Created**: 2024-07-11
- **Last Updated**: 2024-07-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目背景介绍

随着教育信息化的发展，学校和教育机构对学生成绩的管理和分析需求日益增长。为了更好地管理学生成绩数据，分析学生的学习情况，本项目开发了一个基于前后端分离架构的学生成绩管理系统。该系统旨在提供一个直观的界面供教师和管理人员查看、分析学生的成绩数据，帮助他们做出更加科学的教学决策。

## 功能说明

1. **学生成绩总览**：展示所有学生的详细成绩信息。
2. **成绩趋势分析**：展示数学、物理和化学成绩的分布情况，以柱状图形式呈现不同分数段的学生人数。
3. **成绩比较分析**：对不同学生或不同班级的成绩进行比较分析（暂未实现）。
4. **路由页面交互**：使用Vue Router进行页面之间的导航和交互。
5. **数据库数据转换为图表**：将数据库中的成绩数据提取并转换成图表展示。

## 技术架构

### 前端技术

- **Vue.js**：
  - 用于构建用户界面，进行组件化开发和数据绑定。项目的前端部分主要使用Vue.js进行开发，通过组件的形式来组织页面结构和功能。
  - 例如，在`Chegnjizonglan.vue`组件中，使用Vue.js的模板语法和数据绑定显示学生的成绩信息。

- **Element UI**：
  - 一套基于Vue.js的组件库，提供了丰富的UI组件。项目使用Element UI构建了导航菜单和布局。
  - 在`App.vue`中使用Element UI的容器、菜单等组件来构建应用的整体布局和导航。

- **ECharts**：
  - 一个开源的可视化图表库，用于绘制各种图表。项目使用ECharts绘制成绩分布的柱状图。
  - 在`chengjiqushi.vue`中，使用ECharts库创建图表，展示数学、物理和化学成绩的分布情况。

- **Axios**：
  - 一个基于Promise的HTTP库，用于向后端API发送请求并处理响应。项目中使用Axios从后端获取学生成绩数据和成绩分布统计数据。
  - 在`Chegnjizonglan.vue`中，通过Axios调用后端API，获取学生成绩数据并展示在表格中。

- **Vue Router**：
  - 用于实现SPA（单页应用）中的路由管理，使得不同视图之间的导航更加便捷。
  - 在`App.vue`中配置了路由，通过`router-link`进行页面之间的跳转，例如从成绩总览页面到成绩趋势分析页面。

### 后端技术

- **Flask**：
  - 一个轻量级的Python Web框架，用于构建后端API。项目使用Flask创建了RESTful API，处理前端请求，并与数据库交互。
  - 在`server.py`中，定义了API路由，处理来自前端的请求，查询数据库并返回数据。

- **MySQL**：
  - 一个关系型数据库管理系统，用于存储学生成绩数据。项目使用MySQL数据库存储和查询学生成绩数据。
  - 在`server.py`中，通过MySQL Connector与数据库进行连接和查询操作，获取学生成绩和统计数据。

- **Flask-CORS**：
  - 一个Flask扩展，用于处理跨域请求，确保前端能够访问后端API。项目中使用Flask-CORS解决跨域问题。
  - 在`server.py`中，启用CORS以允许跨域请求，从而确保前端能够成功调用后端API。

### 数据库交互

- **MySQL Connector**：
  - 一个用于Python与MySQL数据库通信的库。项目使用MySQL Connector在Flask后端与MySQL数据库之间进行数据交互。
  - 在`server.py`中，通过MySQL Connector连接数据库，执行查询操作，并将结果转换为JSON格式返回给前端。

### 数据库数据转换为图表

- **后端数据处理**：
  - 后端通过Flask从数据库中提取成绩数据，并将其按需求分组和统计。例如，将学生的成绩按10分一组进行分段统计。
  - 在`server.py`中，通过API路由`/api/score-statistics`将处理后的成绩分布数据返回给前端。

- **前端图表绘制**：
  - 前端使用Axios从后端获取成绩分布数据，并使用ECharts库将这些数据转换为柱状图进行展示。
  - 在`chengjiqushi.vue`中，通过调用后端API获取成绩统计数据，并使用ECharts将这些数据渲染为柱状图，展示在页面上。

## 项目总结

本项目通过结合Vue.js前端框架和Flask后端框架，创建了一个功能完善的学生成绩管理系统。前端界面简洁直观，后端数据处理高效，适合用于学校和教育机构的学生成绩管理和分析。未来可以进一步扩展功能，如添加成绩比较分析、更多科目支持等，以满足更多样化的需求。