简介这是一套基于VueDjango双框架实现的Python教务管理系统源码面向高校计算机专业学生、Web全栈初学者及课程设计实践者解决传统教务场景中角色权限分离、数据协同管理与前后端交互开发的学习需求。资源包共122个文件涵盖25个Python后端逻辑文件含Django模型、视图与API接口、27个Vue组件文件支撑三端界面、17个JS工具脚本、15个JPG/PNG静态资源及多个CSV基础数据如course.csv、teacher.csv、score.csv等完整呈现真实业务数据初始化与模块化结构压缩包仅6.55MB轻量易部署。已有1053人学习下载提供管理员、教师、学生三端独立功能模块含用户认证、课程管理、成绩录入、课表查询等核心流程目录组织清晰配套README.md与LICENSE说明适合快速理解MVT架构与前后端分离开发范式。1. 项目概述一个现代教务系统的技术骨架最近在整理硬盘翻出来一个几年前参与重构的教务管理系统源码包文件名就是“Python教务管理系统源码使用了VueDjango框架.zip”。这让我想起了当时从老旧的PHP单体架构迁移到前后端分离模式的那段日子。教务系统听起来是个很传统的领域但它的技术选型和架构设计恰恰能反映出一个团队对现代Web开发的理解。这个项目不是一个玩具而是一个具备完整业务模块学生管理、课程排课、成绩录入、教师端、学生端等的、可直接部署或进行二次开发的基础框架。它核心的价值在于清晰地展示了如何用Django构建稳健、安全的后端API服务同时用Vue.js打造一个交互流畅、体验现代的前端管理界面两者通过RESTful API无缝协作。如果你正打算学习全栈开发或者团队需要快速搭建一个类似的管理系统原型这个技术栈组合和项目结构会是一个极佳的参考。2. 技术栈选型与架构设计思路2.1 为什么是Django Vue.js当时选择这个组合是基于几个非常实际的考量。首先教务系统的后端业务逻辑复杂涉及大量的数据关联学生-班级-课程-成绩、权限控制管理员、教师、学生角色和事务处理如选课冲突检查。Django作为Python领域“开箱即用”的旗舰框架其强大的ORM对象关系映射能让我们用Python类来定义数据模型极大地简化了数据库操作。它的Admin后台在开发初期也能快速搭建数据管理界面提升效率。更重要的是Django自带的安全机制如CSRF防护、SQL注入防护和清晰的MVTModel-View-Template模式为构建一个稳定、可维护的后端服务提供了坚实基础。而前端选择Vue.js则完全是出于提升用户体验和开发效率的考虑。传统的教务系统界面往往交互生硬每次操作都要整页刷新。Vue的响应式数据和组件化开发使得我们可以构建出单页面应用SPA。比如在成绩录入页面教师筛选班级后学生列表可以无刷新更新提交单科成绩时页面其他部分保持不动只有提交按钮区域有反馈。这种体验是质的飞跃。Vue的生态丰富Element UI或Ant Design Vue这类成熟的UI库能让我们快速搭建出专业的管理界面把主要精力放在业务逻辑而非样式调试上。这种前后端分离的架构让前后端团队可以并行开发通过API文档当时我们用了Swagger定义好接口契约即可。后端专注于数据和业务安全前端专注于交互和用户体验职责清晰耦合度低。2.2 项目整体架构解析解压那个ZIP包你会看到典型的两个根目录backend/Django项目和frontend/Vue项目。这是现代Web项目的标准物理分离方式。后端Backend结构backend/ ├── config/ # Django项目主配置目录settings.py, urls.py ├── apps/ # 自定义Django应用目录 │ ├── users/ # 用户认证、权限管理应用 │ ├── students/ # 学生信息管理应用 │ ├── courses/ # 课程与排课应用 │ └── scores/ # 成绩管理应用 ├── utils/ # 公共工具函数如权限检查装饰器、自定义响应格式 ├── manage.py └── requirements.txt # Python依赖清单Django提倡的“应用App”概念在这里得到很好体现。每个核心业务实体都是一个独立的应用这使得代码模块化程度高便于团队分工和维护。例如courses应用只关心课程、教学班、教室、时间片这些模型和与之相关的API视图。前端Frontend结构frontend/ ├── public/ ├── src/ │ ├── api/ # 封装所有对后端API的请求基于axios │ ├── assets/ # 静态资源 │ ├── components/ # 可复用的Vue组件如SearchBar, Pagination │ ├── router/ # Vue Router配置定义前端路由 │ ├── store/ # Vuex状态管理管理用户登录态、全局配置等 │ ├── views/ # 页面级Vue组件对应不同路由 │ │ ├── Login.vue │ │ ├── Dashboard.vue │ │ ├── StudentManagement.vue │ │ └── ... │ └── main.js # 应用入口文件 ├── package.json └── vue.config.js # Vue项目特定配置这个结构清晰地区分了数据请求层api/、状态管理层store/、路由层router/和视图层views/和components/。api目录下的文件会统一设置axios的请求基地址、超时时间、请求/响应拦截器用于自动添加JWT Token、统一处理错误等让业务组件无需关心网络请求细节。注意在项目初期一定要在vue.config.js中配置好开发服务器的代理devServer.proxy将/api开头的请求转发到Django后端如localhost:8000以解决开发时的跨域问题。这是前后端分离开发环境搭建的第一个关键点。3. 核心模块设计与实现细节3.1 用户认证与权限控制这是任何管理系统的基石。我们采用了JWTJSON Web Token作为无状态认证方案而不是Django默认的Session。原因在于前后端分离且可能部署在不同子域下JWT更合适。用户登录时后端users/views.py验证用户名密码后使用PyJWT库生成一个Token返回给前端。前端收到后将其存储在localStorage或Vuex中并在后续每次请求的HTTP Header通常是Authorization: Bearer token中携带。后端关键代码片段简化# apps/users/views.py from rest_framework.views import APIView from rest_framework.response import Response from django.contrib.auth import authenticate import jwt from datetime import datetime, timedelta from django.conf import settings class LoginView(APIView): authentication_classes [] # 登录接口本身不需要认证 permission_classes [] def post(self, request): username request.data.get(username) password request.data.get(password) user authenticate(usernameusername, passwordpassword) if user is not None and user.is_active: # 生成JWT payload { user_id: user.id, username: user.username, role: user.role, # 自定义的用户角色字段 exp: datetime.utcnow() timedelta(hours24), # 过期时间 iat: datetime.utcnow() } token jwt.encode(payload, settings.SECRET_KEY, algorithmHS256) return Response({code: 200, message: 登录成功, token: token, user: {name: user.name}}) else: return Response({code: 401, message: 用户名或密码错误}, status401)权限控制则在两个层面实现API层面后端使用Django REST framework的permission_classes。我们编写了自定义的权限类如IsAdminUser、IsTeacher、IsStudentOrTeacher。在视图类中指定Django REST framework会在请求到达视图逻辑前自动校验。# utils/permissions.py from rest_framework import permissions class IsTeacher(permissions.BasePermission): def has_permission(self, request, view): return request.user and request.user.is_authenticated and request.user.role teacher # apps/scores/views.py class ScoreInputView(APIView): permission_classes [permissions.IsAuthenticated, IsTeacher] # 必须登录且是教师角色 def post(self, request): # 只有老师能执行成绩录入 ...UI层面前端根据登录后从JWT解析出的用户角色动态渲染菜单和操作按钮。在Vue Router的全局前置守卫中也可以进行路由级别的权限校验防止学生角色直接通过URL访问教师管理页面。实操心得JWT的SECRET_KEY必须严格保密且足够复杂。Token的过期时间不宜过长我们设为24小时并应考虑实现Token刷新机制。前端在存储Token时虽然localStorage方便但存在XSS风险可考虑Vuex配合vuex-persistedstate但页面刷新后状态会丢失。对于高安全要求场景需要仔细权衡或采用HttpOnly Cookie需处理跨域。3.2 数据模型设计与ORM实践教务系统的核心是数据之间的关系。Django的ORM让我们能用面向对象的方式设计这些关系。一个简化的模型示例courses/models.pyfrom django.db import models from apps.users.models import User # 自定义用户模型 class Course(models.Model): 课程基本信息 course_id models.CharField(max_length20, uniqueTrue, verbose_name课程编号) name models.CharField(max_length100, verbose_name课程名称) credit models.FloatField(verbose_name学分) description models.TextField(blankTrue, verbose_name课程描述) class TeachingClass(models.Model): 教学班一个课程在特定学期的具体开班 course models.ForeignKey(Course, on_deletemodels.CASCADE, related_nameclasses) semester models.CharField(max_length20, verbose_name学期) # 如“2023-2024-1” teacher models.ForeignKey(User, on_deletemodels.SET_NULL, nullTrue, limit_choices_to{role: teacher}, related_nameteaching_classes) capacity models.IntegerField(verbose_name容量) # 排课信息这里简化实际可能关联到更复杂的TimeSlot和Room模型 time_slot models.CharField(max_length50, verbose_name上课时间) # 如“周一 1-2节” classroom models.CharField(max_length50, verbose_name教室) class Meta: unique_together [course, semester, time_slot, classroom] # 防止同一时间地点重复排课 class Enrollment(models.Model): 选课记录学生与教学班的关联 student models.ForeignKey(User, on_deletemodels.CASCADE, limit_choices_to{role: student}, related_nameenrollments) teaching_class models.ForeignKey(TeachingClass, on_deletemodels.CASCADE, related_nameenrollments) enrolled_at models.DateTimeField(auto_now_addTrue, verbose_name选课时间) # 成绩字段可以放在这里也可以独立成Score模型。我们选择独立更规范。 class Meta: unique_together [student, teaching_class] # 一个学生在一个教学班只能选一次关键设计点外键与related_nameForeignkey建立了模型间的关联。related_name参数非常重要它定义了从关联模型反向查询时的名称。例如通过一个student对象可以用student.enrollments.all()获取他所有的选课记录。unique_together数据库层面的唯一约束确保数据一致性。比如防止学生重复选同一门课防止教室时间冲突。limit_choices_to在Django Admin或某些ModelForm中可以限制外键可选的范围提升用户体验和数据准确性。注意事项数据库查询的N1问题。当你遍历TeachingClass列表并在模板或序列化器中访问每个teaching_class.teacher.name时如果不做优化Django会为每个教学班单独发一条SQL查询教师信息。务必使用select_related用于外键和一对一关系和prefetch_related用于多对多和反向外键关系进行优化。# 糟糕的查询 classes TeachingClass.objects.all() for c in classes: print(c.teacher.name) # 每次循环都查询数据库 # 优化后的查询 classes TeachingClass.objects.select_related(teacher).all() for c in classes: print(c.teacher.name) # 只发起一次联合查询3.3 前后端数据交互与API设计我们遵循RESTful风格设计API但这不意味着死板地遵循所有约束而是以资源为中心保持接口清晰。典型的API端点示例GET /api/students/- 获取学生列表可分页、过滤、搜索POST /api/students/- 创建新学生GET /api/students/{id}/- 获取指定学生详情PUT /api/students/{id}/- 更新指定学生信息DELETE /api/students/{id}/- 删除学生GET /api/teaching-classes/{id}/enrollments/- 获取某个教学班的所有选课学生序列化器Serializer是Django REST framework的核心组件负责将模型实例转换为JSON序列化以及将JSON数据验证并转换为模型实例反序列化。# apps/students/serializers.py from rest_framework import serializers from apps.users.models import User class StudentSerializer(serializers.ModelSerializer): # 可以添加只读字段或自定义字段 college_name serializers.CharField(sourcecollege.name, read_onlyTrue) class Meta: model User # 假设学生信息扩展自User模型 fields [id, username, name, gender, college_name, major, enrollment_year, phone] read_only_fields [username] # 用户名创建后不可修改 extra_kwargs { phone: {required: False} # 电话非必填 } # 自定义验证逻辑 def validate_phone(self, value): if value and not re.match(r^1[3-9]\d{9}$, value): raise serializers.ValidationError(手机号码格式不正确) return value前端API调用封装src/api/student.jsimport request from /utils/request // 这是基于axios封装的通用请求函数 export function getStudentList(params) { // params可能包含 page, pageSize, name (搜索), major等 return request({ url: /api/students/, method: get, params }) } export function createStudent(data) { return request({ url: /api/students/, method: post, data }) } export function updateStudent(id, data) { return request({ url: /api/students/${id}/, method: put, data }) } export function deleteStudent(id) { return request({ url: /api/students/${id}/, method: delete }) }在Vue组件中使用template div el-table :datastudentList !-- 表格列 -- /el-table el-pagination current-changehandlePageChange :totaltotal/el-pagination /div /template script import { getStudentList } from /api/student export default { data() { return { studentList: [], total: 0, listQuery: { page: 1, pageSize: 20, name: } } }, created() { this.fetchData() }, methods: { async fetchData() { try { const response await getStudentList(this.listQuery) this.studentList response.data.results // 假设后端返回分页结果在results字段 this.total response.data.count } catch (error) { console.error(获取学生列表失败:, error) this.$message.error(数据加载失败) } }, handlePageChange(page) { this.listQuery.page page this.fetchData() } } } /script实操心得前后端要提前约定好统一的数据响应格式。我们通常采用{ code: 200, message: ‘成功’, data: { … } }或{ code: 200, message: ‘成功’, data: { results: […], count: 100 } }用于分页列表的格式。这样前端可以统一在axios的响应拦截器里处理业务错误如code ! 200和网络异常。分页、过滤、排序的参数名也要事先约定好比如page、page_size、search、ordering等。4. 典型业务功能实现剖析4.1 课程排课与冲突检测排课是教务系统最复杂的业务之一。我们实现了一个相对简化的版本核心是冲突检测。后端逻辑courses/services/schedule_service.pydef check_schedule_conflict(teacher_id, classroom_id, time_slot_str, semester, exclude_class_idNone): 检查排课冲突 :param teacher_id: 教师ID :param classroom_id: 教室ID :param time_slot_str: 时间片字符串如 Mon-1-2 (周一1-2节) :param semester: 学期 :param exclude_class_id: 排除的教学班ID用于更新操作 :return: (is_conflict, conflict_reason) from apps.courses.models import TeachingClass conflicts [] # 1. 检查教师时间冲突 teacher_classes TeachingClass.objects.filter( teacher_idteacher_id, semestersemester, time_slottime_slot_str ) if exclude_class_id: teacher_classes teacher_classes.exclude(idexclude_class_id) if teacher_classes.exists(): conflicts.append(f教师在该时间段已有教学任务) # 2. 检查教室占用冲突 room_classes TeachingClass.objects.filter( classroom_idclassroom_id, semestersemester, time_slottime_slot_str ) if exclude_class_id: room_classes room_classes.exclude(idexclude_class_id) if room_classes.exists(): conflicts.append(f教室在该时间段已被占用) # 3. 更复杂的冲突同一课程同一学期同一教师是否已开课可选 # ... if conflicts: return True, ; .join(conflicts) return False, None在创建或更新TeachingClass的API视图中调用此服务函数进行校验如果冲突则返回错误信息给前端。前端实现则是在排课表单提交前可以增加一个“预检”按钮调用一个专门的预检接口或者直接在表单提交时由后端返回详细冲突信息前端用友好的方式如ElMessageBox展示给教务员。4.2 学生选课与容量控制学生选课逻辑需要处理1. 教学班容量是否已满2. 学生是否已选该课程同一课程不同教学班可能不允许重复选3. 时间冲突可选更复杂。后端选课视图courses/views.pyclass EnrollmentView(APIView): permission_classes [IsAuthenticated, IsStudent] # 只有学生能选课 def post(self, request): student request.user teaching_class_id request.data.get(teaching_class_id) try: teaching_class TeachingClass.objects.get(idteaching_class_id) except TeachingClass.DoesNotExist: return Response({code: 404, message: 教学班不存在}, status404) # 1. 检查容量 current_enrollments teaching_class.enrollments.count() if current_enrollments teaching_class.capacity: return Response({code: 400, message: 该教学班已满员}, status400) # 2. 检查是否已选同一课程不同教学班 same_course_classes TeachingClass.objects.filter( courseteaching_class.course, semesterteaching_class.semester ) already_enrolled Enrollment.objects.filter( studentstudent, teaching_class__insame_course_classes ).exists() if already_enrolled: return Response({code: 400, message: 您已选修该课程的其他教学班}, status400) # 3. 检查时间冲突简化版对比time_slot字符串 student_enrollments Enrollment.objects.filter( studentstudent, teaching_class__semesterteaching_class.semester ).select_related(teaching_class) for en in student_enrollments: if en.teaching_class.time_slot teaching_class.time_slot: return Response({code: 400, message: f与已选课程《{en.teaching_class.course.name}》时间冲突}, status400) # 4. 创建选课记录 enrollment Enrollment.objects.create(studentstudent, teaching_classteaching_class) serializer EnrollmentSerializer(enrollment) return Response({code: 200, message: 选课成功, data: serializer.data})这里使用了数据库事务transaction.atomic来确保在并发选课时容量检查和创建记录是一个原子操作防止超选。Django的ORM在创建对象时默认已经是事务性的但在高并发场景下可能需要更精细的锁控制如select_for_update。4.3 成绩批量录入与导入导出成绩管理是教师端的高频操作。我们提供了两种方式单条/批量页面录入和Excel模板导入。批量页面录入前端通常是一个表格每一行是一个学生和一个成绩输入框。提交时前端将数组形式的数据[{student_id: 1, score: 90}, ...]发送到后端。后端API需要循环处理并可能涉及事务确保要么全部成功要么全部失败。Excel导入则更高效。我们提供了一个下载模板的功能模板包含学生学号、姓名等列。教师填写后上传后端使用pandas或openpyxl库解析Excel文件。后端导入视图关键部分import pandas as pd from django.db import transaction class ScoreImportView(APIView): permission_classes [IsAuthenticated, IsTeacher] def post(self, request): teaching_class_id request.data.get(teaching_class_id) excel_file request.FILES.get(file) if not excel_file: return Response({code: 400, message: 未上传文件}, status400) try: # 1. 读取Excel df pd.read_excel(excel_file, dtype{学号: str}) # 注意学号可能是字符串 success_count 0 error_rows [] # 2. 开启事务 with transaction.atomic(): teaching_class TeachingClass.objects.get(idteaching_class_id) for index, row in df.iterrows(): student_id_str row.get(学号) score_value row.get(成绩) # 3. 数据校验 if pd.isna(student_id_str) or pd.isna(score_value): error_rows.append(f第{index2}行数据不完整) continue try: student User.objects.get(usernamestudent_id_str, rolestudent) except User.DoesNotExist: error_rows.append(f第{index2}行学号{student_id_str}不存在) continue # 检查该学生是否在本教学班 if not Enrollment.objects.filter(studentstudent, teaching_classteaching_class).exists(): error_rows.append(f第{index2}行学生{student.name}未选此课) continue # 4. 创建或更新成绩 score_obj, created Score.objects.update_or_create( studentstudent, teaching_classteaching_class, defaults{score: float(score_value)} ) success_count 1 # 5. 返回结果 message f成功导入{success_count}条成绩。 if error_rows: message f 失败{len(error_rows)}条详情 ; .join(error_rows[:5]) # 只返回前5条错误 return Response({code: 200, message: message}) except Exception as e: return Response({code: 500, message: f文件处理失败: {str(e)}}, status500)导出功能则反过来使用Django REST framework的Response配合openpyxl或pandas的to_excel方法设置正确的Content-Typeapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet和Content-Disposition头部将数据流直接返回给前端下载。注意事项文件上传要配置好Django的MEDIA_ROOT和MEDIA_URL。导入逻辑一定要做好异常捕获和详细的数据校验空值、格式、业务逻辑并给用户清晰的错误反馈。大文件导入要考虑性能可能需要使用异步任务Celery。5. 部署与运维要点5.1 开发环境与生产环境配置分离这是项目从开发走向部署的第一步。Django的settings.py通常通过环境变量来区分环境。settings.py头部import os from pathlib import Path import environ # 初始化环境变量 env environ.Env( DEBUG(bool, False) ) environ.Env.read_env(os.path.join(BASE_DIR, .env)) # 从.env文件读取 # 关键配置从环境变量获取 DEBUG env(DEBUG) SECRET_KEY env(SECRET_KEY) ALLOWED_HOSTS env.list(ALLOWED_HOSTS, default[localhost]) # 数据库配置 DATABASES { default: env.db(DATABASE_URL, defaultsqlite:///db.sqlite3) } # 静态文件配置 STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, staticfiles) # 生产环境收集静态文件到此然后创建两个环境文件.env.development不提交到Git和.env.production通过CI/CD或运维工具注入到服务器。.env.development示例DEBUGTrue SECRET_KEYyour-dev-secret-key-here ALLOWED_HOSTSlocalhost,127.0.0.1 DATABASE_URLsqlite:///db.sqlite3.env.production示例DEBUGFalse SECRET_KEYyour-strong-production-secret-key-from-secure-vault ALLOWED_HOSTSyourdomain.com,www.yourdomain.com DATABASE_URLpostgres://user:passworddb-host:5432/dbname5.2 前端构建与静态文件服务在开发环境Vue使用自己的开发服务器并通过代理连接Django后端。但在生产环境我们需要构建Vue项目并将其静态文件整合到Django中或由Web服务器如Nginx直接服务。构建前端在frontend目录下运行npm run buildVue CLI或pnpm buildVite。这会在frontend/dist目录生成优化后的静态文件HTML, JS, CSS。配置Django服务静态文件将frontend/dist/index.html复制到Django的某个模板目录如backend/templates/frontend/。将frontend/dist/下的所有静态文件JS, CSS, 图片复制到Django的静态文件目录如backend/static/frontend/。在Django的根URL配置中添加一个捕获所有前端路由的视图使其返回index.html让Vue Router接管前端路由。# backend/config/urls.py from django.urls import path, re_path from django.views.generic import TemplateView from django.contrib import admin from django.conf import settings from django.conf.urls.static import static urlpatterns [ path(admin/, admin.site.urls), path(api/, include(apps.users.urls)), path(api/, include(apps.courses.urls)), # ... 其他API路由 # 最后捕获所有非API请求交给前端处理 re_path(r^(?!api/|admin/|static/|media/).*$, TemplateView.as_view(template_namefrontend/index.html), namefrontend), ] static(settings.MEDIA_URL, document_rootsettings.MEDIA_ROOT)使用Nginx推荐更常见的做法是用Nginx作为反向代理和静态文件服务器。Nginx直接服务frontend/dist下的文件并将/api/开头的请求转发给后端的Gunicorn/UvicornDjango应用服务器。这样性能更好配置也更清晰。# nginx配置片段 server { listen 80; server_name yourdomain.com; # 前端静态文件 location / { root /path/to/your/frontend/dist; try_files $uri $uri/ /index.html; } # 后端API代理 location /api/ { proxy_pass http://127.0.0.1:8000; # Gunicorn运行地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 静态文件如果Django负责 location /static/ { alias /path/to/your/backend/staticfiles/; } location /media/ { alias /path/to/your/backend/media/; } }5.3 后端服务部署与性能考量应用服务器Django自带的runserver仅用于开发。生产环境使用GunicornWSGI服务器或UvicornASGI服务器如果使用异步视图。通常配合Nginx作为反向代理。# 使用Gunicorn启动假设在backend目录下 gunicorn config.wsgi:application -w 4 -b 0.0.0.0:8000-w 4表示启动4个工作进程根据服务器CPU核心数调整。数据库开发可以用SQLite生产务必使用PostgreSQL或MySQL。它们更稳定、功能更强、并发性能更好。记得在Django中配置连接池如django-db-connections以减少连接开销。缓存对于不常变化但频繁访问的数据如课程列表、公告使用缓存能极大提升性能。Django支持多种缓存后端如Redis或Memcached。# settings.py CACHES { default: { BACKEND: django_redis.cache.RedisCache, LOCATION: env(REDIS_URL, defaultredis://127.0.0.1:6379/1), OPTIONS: { CLIENT_CLASS: django_redis.client.DefaultClient, } } }在视图或API中可以使用cache_page装饰器或底层的cache.set/cache.get。异步任务像发送选课成功邮件、处理大型Excel导入导出、生成复杂报表这类耗时操作应该交给异步任务队列如Celery避免阻塞HTTP请求。Celery配合Redis或RabbitMQ作为消息代理。安全性SECRET_KEY必须使用强随机字符串且生产环境绝不能硬编码在代码中。DEBUG生产环境务必设为False。ALLOWED_HOSTS正确配置允许访问的域名。HTTPS使用Nginx配置SSL证书强制HTTPS。CORS如果前后端完全分离部署在不同域名需要配置Django的django-cors-headers中间件精确设置CORS_ALLOWED_ORIGINS而不是允许所有来源(*)。6. 常见问题排查与优化建议6.1 跨域问题CORS这是前后端分离开发中最常见的问题。浏览器会阻止前端JavaScript访问不同源协议、域名、端口任一不同的后端API。解决方案开发环境在Vue的vue.config.js中配置代理。module.exports { devServer: { proxy: { /api: { target: http://localhost:8000, // Django后端地址 changeOrigin: true, } } } }生产环境如果前后端同域由Nginx统一服务则没有跨域问题。如果不同域必须在Django后端安装并配置django-cors-headers。# settings.py INSTALLED_APPS [ # ... corsheaders, ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # 尽量放在最前 # ... ] # 允许前端域名 CORS_ALLOWED_ORIGINS [ https://your-frontend-domain.com, http://localhost:8080, # 开发环境 ] # 如果前端需要传递认证信息如Cookie Authorization头 CORS_ALLOW_CREDENTIALS True6.2 静态文件404生产环境Django在生产环境DEBUGFalse下不服务静态文件。你需要运行python manage.py collectstatic命令将各app下的静态文件和前端构建的静态文件收集到STATIC_ROOT目录然后通过Nginx或CDN来服务这个目录。6.3 数据库性能问题症状页面加载慢API响应时间长。排查使用Django Debug Toolbar仅用于开发或类似django-silk的工具分析SQL查询。查看是否有N1查询问题。优化善用select_related和prefetch_related。为频繁查询的字段添加数据库索引。对复杂、耗时的列表查询使用分页Django REST framework有PageNumberPagination等。考虑使用只读从库分担查询压力大型系统。6.4 前端路由刷新404History模式Vue Router默认使用hash模式URL中有#切换为History模式更美观。但当你直接访问一个前端路由如/student-management或刷新页面时如果服务器没有正确配置会返回404。解决方案如5.2节所述需要在Web服务器Nginx或Django中配置将所有非静态文件、非API的请求重定向到前端入口文件index.html。6.5 文件上传大小限制默认情况下Django和Nginx对上传文件大小都有限制。Django在settings.py中设置DATA_UPLOAD_MAX_MEMORY_SIZE默认2.5MB和FILE_UPLOAD_MAX_MEMORY_SIZE。Nginx在配置文件中设置client_max_body_size例如client_max_body_size 50M;。6.6 时区问题Django中时区设置不当可能导致存储和显示的时间不一致。settings.pyTIME_ZONE Asia/Shanghai # 根据实际情况修改 USE_TZ True # 推荐设置为True使用带时区的时间在代码中处理时间时使用django.utils.timezone.now()而不是datetime.datetime.now()。数据库中的时间以UTC存储在展示时Django会根据TIME_ZONE和用户时区如果支持自动转换。这个“Python教务管理系统源码”项目就像一套精心设计的乐高积木。Django提供了坚实、规整的基础砖块模型、视图、路由、安全而Vue则提供了灵活、多彩的装饰砖块组件、响应式、路由。将它们组合起来的关键在于清晰定义前后端交互的“接口说明书”API文档和稳定的“粘合剂”网络请求库与状态管理。从解压ZIP包到最终部署上线每一步踩过的坑都是对全栈开发理解的加深。希望这份基于实际项目经验的拆解能帮你更顺畅地搭建起属于自己的应用骨架。本文还有配套的精品资源点击获取
