vue3_sms/README.md

<div align="center"> <a href="https://github.com/yuxingshi/vue-element-plus-admin"> <img width="100" src="./public/logo.png"> </a> <br> <br>

<h1>学生管理系统</h1>

基于 Vue3 + Element Plus + TypeScript + Vite 的现代化学生管理系统

</div>

## 项目简介

本项目是一个基于 Vue3、Element Plus、TypeScript 和 Vite 等现代化技术栈开发的**学生管理系统**。系统提供了完整的学生、班级、专业、教师等信息管理功能，具有用户友好的界面和强大的后端集成能力。

该系统已完全对接后端 API，实现了完整的学生管理业务流程，包括数据的增删改查、导入导出、状态管理等功能。

## 核心功能

- **学生管理**：支持学生信息的增删改查、启用/禁用、导入导出等操作
- **班级管理**：班级信息维护、班级状态管理、班级关联专业等功能
- **专业管理**：专业信息的管理和维护
- **教师管理**：教师信息管理、教师状态管理等功能
- **权限管理**：基于角色的权限控制系统（RBAC）
- **动态菜单**：基于权限的动态路由和菜单系统
- **主题切换**：支持多种主题切换
- **国际化支持**：内置完整的国际化解决方案
- **数据导入**：支持 Excel 文件导入功能
- **响应式设计**：完全响应式布局，支持各种设备

## 技术栈

- **前端框架**：Vue 3.5.13
- **UI 组件库**：Element Plus 2.9.2
- **编程语言**：TypeScript 5.7.3
- **构建工具**：Vite 6.0.7
- **包管理器**：pnpm 9.15.3
- **路由管理**：Vue Router 4.5.0
- **状态管理**：Pinia 2.3.0
- **HTTP 客户端**：Axios 1.7.9
- **数据可视化**：ECharts 5.6.0
- **国际化**：Vue i18n 11.0.1
- **工具库**：lodash-es, dayjs, qrcode 等

## 项目结构

```
src/
├── api/                    # API 接口定义
│   ├── student/           # 学生管理接口
│   ├── class/             # 班级管理接口
│   ├── teacher/           # 教师管理接口
│   └── major/             # 专业管理接口
├── views/                 # 页面视图
│   ├── Student/           # 学生管理页面
│   ├── Class/             # 班级管理页面
│   ├── Teacher/           # 教师管理页面
│   ├── Major/             # 专业管理页面
│   └── Authorization/     # 权限管理
├── components/            # 可复用组件
├── hooks/                 # 组合式函数钩子
├── store/                 # Pinia 状态管理
├── router/                # 路由配置
└── assets/                # 静态资源
```

## 主要模块功能

### 学生管理（Student）

- 查看学生列表（分页、搜索、排序）
- 新增学生
- 编辑学生信息
- 查看学生详情
- 删除学生
- 启用/禁用学生
- Excel 批量导入学生

### 班级管理（Class）

- 查看班级列表
- 新增班级
- 编辑班级信息
- 查看班级详情
- 删除班级
- 启用/禁用班级
- Excel 批量导入班级

### 教师管理（Teacher）

- 查看教师列表
- 新增教师
- 编辑教师信息
- 查看教师详情
- 删除教师
- 启用/禁用教师
- Excel 批量导入教师

### 专业管理（Major）

- 查看专业列表
- 新增专业
- 编辑专业信息
- 删除专业

## 前置要求

