温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！
1. 项目背景与需求分析
学生管理系统是高校教务、班级管理中最常见的业务系统之一。本文将以 Python + Django + Vue 为技术栈，从需求分析、系统设计、前后端开发到部署上线，完整讲解一个学生管理系统的设计与实现过程。
系统核心目标是实现对学生信息、班级信息、课程信息、成绩信息的统一管理，支持管理员、教师、学生三类角色的差异化操作权限。
2. 技术选型与架构设计
2.1 技术栈说明
| 层次 | 技术选型 | 说明 |
|---|---|---|
| 后端框架 | Django 4.x | 提供 REST API 与 ORM 数据模型 |
| API 方案 | Django REST Framework | 快速构建标准 RESTful 接口 |
| 前端框架 | Vue 3 + Vite | 组件化开发，配合 Element Plus 组件库 |
| 数据库 | MySQL 8.0 | 存储业务数据，支持事务与索引优化 |
| 认证方案 | JWT | 基于 Token 的无状态身份认证 |
2.2 系统架构
系统采用前后端分离架构，前端 Vue 应用通过 Axios 调用后端 Django REST API，后端通过 JWT 完成身份校验，数据统一存储在 MySQL 中。
flowchart TD A[Vue 3 前端] -->|Axios / JWT| B[Django REST API] B --> C[ORM 模型层] C --> D[(MySQL 数据库)] B --> E[权限控制] E --> F[管理员 / 教师 / 学生]3. 数据库设计与模型实现
3.1 核心数据表设计
系统共设计五张核心业务表：用户表、学生表、教师表、班级表、课程表、成绩表。下面给出关键字段设计。
| 表名 | 核心字段 | 说明 |
|---|---|---|
| User | username、password、role | 复用 Django 内置用户，扩展角色字段 |
| Student | student_no、name、gender、class_id | 关联用户表与班级表 |
| Teacher | teacher_no、name、title | 关联用户表 |
| Class | class_name、grade、major | 班级基础信息 |
| Course | course_name、credit、teacher_id | 课程与授课教师关联 |
| Score | student_id、course_id、score | 学生选课成绩记录 |
3.2 Django 模型代码
from django.db import models from django.contrib.auth.models import User class Student(models.Model): user = models.OneToOneField(User, on_delete=models.CASCADE) student_no = models.CharField(max_length=20, unique=True) name = models.CharField(max_length=50) gender = models.CharField(max_length=10, choices=[('M', '男'), ('F', '女')]) class_name = models.ForeignKey('ClassInfo', on_delete=models.SET_NULL, null=True) def __str__(self): return f"{self.student_no} - {self.name}" class ClassInfo(models.Model): class_name = models.CharField(max_length=50) grade = models.CharField(max_length=20) major = models.CharField(max_length=50) class Course(models.Model): course_name = models.CharField(max_length=100) credit = models.FloatField() teacher = models.ForeignKey('Teacher', on_delete=models.SET_NULL, null=True) class Score(models.Model): student = models.ForeignKey(Student, on_delete=models.CASCADE) course = models.ForeignKey(Course, on_delete=models.CASCADE) score = models.DecimalField(max_digits=5, decimal_places=2) class Meta: unique_together = ('student', 'course')4. 后端 API 设计与实现
4.1 项目初始化
# 创建虚拟环境 python -m venv venv source venv/bin/activate 安装依赖 pip install django djangorestframework djangorestframework-simplejwt django-cors-headers 创建项目与应用 django-admin startproject student_system cd student_system python manage.py startapp students4.2 配置 settings.py
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'corsheaders', 'students', ] MIDDLEWARE = [ 'corsheaders.middleware.CorsMiddleware', 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] CORS_ALLOW_ALL_ORIGINS = True REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_simplejwt.authentication.JWTAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), }4.3 序列化器与视图
from rest_framework import serializers, viewsets from .models import Student, ClassInfo, Course, Score class StudentSerializer(serializers.ModelSerializer): class Meta: model = Student fields = 'all' class StudentViewSet(viewsets.ModelViewSet): queryset = Student.objects.all() serializer_class = StudentSerializer4.4 路由配置
from django.urls import path, include from rest_framework.routers import DefaultRouter from students.views import StudentViewSet router = DefaultRouter() router.register('students', StudentViewSet) urlpatterns = [ path('api/', include(router.urls)), path('api/token/', TokenObtainPairView.as_view()), ]5. 前端 Vue 项目搭建
5.1 创建 Vue 项目
npm create vue@latest student-web cd student-web npm install npm install axios element-plus vue-router pinia5.2 封装 Axios 请求
import axios from 'axios' const request = axios.create({ baseURL: 'http://localhost:8000/api', timeout: 10000 }) request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = Bearer ${token} } return config }) export default request5.3 学生列表页面
<template> <el-table :data="students" border stripe> <el-table-column prop="student_no" label="学号" /> <el-table-column prop="name" label="姓名" /> <el-table-column prop="gender" label="性别" /> <el-table-column prop="class_name" label="班级" /> <el-table-column label="操作"> <template #default="{ row }"> <el-button type="primary" size="small" @click="editStudent(row)">编辑</el-button> <el-button type="danger" size="small" @click="deleteStudent(row)">删除</el-button> </template> </el-table-column> </el-table> </template> <script setup> import { ref, onMounted } from 'vue' import request from '../utils/request' const students = ref([]) const fetchStudents = async () => { const res = await request.get('/students/') students.value = res.data } onMounted(fetchStudents) </script>6. 权限控制与角色管理
系统通过 JWT 中的角色字段实现权限控制。管理员可以管理全部数据，教师可以录入和查看成绩，学生只能查看自己的信息。
from rest_framework.permissions import BasePermission class IsAdminOrTeacher(BasePermission): def has_permission(self, request, view): role = getattr(request.user, 'role', None) return role in ['admin', 'teacher']7. 系统部署与上线
7.1 后端部署
# 收集静态文件 python manage.py collectstatic 使用 Gunicorn 启动 gunicorn student_system.wsgi:application --bind 0.0.0.0:80007.2 前端部署
npm run build # 将 dist 目录部署到 Nginx8. 总结
本文完整实现了基于 Python + Django + Vue 的学生管理系统，覆盖了需求分析、数据库设计、后端 API 开发、前端页面搭建、权限控制和部署上线等核心环节。读者可以在此基础上继续扩展选课管理、考勤管理、数据可视化等高级功能。
