|
|
<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）的导入功能。
|
|
|
|
|
|
## 项目成员
|
|
|
|
|
|
- **开发者**：yuxingshi
|
|
|
- **框架基础**：[vue-element-plus-admin](https://github.com/kailong321200875/vue-element-plus-admin)
|
|
|
|
|
|
## 更新日志
|
|
|
|
|
|
[CHANGELOG](./CHANGELOG.md)
|
|
|
|
|
|
## 许可证
|
|
|
|
|
|
[MIT](./LICENSE)
|
|
|
|
|
|
---
|
|
|
|
|
|
**如有任何问题或建议，欢迎提出 Issue 或 Pull Request！**
|