# cursor-student

**Repository Path**: tswstart/cursor-stude

## Basic Information

- **Project Name**: cursor-student
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-13
- **Last Updated**: 2026-02-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 学生信息管理系统

基于 **Vue 3 + Flask + MySQL 5.7** 的简单学生信息管理系统，包含用户登录、学生信息管理、班级信息管理三个模块。

---

## 环境要求

| 组件    | 版本要求 |
| ------- | -------- |
| MySQL   | 5.7+     |
| Python  | 3.6+     |
| Node.js | 16+      |
| npm     | 8+       |

---

## 项目目录结构

```
cursor-tutorial/
├── database/
│   └── init.sql                     # 数据库初始化脚本（含表结构和测试数据）
├── server/                          # Flask 后端
│   ├── config.py                    # 数据库连接配置
│   ├── app.py                       # 后端主程序（API 接口）
│   └── requirements.txt             # Python 依赖
└── client/                          # Vue 3 前端
    ├── vite.config.js               # Vite 配置（含 API 代理）
    ├── package.json                 # 前端依赖
    └── src/
        ├── main.js                  # 入口文件（挂载 Element Plus + Router）
        ├── style.css                # 全局样式
        ├── App.vue                  # 根组件
        ├── router/
        │   └── index.js             # 路由配置 + 登录守卫
        ├── api/
        │   ├── request.js           # axios 封装（token 注入 + 错误处理）
        │   ├── user.js              # 用户登录 API
        │   ├── student.js           # 学生 CRUD API
        │   └── class.js             # 班级 CRUD API
        └── views/
            ├── Login.vue            # 登录页面
            ├── layout/
            │   └── Layout.vue       # 主布局（侧边栏导航 + 顶栏）
            ├── student/
            │   └── StudentList.vue  # 学生管理页面
            └── class/
                └── ClassList.vue    # 班级管理页面
```

---

## 快速部署

### 第 1 步：初始化数据库

确保 MySQL 服务已启动，执行以下命令导入数据库脚本：

```bash
mysql -u root -p < database/init.sql
```

该脚本会自动完成以下操作：

- 创建数据库 `student_management`
- 创建 `users`（用户表）、`classes`（班级表）、`students`（学生表）
- 插入模拟测试数据：2 个用户、5 个班级、20 个学生

### 第 2 步：修改数据库连接配置

编辑 `server/config.py`，将连接信息改为你本地 MySQL 的实际配置：

```python
DB_CONFIG = {
    'host': 'localhost',
    'port': 3306,
    'user': 'root',          # 改为你的 MySQL 用户名
    'password': 'root',      # 改为你的 MySQL 密码
    'database': 'student_management',
    'charset': 'utf8mb4'
}
```

### 第 3 步：启动后端（Flask）

```bash
cd server
pip install -r requirements.txt
python app.py
```

启动成功后终端显示：

```
 * Running on http://0.0.0.0:5000
```

### 第 4 步：启动前端（Vue）

打开**新的终端窗口**，执行：

```bash
cd client
npm install
npm run dev
```

启动成功后终端显示：

```
  Local:   http://localhost:5173/
```

### 第 5 步：访问系统

浏览器打开 **http://localhost:5173**

---

## 测试账号

| 用户名  | 密码   | 身份       |
| ------- | ------ | ---------- |
| admin   | admin  | 系统管理员 |
| teacher | 123456 | 王老师     |

> 注意：密码以明文方式存储，仅供学习演示使用。

---

## 功能模块说明

### 1. 用户登录

- 输入用户名和密码进行登录
- 登录成功后自动跳转到学生管理页面
- 未登录时访问任何页面都会被重定向到登录页
- 页面底部提示了测试账号信息

### 2. 学生管理

- **查看列表**：表格展示所有学生信息（学号、姓名、性别、年龄、班级、电话、地址、创建时间），支持分页
- **搜索**：按姓名或学号关键词模糊搜索
- **按班级筛选**：下拉选择班级过滤学生列表
- **新增学生**：点击「新增学生」按钮，弹窗填写表单（姓名、学号、性别、年龄、班级、电话、地址）
- **编辑学生**：点击操作列「编辑」按钮，弹窗修改学生信息
- **删除学生**：点击操作列「删除」按钮，确认后删除该学生

### 3. 班级管理

- **查看列表**：表格展示所有班级（班级名称、班主任、描述、创建时间），支持分页
- **搜索**：按班级名称或班主任关键词模糊搜索
- **新增班级**：点击「新增班级」按钮，弹窗填写班级名称、班主任、描述
- **编辑班级**：点击操作列「编辑」按钮，弹窗修改班级信息
- **删除班级**：点击操作列「删除」按钮，确认后删除（若班级下仍有学生则无法删除）

