Python+Django+Vue 学生管理系统：从零到部署的完整设计与实现

温馨提示本人主页置顶文章(点我)开头有 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 核心数据表设计系统共设计五张核心业务表用户表、学生表、教师表、班级表、课程表、成绩表。下面给出关键字段设计。表名核心字段说明Userusername、password、role复用 Django 内置用户扩展角色字段Studentstudent_no、name、gender、class_id关联用户表与班级表Teacherteacher_no、name、title关联用户表Classclass_name、grade、major班级基础信息Coursecourse_name、credit、teacher_id课程与授课教师关联Scorestudent_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_deletemodels.CASCADE) student_no models.CharField(max_length20, uniqueTrue) name models.CharField(max_length50) gender models.CharField(max_length10, choices[(M, 男), (F, 女)]) class_name models.ForeignKey(ClassInfo, on_deletemodels.SET_NULL, nullTrue) def __str__(self): return f{self.student_no} - {self.name} class ClassInfo(models.Model): class_name models.CharField(max_length50) grade models.CharField(max_length20) major models.CharField(max_length50) class Course(models.Model): course_name models.CharField(max_length100) credit models.FloatField() teacher models.ForeignKey(Teacher, on_deletemodels.SET_NULL, nullTrue) class Score(models.Model): student models.ForeignKey(Student, on_deletemodels.CASCADE) course models.ForeignKey(Course, on_deletemodels.CASCADE) score models.DecimalField(max_digits5, decimal_places2) 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.pyINSTALLED_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 vuelatest 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 :datastudents border stripe el-table-column propstudent_no label学号 / el-table-column propname label姓名 / el-table-column propgender label性别 / el-table-column propclass_name label班级 / el-table-column label操作 template #default{ row } el-button typeprimary sizesmall clickeditStudent(row)编辑/el-button el-button typedanger sizesmall clickdeleteStudent(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) /script6. 权限控制与角色管理系统通过 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 开发、前端页面搭建、权限控制和部署上线等核心环节。读者可以在此基础上继续扩展选课管理、考勤管理、数据可视化等高级功能。