- **Node.js** >= 18.0.0 （[下载](http://nodejs.org/)）
- **pnpm** >= 8.1.0 （推荐使用 pnpm 作为包管理器）
- **Git** （[下载](https://git-scm.com/)）

## 快速开始

### 1. 克隆项目

```bash
git clone https://github.com/yuxingshi/vue-element-plus-admin.git
cd vue-element-plus-admin
```

### 2. 安装依赖

```bash
pnpm install
```

### 3. 启动开发服务器

```bash
pnpm run dev
```

访问 [http://localhost:5173](http://localhost:5173)

### 4. 构建生产版本

```bash
# 生产环境构建
pnpm run build:pro

# 开发环境构建
pnpm run build:dev

# 测试环境构建
pnpm run build:test
```

### 5. 预览生产构建

```bash
pnpm run serve:pro
```

## 可用的脚本命令

```bash
# 开发
pnpm run dev              # 启动开发服务器

# 构建
pnpm run build:pro        # 生产环境构建
pnpm run build:dev        # 开发环境构建
pnpm run build:test       # 测试环境构建
pnpm run build:gitee      # Gitee 构建

# 预览
pnpm run serve:pro        # 预览生产构建
pnpm run serve:dev        # 预览开发构建
pnpm run serve:test       # 预览测试构建

# 代码检查和格式化
pnpm run lint:eslint      # ESLint 检查和修复
pnpm run lint:format      # Prettier 代码格式化
pnpm run lint:style       # Stylelint 样式检查
pnpm run ts:check         # TypeScript 类型检查

# 其他
pnpm run icon             # 生成图标文件
pnpm run clean            # 清除 node_modules
pnpm run clean:cache      # 清除缓存
```

## API 文档

本项目已完全对接后端 API，主要包括以下端点：

### 学生管理 API

- `GET /api/student/list` - 获取学生列表
- `GET /api/student/:id` - 获取学生详情
- `POST /api/student/create` - 创建学生
- `PUT /api/student/update` - 更新学生信息
- `DELETE /api/student/:id` - 删除学生
- `POST /api/student/enable` - 启用学生
- `POST /api/student/disable` - 禁用学生
- `POST /api/student/import` - 导入学生数据

### 班级管理 API

- `GET /api/class/list` - 获取班级列表
- `GET /api/class/:id` - 获取班级详情
- `POST /api/class/create` - 创建班级
- `PUT /api/class/update` - 更新班级信息
- `DELETE /api/class/:id` - 删除班级
- `POST /api/class/enable` - 启用班级
- `POST /api/class/disable` - 禁用班级
- `POST /api/class/import` - 导入班级数据

### 教师管理 API

- `GET /api/teacher/list` - 获取教师列表
- `GET /api/teacher/:id` - 获取教师详情
- `POST /api/teacher/create` - 创建教师
- `PUT /api/teacher/update` - 更新教师信息
- `DELETE /api/teacher/:id` - 删除教师
- `POST /api/teacher/enable` - 启用教师
- `POST /api/teacher/disable` - 禁用教师
- `POST /api/teacher/import` - 导入教师数据

### 专业管理 API

- `GET /api/major/list` - 获取专业列表
- `GET /api/major/:id` - 获取专业详情
- `POST /api/major/create` - 创建专业
- `PUT /api/major/update` - 更新专业信息
- `DELETE /api/major/:id` - 删除专业

## 浏览器支持

本项目支持所有现代浏览器，不支持 IE 浏览器。

| 浏览器  |   版本要求    |
| :-----: | :-----------: |
| Chrome  | 最新 2 个版本 |
| Firefox | 最新 2 个版本 |
| Safari  | 最新 2 个版本 |
|  Edge   | 最新 2 个版本 |

## 贡献指南

我们欢迎所有的贡献！请按照以下步骤进行：

1. Fork 项目
2. 创建您的特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交您的更改 (`git commit -m 'feat: Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 打开一个 Pull Request

### Git 提交规范

遵循以下提交信息规范：

- `feat` - 新功能
- `fix` - 修复 bug
- `docs` - 文档更新
- `style` - 代码格式调整（不影响功能）
- `refactor` - 代码重构
- `perf` - 性能优化
- `test` - 添加测试
- `build` - 构建或依赖变更
- `ci` - CI/CD 配置变更
- `chore` - 其他杂项变更
- `revert` - 回滚提交

## 常见问题

### Q: 项目如何配置后端 API 地址？

A: 修改 `src/api` 目录下的环境配置文件，或者在 `.env` 文件中配置 `VITE_API_BASE_URL`。

### Q: 如何自定义主题色？

A: 通过 Element Plus 的主题配置系统进行自定义，详见项目的主题配置文件。

### Q: 支持哪些数据导入格式？

A: 目前支持 Excel 文件（.xlsx, .xls）的导入功能。