高校选课系统

高校选课系统

项目简介

这是一个完整的高校选课管理系统，采用前后端分离架构，实现了院系管理、专业管理、班级管理、学生管理、教师管理、课程管理、选课管理等核心功能。系统支持多角色（超级管理员、普通管理员、教师、学生）权限控制，适合作为Vue3全栈开发学习项目或计算机设计参考。

技术栈

后端技术

技术	版本/说明
运行环境	Node.js
Web框架	Express 4.16.1
数据库	MySQL 8.0+
数据库驱动	mysql / mysql2
身份认证	jsonwebtoken (JWT)
密码加密	bcryptjs
文件上传	multer
跨域处理	cors
环境变量	dotenv
热重载	nodemon

管理后台技术

技术	版本/说明
前端框架	Vue 3.5.13
构建工具	Vite 6.2.4
UI组件库	Element Plus 2.11.2
路由管理	Vue Router 4.5.0
状态管理	Pinia 3.0.1
HTTP请求	Axios 1.12.2
图表库	ECharts 6.0.0
日期处理	Day.js 1.11.18
3D渲染	Three.js 0.177.0
动画库	GSAP 3.13.0

项目特点

• 前后端分离：后端提供RESTful API，前端独立开发部署
• 多角色权限：支持超级管理员、普通管理员、教师、学生四种角色
• 动态菜单：基于角色的动态菜单权限控制
• 完整业务流程：涵盖院系、专业、班级、学生、教师、课程、选课全流程管理
• 数据可视化：管理后台集成ECharts图表展示
• 现代化技术栈：采用Vue3 + Vite + Element Plus最新技术

功能模块

系统管理

1. 首页仪表盘 (Dashboard.vue)

• 数据统计概览
• 图表展示

2. 角色管理 (system/RoleManagement.vue)

• 角色列表
• 新增/编辑/删除角色
• 角色权限配置

3. 账号管理 (system/AccountManagement.vue)

• 用户账号列表
• 新增/编辑/删除账号
• 账号状态管理
• 关联教师/学生

4. 菜单管理 (system/MenuManagement.vue)

• 菜单列表
• 新增/编辑/删除菜单
• 菜单权限分配

教务管理

5. 院系管理 (DepartmentManagement.vue)

• 院系列表
• 新增/编辑/删除院系
• 院系描述管理

6. 专业管理 (MajorManagement.vue)

• 专业列表
• 新增/编辑/删除专业
• 关联院系

7. 班级管理 (ClassManagement.vue)

• 班级列表
• 新增/编辑/删除班级
• 关联专业
• 学生人数统计

8. 学生管理 (StudentManagement.vue)

• 学生列表
• 新增/编辑/删除学生
• 学号管理
• 关联班级

9. 教师管理 (TeacherManagement.vue)

• 教师列表
• 新增/编辑/删除教师
• 工号管理
• 关联院系和课程

10. 课程管理 (CourseManagement.vue)

• 课程列表
• 新增/编辑/删除课程
• 课程代码管理
• 学分设置
• 关联授课教师

选课管理

11. 我的选课 (StudentCourseSelection.vue)

• 学生端选课功能
• 可选课程列表
• 已选课程查看
• 选课/退课操作
• 成绩查看

12. 课程学生列表 (TeacherCourseSelection.vue)

• 教师端查看选课学生
• 学生成绩录入
• 选课统计

项目结构

