学生管理系统

基于 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）

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

前置要求

• Node.js >= 18.0.0 （下载）
• pnpm >= 8.1.0 （推荐使用 pnpm 作为包管理器）
• Git （下载）

快速开始

1. 克隆项目

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

2. 安装依赖

pnpm install

3. 启动开发服务器

pnpm run dev

访问 http://localhost:5173

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 个版本

贡献指南

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

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）的导入功能。