### 4. 退出登录

- 点击页面右上角「退出登录」按钮，确认后清除登录状态并跳转到登录页

---

## API 接口文档

所有接口均以 `/api` 为前缀，返回 JSON 格式。

### 用户认证

| 方法 | 路径         | 说明     | 请求体                                    |
| ---- | ------------ | -------- | ----------------------------------------- |
| POST | `/api/login` | 用户登录 | `{ "username": "admin", "password": "admin" }` |

**响应示例：**

```json
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "admin_1700000000",
    "username": "admin",
    "real_name": "系统管理员"
  }
}
```

### 学生管理

| 方法   | 路径                  | 说明     | 参数                                              |
| ------ | --------------------- | -------- | ------------------------------------------------- |
| GET    | `/api/students`       | 学生列表 | `page`, `pageSize`, `keyword`, `classId`（Query） |
| POST   | `/api/students`       | 新增学生 | JSON Body                                         |
| PUT    | `/api/students/<id>`  | 修改学生 | JSON Body                                         |
| DELETE | `/api/students/<id>`  | 删除学生 | 无                                                |

**学生对象字段：**

```json
{
  "name": "张三",
  "student_no": "2024001001",
  "gender": "男",
  "age": 20,
  "phone": "13800138001",
  "class_id": 1,
  "address": "北京市海淀区"
}
```

### 班级管理

| 方法   | 路径                 | 说明               | 参数                                 |
| ------ | -------------------- | ------------------ | ------------------------------------ |
| GET    | `/api/classes`       | 班级列表（分页）   | `page`, `pageSize`, `keyword`（Query） |
| GET    | `/api/classes/all`   | 所有班级（下拉用） | 无                                   |
| POST   | `/api/classes`       | 新增班级           | JSON Body                            |
| PUT    | `/api/classes/<id>`  | 修改班级           | JSON Body                            |
| DELETE | `/api/classes/<id>`  | 删除班级           | 无                                   |

**班级对象字段：**

```json
{
  "class_name": "计算机科学一班",
  "teacher": "张建国",
  "description": "2024级计算机科学与技术专业一班"
}
```

---

## 数据库表结构

### users（用户表）

| 字段       | 类型         | 说明           |
| ---------- | ------------ | -------------- |
| id         | INT          | 主键，自增     |
| username   | VARCHAR(50)  | 用户名（唯一） |
| password   | VARCHAR(50)  | 密码（明文）   |
| real_name  | VARCHAR(50)  | 真实姓名       |
| created_at | DATETIME     | 创建时间       |

### classes（班级表）

| 字段        | 类型          | 说明       |
| ----------- | ------------- | ---------- |
| id          | INT           | 主键，自增 |
| class_name  | VARCHAR(100)  | 班级名称   |
| teacher     | VARCHAR(50)   | 班主任     |
| description | VARCHAR(255)  | 班级描述   |
| created_at  | DATETIME      | 创建时间   |

### students（学生表）

| 字段       | 类型         | 说明                   |
| ---------- | ------------ | ---------------------- |
| id         | INT          | 主键，自增             |
| name       | VARCHAR(50)  | 姓名                   |
| student_no | VARCHAR(20)  | 学号（唯一）           |
| gender     | VARCHAR(4)   | 性别                   |
| age        | INT          | 年龄                   |
| phone      | VARCHAR(20)  | 联系电话               |
| class_id   | INT          | 班级 ID（外键关联 classes） |
| address    | VARCHAR(255) | 地址                   |
| created_at | DATETIME     | 创建时间               |

---

## 技术栈

- **前端**：Vue 3 + Vite + Element Plus + Vue Router + Axios
- **后端**：Python Flask + Flask-CORS + PyMySQL
- **数据库**：MySQL 5.7

---

## 常见问题

**Q: 前端页面空白或接口报错？**
A: 请确认 Flask 后端已启动在 5000 端口。Vite 的开发代理会将 `/api` 请求转发到 `http://localhost:5000`。

**Q: 数据库连接失败？**
A: 检查 `server/config.py` 中的 `user`、`password`、`host`、`port` 是否与你本地 MySQL 配置一致。

**Q: 删除班级时提示失败？**
A: 当班级下仍有关联学生时不允许删除。请先删除或转移该班级下的学生后再删除班级。

**Q: 端口被占用？**
A: 后端端口可在 `server/app.py` 末尾的 `app.run(port=5000)` 中修改；前端端口可在 `client/vite.config.js` 的 `server` 配置中添加 `port` 字段。