You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
7.8 KiB
7.8 KiB
学生管理系统
基于 Vue3 + Element Plus + TypeScript + Vite 的现代化学生管理系统
项目简介
本项目是一个基于 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）
- 查看专业列表
- 新增专业
- 编辑专业信息
- 删除专业
前置要求
快速开始
1. 克隆项目
git clone https://github.com/yuxingshi/vue-element-plus-admin.git
cd vue-element-plus-admin
2. 安装依赖
pnpm install
3. 启动开发服务器
pnpm run dev
4. 构建生产版本
# 生产环境构建
pnpm run build:pro
# 开发环境构建
pnpm run build:dev
# 测试环境构建
pnpm run build:test
5. 预览生产构建
pnpm run serve:pro
可用的脚本命令
# 开发
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 个版本 |
贡献指南
我们欢迎所有的贡献！请按照以下步骤进行：
- Fork 项目
- 创建您的特性分支 (
git checkout -b feature/AmazingFeature) - 提交您的更改 (
git commit -m 'feat: Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开一个 Pull Request
Git 提交规范
遵循以下提交信息规范：
feat- 新功能fix- 修复 bugdocs- 文档更新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
更新日志
许可证
如有任何问题或建议，欢迎提出 Issue 或 Pull Request！