vue3-select-college-course/
├── admin/                          # 管理后台（Vue3 + Element Plus）
│   ├── public/                     # 静态资源
│   ├── src/
│   │   ├── api/                    # API接口封装
│   │   ├── assets/                 # 静态资源
│   │   ├── components/             # 公共组件
│   │   ├── router/                 # 路由配置
│   │   ├── store/                  # Pinia状态管理
│   │   ├── utils/                  # 工具函数
│   │   ├── views/                  # 页面视图
│   │   │   ├── system/             # 系统管理
│   │   │   │   ├── AccountManagement.vue   # 账号管理
│   │   │   │   ├── MenuManagement.vue      # 菜单管理
│   │   │   │   └── RoleManagement.vue      # 角色管理
│   │   │   ├── 404.vue                     # 404页面
│   │   │   ├── ClassManagement.vue         # 班级管理
│   │   │   ├── CourseManagement.vue        # 课程管理
│   │   │   ├── Dashboard.vue               # 首页仪表盘
│   │   │   ├── DepartmentManagement.vue    # 院系管理
│   │   │   ├── Home.vue                    # 主布局
│   │   │   ├── Login.vue                   # 登录页
│   │   │   ├── MajorManagement.vue         # 专业管理
│   │   │   ├── StudentCourseSelection.vue  # 学生选课
│   │   │   ├── StudentManagement.vue       # 学生管理
│   │   │   ├── TeacherCourseSelection.vue  # 教师查看选课
│   │   │   └── TeacherManagement.vue       # 教师管理
│   │   ├── App.vue                 # 根组件
│   │   └── main.js                 # 入口文件
│   ├── package.json
│   └── vite.config.js              # Vite配置
│
├── express/                        # 后端服务（Express + MySQL）
│   ├── bin/
│   │   └── www                     # 启动入口
│   ├── config/
│   │   ├── db.js                   # 数据库配置
│   │   └── index.js                # 全局配置
│   ├── controllers/                # 控制器
│   ├── public/
│   │   └── images/                 # 上传图片存储
│   ├── routes/
│   │   ├── sys/                    # 系统管理API
│   │   ├── class.js                # 班级接口
│   │   ├── course.js               # 课程接口
│   │   ├── courseSelection.js      # 选课接口
│   │   ├── department.js           # 院系接口
│   │   ├── index.js                # 路由入口
│   │   ├── major.js                # 专业接口
│   │   ├── student.js              # 学生接口
│   │   ├── teacher.js              # 教师接口
│   │   ├── total.js                # 统计接口
│   │   └── upload.js               # 文件上传
│   ├── services/                   # 业务逻辑层
│   ├── test/                       # 测试文件
│   │   └── api.test.js             # API测试
│   ├── util/
│   │   ├── index.js                # 工具函数
│   │   └── wechat.js               # 微信相关工具
│   ├── app.js                      # Express应用配置
│   └── package.json
│
├── college_course_system.sql       # 数据库SQL文件
├── 导入SQL步骤.md                   # 数据库导入说明
├── 模版.xlsx                        # 数据导入模板
├── 视频演示.mp4                     # 功能演示视频
└── 新 - 运行必读.docx              # 运行说明文档

数据模型

院系表 (department)

{
  id: bigint,                 // 院系ID
  name: varchar(100),         // 院系名称
  description: varchar(255)   // 院系描述
}

专业表 (major)

{
  id: bigint,                 // 专业ID
  dept_id: bigint,            // 所属院系ID
  name: varchar(100),         // 专业名称
  description: varchar(255)   // 专业描述
}

班级表 (class)

{
  id: bigint,                 // 班级ID
  major_id: bigint,           // 所属专业ID
  name: varchar(100),         // 班级名称
  student_count: int          // 学生人数
}

学生表 (student)

{
  id: bigint,                 // 学生ID
  student_id: varchar(20),    // 学号（唯一）
  name: varchar(50),          // 姓名
  class_id: bigint            // 班级ID
}

教师表 (teacher)

{
  id: bigint,                 // 教师ID
  teacher_id: varchar(20),    // 工号（唯一）
  name: varchar(50),          // 姓名
  dept_id: bigint,            // 所属院系ID
  course_id: int              // 课程ID
}

课程表 (course)

{
  id: bigint,                 // 课程ID
  course_id: varchar(20),     // 课程代码（唯一）
  name: varchar(100),         // 课程名称
  teacher_id: bigint,         // 授课教师ID
  credit: decimal(2,1)        // 学分
}

选课表 (course_selection)

{
  id: bigint,                 // 选课记录ID
  student_id: bigint,         // 学生ID
  course_id: bigint,          // 课程ID
  score: decimal(5,2),        // 成绩
  select_time: datetime,      // 选课时间
  score_update_time: datetime // 成绩更新时间
}

系统用户表 (sys_user)

