【课堂管理】基于React+Flask的班级积分管理系统

基于React+Flask的班级积分管理系统

一个基于React + Flask的班级积分管理系统，支持班级管理、学生积分跟踪、兑换物品管理、排行榜展示等功能。

项目地址：https://github.com/atuo-200/classMaster

安装与运行

后端

cd backend
pip install -r requirements.txt
python app.py

前端

cd frontend
npm install
npm start

一键式运行

在安装好后端（pip install -r requirements.txt）及前端所需依赖包（npm install）之后，也可双击项目文件夹里的start.bat运行该项目，班级积分管理页面会自动打开。

使用说明

1.班级管理

• 创建班级：快速创建新的班级。
• 批量导入学生名单：点击“下载模板”下载Excel模板文件，填写学生学号、姓名，然后点击“导入学生”上传填写好的学生名单文件，即可完成导入。
• 删除班级：安全删除班级（为防止误触，需要密钥验证，密钥默认为123456，如需修改可在项目文件夹下的backend\app.py中修改app.config[‘SECRET_KEY’]字段）。
• 班级列表：查看所有班级及学生数量统计。
  

2.学生管理

• 学生列表：查看班级学生信息及积分状态
  

• 单个添加/删除学生：支持手动添加单个学生信息以及手动删除单个学生信息。

• 加分/扣分：可为每个学生加扣分，可默认加/扣1分，或者根据“加/扣分规则”中设置的规则来进行加/扣分。
  

• 兑换奖品：可根据学生的兑换币数量为其兑换奖品，需要在“兑换设置”中设置兑奖的项目。
  

3.加/扣分规则管理

为加/扣分添加、编辑、删除规则。

4.兑换设置

设置兑奖项目：名称、描述以及所需兑换币数量等。

5.段位管理

设置段位名称、段位代表颜色、所需积分区间等等。以下是简单的段位设置参考：

6.排行榜

积分排行榜、兑换币排行榜、段位统计数据实时显示。

７.随机点名

随机从班级中抽取学生。

开发说明

技术栈

前端：React + TypeScript + Ant Design

后端：Flask + SQLAlchemy + SQLite

文件处理：openpyxl (Excel处理)

数据库数据模型

1. 班级表(Class)

2.学生表(Student)

3. 兑换物品表(ExchangeItem)

4. 积分历史记录表(PointHistory)

5. 积分规则表(PointRule)

６.段位表(Rank)

后端API接口

1.班级管理API

2.学生管理API

3.兑换物品API

4.积分规则API

5.段位管理API

前端项目结构

frontend/src/
├── components/          # 通用组件
│   └── Layout.tsx      # 主布局组件
├── pages/              # 页面组件
│   ├── ClassManagement.tsx    # 班级管理页面
│   ├── StudentManagement.tsx  # 学生管理页面
│   ├── Leaderboard.tsx        # 排行榜页面
│   ├── RandomCall.tsx         # 随机点名页面
│   ├── ExchangeSettings.tsx   # 兑换设置页面
│   ├── PointRules.tsx         # 积分规则页面
│   └── RankManagement.tsx     # 段位管理面
├── services/           # API服务
│   └── api.ts         # API接口封装
├── App.tsx            # 应用入口
├── App.css            # 应用样式
├── index.tsx          # 渲染入口
└── index.css          # 全局样式

前端核心组件详解

1. Layout 布局组件

文件位置：components/Layout.tsx

描述：

• 提供应用的整体布局结构
• 支持菜单高亮显示当前页面
• 包含侧边导航栏和主内容区域
• 支持侧边栏折叠/展开功能

主要特性：

interface LayoutProps {
  children: React.ReactNode;
}

const AppLayout: React.FC<LayoutProps> = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);
  // ...
}

2. ClassManagement 班级管理组件

文件位置：pages/ClassManagement.tsx

描述：

• 班级的增删改查操作（删除班级需要验证密钥）
• 班级导航（跳转到学生管理和排行榜）
• 学生名单的批量导入（Excel模板下载和文件上传）

状态管理：

const [classes, setClasses] = useState<Class[]>([]);
const [loading, setLoading] = useState(false);
const [modalVisible, setModalVisible] = useState(false);
const [className, setClassName] = useState('');

3. StudentManagement 学生管理组件

文件位置：pages/StudentManagement.tsx

描述：

• 单个学生信息的增删改查
• 积分操作（加分/扣分/兑换）
• 根据学生积分显示段位

状态管理：

const [students, setStudents] = useState<Student[]>([]);
const [exchangeItems, setExchangeItems] = useState<ExchangeItem[]>([]);
const [pointRules, setPointRules] = useState<PointRule[]>([]);
const [operationModalVisible, setOperationModalVisible] = useState(false);

4. RandomCall 随机点名组件

文件位置：pages/RandomCall.tsx

描述：

• 轮盘式随机选择学生
• 选中学生的积分操作

轮盘动画实现：

const spinWheel = () => {
  const randomIndex = Math.floor(Math.random() * students.length);
  const segmentAngle = 360 / students.length;
  const targetAngle = randomIndex * segmentAngle + segmentAngle / 2;
  const finalRotation = rotation + (360 * extraRotations) + (360 - targetAngle);
  setRotation(finalRotation);
};

5. Leaderboard 排行榜组件

文件位置：pages/Leaderboard.tsx

描述：

• 积分排行榜展示
• 兑换币排行榜展示
• 前三名特殊图标显示
• 段位统计

数据展示：

interface LeaderboardData {
  points_leaderboard: Student[];
  coins_leaderboard: Student[];
  rank_statistics: RankStatistic[];
}

API 服务层设计

文件位置：services/api.ts

描述：

• 统一的 API 基础配置
• 按功能模块分组 API 方法

API 分组：

// 班级相关API
export const classApi = {
  getClasses: () => api.get('/classes'),
  createClass: (name: string) => api.post('/classes', { name }),
  // ...
};

// 学生相关API
export const studentApi = {
  updatePoints: (studentId: number, operation: string, description?: string) =>
    api.post(`/students/${studentId}/points`, { operation, description }),
};

// 兑换项目相关API
export const exchangeApi = {
  getItems: () => api.get('/exchange-items'),
  // ...
};