{
  id: bigint,                 // 用户ID
  username: varchar(50),      // 用户名（唯一）
  password: varchar(255),     // 密码
  role_id: bigint,            // 角色ID
  status: tinyint,            // 状态（1启用 0禁用）
  teacher_id: bigint,         // 关联教师ID
  student_id: bigint,         // 关联学生ID
  role: int,                  // 系统级别（99内置）
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

系统角色表 (sys_role)

{
  id: bigint,                 // 角色ID
  name: varchar(50),          // 角色名称
  description: varchar(255),  // 角色描述
  role: int,                  // 系统级别
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

系统菜单表 (sys_menu)

{
  id: bigint,                 // 菜单ID
  parent_id: bigint,          // 父菜单ID（0表示一级菜单）
  title: varchar(50),         // 菜单名称
  path: varchar(255),         // 路由路径
  icon: varchar(50),          // 图标
  component: varchar(255),    // 前端组件路径
  order_num: int,             // 排序
  create_time: datetime,      // 创建时间
  update_time: datetime       // 更新时间
}

角色菜单关联表 (sys_role_menu)

{
  role_id: bigint,            // 角色ID
  menu_id: bigint             // 菜单ID
}

运行环境要求

后端环境

• Node.js 16.0+
• MySQL 8.0+
• npm 或 pnpm

管理后台

• Node.js 16.0+
• npm 或 pnpm
• 现代浏览器（Chrome、Firefox、Edge等）

快速开始

1. 数据库配置

1. 创建MySQL数据库

CREATE DATABASE college_course_system CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

2. 导入数据库文件

mysql -u root -p college_course_system < college_course_system.sql

3. 修改数据库配置 编辑 express/config/db.js：

var db = mysql.createConnection({
  database: 'college_course_system', // 数据库名称
  port: '3306', // 端口号
  host: 'localhost', // 主机地址
  user: 'root', // 用户名
  password: 'root', // 密码（修改为你的密码）
});

2. 启动后端服务

# 进入后端目录
cd express

# 安装依赖
npm install
# 或使用 pnpm
pnpm install

# 启动服务（开发模式）
npm run dev

后端服务默认运行在 http://localhost:5002

3. 启动管理后台

# 进入管理后台目录
cd admin

# 安装依赖
npm install
# 或使用 pnpm
pnpm install

# 启动开发服务器
npm run dev

管理后台默认运行在 http://localhost:5173

默认账号

角色	用户名	密码	说明
超级管理员	admin	123456	拥有所有权限
普通管理员	normal	123456	部分管理权限
教师	teacher	123456	教师权限，可查看选课学生
学生	student	123456	学生权限，可进行选课

预置测试数据

院系数据

院系名称	描述
计算机学院	计算机相关专业
电子信息学院	电子信息相关专业

专业数据

专业名称	所属院系	描述
计算机科学与技术	计算机学院	培养计算机领域人才
软件工程	计算机学院	培养软件开发人才

班级数据

班级名称	所属专业	学生人数
计科2021-1班	计算机科学与技术	30
计科2021-2班	计算机科学与技术	28

课程数据

课程代码	课程名称	学分
C001	数据结构	4.0
C002	操作系统	4.0

界面预览

项目包含演示视频文件：

• 视频演示.mp4 - 系统完整功能演示

扩展建议

如需进一步完善项目，可考虑以下扩展：

1. 选课时间控制：添加选课开始/结束时间配置
2. 课程容量限制：设置每门课程最大选课人数
3. 成绩统计分析：添加成绩分布图表、GPA计算
4. 课表生成：根据选课结果生成个人课表
5. 消息通知：选课结果、成绩发布通知
6. 数据导入导出：批量导入学生、教师数据
7. 日志审计：记录系统操作日志
8. 移动端适配：开发移动端选课界面

注意事项

1. 本项目为学习演示项目，部分数据为模拟数据
2. 生产环境部署需要配置HTTPS
3. 建议定期备份数据库数据
4. 密码存储建议使用bcrypt加密

常见问题

Q: 数据库连接失败？

A: 检查MySQL服务是否启动，数据库配置是否正确

Q: 登录后菜单不显示？

A: 检查用户角色是否正确配置菜单权限

Q: 选课功能无法使用？

A: 确认使用学生账号登录，且学生账号已关联学生信息

Q: 教师无法录入成绩？

A: 确认使用教师账号登录，且教师账号已关联教师信息

许可证

本项目仅供学习交流使用，请勿用于商业用途。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/vue3-select-college-course