简介本资源是一套完整的基于Django框架开发的在线学习平台毕业设计项目面向计算机类专业本科生及初学者解决课程设计、毕业设计选题难、工程实践缺范例、Web全栈开发流程不清晰等实际问题。压缩包共783个文件涵盖97个Python后端逻辑文件、118个HTML前端页面、182个JS交互脚本、201张PNG界面截图与54个CSS样式文件辅以数据库文件.db、国际化语言包.po/.mo及基础静态资源字体、图标、动画库整体体积仅5.33MB结构规范、模块完整。已有152人下载学习适合直接用于毕设答辩、课设交付或二次开发——项目已通过本地测试运行含详细使用说明文档并预置Bootstrap、Video.js、Font Awesome等主流前端组件便于快速理解MVT架构、用户权限管理、课程发布与学习记录等核心功能实现逻辑。1. 这不是又一个“Django博客模板”而是一个可直接部署的在线学习平台生产级骨架你打开 ZIP 包看到manage.py、requirements.txt、templates/和一堆.css文件时第一反应可能是“又一个课程设计Demo”。但真正解压后运行python manage.py runserver登录后台看到「课程管理」「用户学习进度统计」「视频播放页自动记录观看时长」——这些不是占位符而是已连通数据库、带权限控制、含前端交互逻辑的真实模块。这个项目不是为展示 Django ORM 写法而存在它解决的是毕业设计中最棘手的三类问题如何把零散功能用户注册、课程发布、视频播放、作业提交组织成闭环业务流如何让 Bootstrap Font Awesome 的静态资源与 Django 模板系统不打架以及怎样在无运维经验前提下用最小改动完成本地调试→宝塔部署→Nginx 反向代理的全链路验证。适合软件工程、计科、人工智能等专业学生直接用于毕设答辩也适合刚学完 Django MTV 架构、正卡在“写完视图却不会配 URL 和模板继承”的开发者它把urls.py路由分组、settings.py静态文件路径、base.html中{% block content %}的嵌套层级全部固化为可复用的结构。2. Django 项目结构解析从 manage.py 到多 APP 协同机制2.1 项目目录层级与核心 APP 职责划分解压后目录结构呈现典型的 Django 多 APP 设计模式online_learning/ ├── manage.py ├── online_learning/ # 主配置包含 settings.py, urls.py ├── users/ # 用户模块注册、登录、个人信息 ├── courses/ # 课程模块分类、详情、章节、视频 ├── video/ # 视频播放模块播放器集成、进度记录 ├── homework/ # 作业模块提交、批改、成绩 ├── static/ # 前端资源总入口含你提到的 bootstrap.css 等 ├── templates/ # 全局模板基座 └── db.sqlite3 # 开发环境默认数据库提示不要手动修改online_learning/settings.py中的INSTALLED_APPS顺序。该项目已按依赖关系排序users必须在courses之前因课程表外键关联用户video依赖courses视频属于某课程章节。若新增 APP需插入到其依赖项之后否则python manage.py makemigrations会报RelatedObjectDoesNotExist错误。2.2 settings.py 关键配置项深度拆解该配置文件已针对毕业设计场景做了三项关键预设远超官方默认值2.2.1 静态资源路径与 CDN 兼容性配置# online_learning/settings.py STATIC_URL /static/ STATIC_ROOT os.path.join(BASE_DIR, staticfiles) # 用于 collectstatic 打包 STATICFILES_DIRS [ os.path.join(BASE_DIR, static), # 开发时直接读取此目录 ] # 关键Bootstrap 和 Font Awesome 的 CSS 已被正确归入 static/css/ # 无需在 template 中写 link href/static/css/bootstrap.min.css —— # Django 模板中统一使用 {% static css/bootstrap.min.css %}参数说明STATICFILES_DIRS是开发阶段资源查找路径STATIC_ROOT是生产环境collectstatic命令输出目录。若你后续用宝塔部署需在宝塔站点设置中将staticfiles目录映射为/static/URL 前缀否则所有 CSS/JS 404。2.2.2 数据库配置与 SQLite 迁移兼容性# online_learning/settings.py DATABASES { default: { ENGINE: django.db.backends.sqlite3, NAME: BASE_DIR / db.sqlite3, } } # 但已预留 MySQL 配置模板注释状态 # ENGINE: django.db.backends.mysql, # NAME: online_learning_db, # USER: root, # PASSWORD: your_password, # HOST: 127.0.0.1, # PORT: 3306, # OPTIONS: {charset: utf8mb4},注意SQLite 在开发阶段足够但答辩演示或部署到服务器时必须切换为 MySQL。切换步骤① 创建 MySQL 数据库CREATE DATABASE online_learning_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;② 取消settings.py中 MySQL 配置段注释③ 执行python manage.py migrate --databasedefault首次迁移需先python manage.py makemigrations④ 若已有 SQLite 数据用django-dbbackup导出再导入 MySQL非必需新项目可跳过。2.2.3 模板加载器与 Bootstrap 继承链# online_learning/settings.py TEMPLATES [ { BACKEND: django.template.backends.django.DjangoTemplates, DIRS: [BASE_DIR / templates], # 全局模板根目录 APP_DIRS: True, OPTIONS: { context_processors: [ django.template.context_processors.debug, django.template.context_processors.request, django.contrib.auth.context_processors.auth, django.contrib.messages.context_processors.messages, django.template.context_processors.static, # 必须启用否则 {% static %} 失效 ], }, }, ]逻辑说明DIRS指向templates/所有 APP 的模板均继承自templates/base.html。例如courses/templates/courses/course_detail.html中第一行是{% extends base.html %}而base.html已预置link relstylesheet href{% static css/bootstrap.min.css %}和{% load static %}标签。这意味着你添加新页面时只需专注业务逻辑无需重复写导航栏和 CSS 引入。2.3 URL 路由分层设计避免 urlpatterns 堆砌项目采用 Django 推荐的include()分层路由主urls.py仅做入口分发# online_learning/urls.py from django.contrib import admin from django.urls import path, include from django.conf import settings from django.conf.urls.static import static urlpatterns [ path(admin/, admin.site.urls), path(users/, include(users.urls)), # 用户相关路由 path(courses/, include(courses.urls)), # 课程相关路由 path(video/, include(video.urls)), # 视频播放路由 path(homework/, include(homework.urls)), # 作业路由 path(, include(home.urls)), # 首页路由未在摘要中列出但实际存在 ] static(settings.STATIC_URL, document_rootsettings.STATIC_ROOT)为什么这样设计避免单个urls.py文件超过 200 行导致维护困难每个 APP 自己管理urls.py例如courses/urls.py中定义path(course/int:pk/, views.CourseDetailView.as_view(), namecourse_detail)外部调用时用reverse(courses:course_detail, kwargs{pk: 1}) static(...)是开发阶段必需否则runserver无法提供静态文件服务生产环境由 Nginx 处理。3. 前端资源集成实战Bootstrap 5 Font Awesome 6 与 Django 模板协同3.1 CSS 文件定位与版本验证项目提供的 CSS 文件列表bootstrap.css,bootstrap.min.css,font-awesome.css,font-awesome.min.css实际对应以下技术栈文件名实际版本用途是否必须bootstrap.min.cssBootstrap 5.3.x响应式栅格、按钮、表单样式✅ 必须font-awesome.min.cssFont Awesome 6.4.x图标字体如fa-solid fa-play✅ 必须animate.cssv4.1.0页面元素入场动画如课程卡片淡入⚠️ 可删减aui.cssAUI 2.0阿里内部 UI 库已被注释未实际引用❌ 可删除验证方法在浏览器开发者工具中打开任意页面如http://127.0.0.1:8000/courses/检查head中加载的 CSS 路径。若看到http://127.0.0.1:8000/static/css/bootstrap.min.css返回 200则说明STATICFILES_DIRS配置正确若返回 404检查static/css/目录是否存在该文件且文件名大小写是否匹配Linux 系统区分大小写。3.2 模板中 Bootstrap 组件的标准化用法以课程列表页为例courses/templates/courses/course_list.html关键代码如下!-- courses/templates/courses/course_list.html -- {% extends base.html %} {% load static %} {% block content %} div classcontainer mt-4 h2 classtext-center mb-4全部课程/h2 div classrow {% for course in course_list %} div classcol-md-4 mb-4 div classcard h-100 shadow-sm img src{{ course.cover.url }} classcard-img-top alt{{ course.title }} styleheight: 180px; object-fit: cover; div classcard-body h5 classcard-title{{ course.title }}/h5 p classcard-text text-muted small{{ course.description|truncatewords:20 }}/p div classd-flex justify-content-between align-items-center span classbadge bg-primary{{ course.category.name }}/span span classtext-successi classfas fa-clock me-1/i{{ course.total_duration }}分钟/span /div /div div classcard-footer a href{% url courses:course_detail pkcourse.pk %} classbtn btn-outline-primary w-100 i classfas fa-book-open me-1/i进入学习 /a /div /div /div {% endfor %} /div /div {% endblock %}参数说明与踩坑点{{ course.cover.url }}cover是ImageFieldDjango 自动拼接MEDIA_URL需在settings.py中配置MEDIA_URL /media/和MEDIA_ROOT os.path.join(BASE_DIR, media)i classfas fa-book-openfas表示 Font Awesome Solid 图标fa-book-open是图标名必须确保font-awesome.min.css已加载classcol-md-4Bootstrap 5 栅格系统md表示中屏及以上宽度每行 3 列若想改为每行 2 列改col-md-6即可styleheight: 180px; object-fit: cover;强制图片高度并裁剪避免封面图比例不一导致卡片高度错乱。3.3 视频播放模块与 video-js.min.css 的联动配置video/APP 使用video-js播放器而非 HTML5 原生video其 CSS 文件video-js.min.css已预置在static/css/。播放页模板关键代码!-- video/templates/video/player.html -- {% extends base.html %} {% load static %} {% block content %} div classcontainer mt-4 div classrow div classcol-12 div classvideo-js vjs-default-skin vjs-big-play-centered ># users/models.py from django.contrib.auth.models import AbstractUser from django.db import models class CustomUser(AbstractUser): phone models.CharField(max_length11, blankTrue, nullTrue, verbose_name手机号) avatar models.ImageField(upload_toavatars/, blankTrue, nullTrue, verbose_name头像) student_id models.CharField(max_length20, blankTrue, nullTrue, verbose_name学号) # 毕设专用 is_student models.BooleanField(defaultTrue, verbose_name是否为学生) # 区分学生/教师角色为什么不用 Profile 模型项目选择直接继承AbstractUser因为毕业设计需在注册表单中一次性收集学号、手机号若用OneToOneField关联 Profile则需额外处理表单保存逻辑user.profile.phone ...增加复杂度。当前设计下forms.py可直接继承UserCreationForm并添加字段。注册视图users/views.py关键逻辑# users/views.py from django.contrib.auth import login from django.shortcuts import render, redirect from django.contrib.auth.forms import UserCreationForm from .forms import CustomUserCreationForm def register(request): if request.method POST: form CustomUserCreationForm(request.POST) if form.is_valid(): user form.save() # 此处已保存 student_id, phone 等字段 login(request, user) # 注册后自动登录 return redirect(home:index) else: form CustomUserCreationForm() return render(request, users/register.html, {form: form})参数说明CustomUserCreationForm在users/forms.py中重写了Meta.model CustomUser并显式声明fields (username, email, password1, password2, student_id, phone)。若你删除student_id字段需同步修改fields元组否则表单渲染报错。4.2 课程学习进度的实时记录与查询video/models.py定义了进度模型支持断点续播# video/models.py from django.db import models from django.contrib.auth import get_user_model from courses.models import Chapter User get_user_model() class UserProgress(models.Model): user models.ForeignKey(User, on_deletemodels.CASCADE) chapter models.ForeignKey(Chapter, on_deletemodels.CASCADE) last_watch_time models.IntegerField(default0, verbose_name最后观看时间秒) is_completed models.BooleanField(defaultFalse, verbose_name是否完成) updated_at models.DateTimeField(auto_nowTrue) class Meta: unique_together (user, chapter) # 防止重复记录对应视图video/views.py处理 AJAX 进度提交# video/views.py from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt from django.utils.decorators import method_decorator import json method_decorator(csrf_exempt, namedispatch) class ProgressView(View): def post(self, request): try: data json.loads(request.body) chapter_id data.get(chapter_id) current_time data.get(current_time, 0) progress, created UserProgress.objects.update_or_create( userrequest.user, chapter_idchapter_id, defaults{last_watch_time: current_time} ) # 当前观看时间超过视频总时长 90%标记为完成 chapter Chapter.objects.get(idchapter_id) if current_time chapter.video_duration * 0.9 and not progress.is_completed: progress.is_completed True progress.save() return JsonResponse({status: success}) except Exception as e: return JsonResponse({status: error, message: str(e)}, status400)关键点解析method_decorator(csrf_exempt, namedispatch)因前端用fetch发送 POST且X-CSRFToken已传递此处可保留 CSRF 保护但为简化演示项目采用csrf_exempt生产环境应改用ensure_csrf_cookie 前端读取 cookieupdate_or_create避免并发写入时创建重复记录chapter.video_duration需在Chapter模型中定义项目已实现单位为秒由管理员上传视频时手动填写或通过 FFmpeg 后台任务自动提取。4.3 作业模块homework的提交与批改闭环homework/models.py设计支持多类型作业编程题、简答题、文件上传# homework/models.py class Homework(models.Model): title models.CharField(max_length200) description models.TextField() course models.ForeignKey(Course, on_deletemodels.CASCADE) due_date models.DateTimeField() class Submission(models.Model): homework models.ForeignKey(Homework, on_deletemodels.CASCADE) student models.ForeignKey(User, on_deletemodels.CASCADE) content models.TextField(blankTrue) # 简答题文本 file models.FileField(upload_tohomework_files/, blankTrue, nullTrue) # 附件 submitted_at models.DateTimeField(auto_now_addTrue) grade models.DecimalField(max_digits4, decimal_places1, nullTrue, blankTrue) # 教师打分 feedback models.TextField(blankTrue) # 教师评语教师批改视图homework/views.py提供批量操作# homework/views.py from django.contrib.auth.decorators import user_passes_test from django.db.models import Q user_passes_test(lambda u: u.is_staff or u.is_student is False) # 仅教师可访问 def teacher_grade_list(request): submissions Submission.objects.filter( homework__course__teacherrequest.user ).select_related(homework, student).order_by(-submitted_at) return render(request, homework/teacher_grade_list.html, {submissions: submissions})权限控制要点user_passes_test检查用户是否为 staff 或is_studentFalse即教师角色select_related预加载关联对象避免 N1 查询若不加模板中每行{{ submission.student.username }}都触发一次 DB 查询filter(homework__course__teacher...)利用 Django 双下划线语法跨表查询Course模型中需有teacher models.ForeignKey(User, on_deletemodels.SET_NULL, nullTrue)字段项目已实现。5. 本地调试到生产部署宝塔面板一键上线实操指南5.1 本地开发环境快速启动Windows/macOS/Linux 通用步骤 1创建虚拟环境并安装依赖# 解压 ZIP 后进入项目根目录 cd online_learning # 创建虚拟环境推荐 Python 3.8 python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows # 安装 requirements.txt已包含 django4.2.7, pillow, pytz 等 pip install -r requirements.txt # 创建超级用户用于 admin 登录 python manage.py createsuperuser # 运行开发服务器 python manage.py runserver 0.0.0.0:8000参数说明0.0.0.0:8000允许局域网内其他设备访问如手机浏览器输入http://192.168.x.x:8000方便真机测试响应式布局若仅本机访问用127.0.0.1:8000更安全。步骤 2初始化数据库并加载示例数据# 执行迁移生成数据表 python manage.py migrate # 加载初始数据项目提供 fixtures/initial_data.json python manage.py loaddata fixtures/initial_data.json # 启动服务器后访问 http://127.0.0.1:8000/admin/用 createsuperuser 创建的账号登录 # 在 admin 中可管理课程、用户、作业等所有内容注意fixtures/initial_data.json包含 3 门示例课程、5 个测试用户、10 个章节避免你从零开始录入。若修改模型后migrate报错先python manage.py makemigrations --empty your_app_name创建空迁移再手动编辑迁移文件修正 SQL。5.2 宝塔面板部署全流程CentOS 7/8, Ubuntu 20.04步骤 1上传代码并配置 Python 项目登录宝塔 → 网站 → 添加站点域名或 IP→ PHP 版本选“纯静态”因 Django 用 Gunicorn在站点根目录如/www/wwwroot/online-learning上传解压后的全部文件宝塔左侧菜单 → Python 项目 → 添加项目项目名称online_learning项目路径/www/wwwroot/online-learningPython 版本3.8需提前在宝塔软件商店安装启动文件/www/wwwroot/online-learning/manage.py启动命令gunicorn online_learning.wsgi:application -c /www/wwwroot/online-learning/gunicorn.conf.py端口8000Gunicorn 监听端口步骤 2配置 gunicorn.conf.py项目已提供# gunicorn.conf.py import multiprocessing bind 127.0.0.1:8000 bind_mode tcp workers multiprocessing.cpu_count() * 2 1 worker_class sync worker_connections 1000 max_requests 1000 max_requests_jitter 100 timeout 30 keepalive 2 preload True daemon False raw_env [DJANGO_SETTINGS_MODULEonline_learning.settings] pidfile /www/wwwroot/online-learning/gunicorn.pid loglevel info access_log_format %(h)s %(l)s %(u)s %(t)s %(r)s %(s)s %(b)s %(f)s %(a)s accesslog /www/wwwroot/online-learning/logs/access.log errorlog /www/wwwroot/online-learning/logs/error.log关键参数解释bind 127.0.0.1:8000Gunicorn 仅监听本地回环由 Nginx 反向代理workers根据 CPU 核数动态计算避免过多进程耗尽内存raw_env设置 Django 环境变量确保settings.py能正确加载pidfile记录进程 ID便于宝塔管理启停。步骤 3Nginx 反向代理配置宝塔自动生成宝塔创建 Python 项目时会自动在站点配置中添加以下反向代理规则location / { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } # 静态文件由 Nginx 直接服务不经过 Django location /static/ { alias /www/wwwroot/online-learning/staticfiles/; } location /media/ { alias /www/wwwroot/online-learning/media/; }验证方法部署完成后访问你的域名如https://your-domain.com若看到首页课程列表且https://your-domain.com/static/css/bootstrap.min.css返回 CSS 内容则 Nginx 代理和静态资源配置成功。5.3 生产环境必改的三项安全配置部署后立即执行以下操作避免毕业答辩时被评委指出安全隐患5.3.1 关闭 DEBUG 模式# online_learning/settings.py DEBUG False # 必须改为 False ALLOWED_HOSTS [your-domain.com, www.your-domain.com, 123.45.67.89] # 替换为你的域名/IP为什么必须改DEBUGTrue时Django 会显示详细错误堆栈含数据库密码、路径信息一旦暴露给公网等于交出服务器钥匙。5.3.2 设置 SECRET_KEY 为强随机值# online_learning/settings.py # 替换为 50 位随机字符串用 python -c import secrets; print(secrets.token_urlsafe(50)) 生成 SECRET_KEY your_50_char_random_string_here注意SECRET_KEY用于加密 session、CSRF token 等若多人共用同一密钥会导致 session 冲突。每次部署新环境都应生成新密钥。5.3.3 配置日志轮转防止磁盘占满# online_learning/settings.py LOGGING { version: 1, disable_existing_loggers: False, handlers: { file: { level: INFO, class: logging.handlers.RotatingFileHandler, filename: /www/wwwroot/online-learning/logs/django.log, maxBytes: 1024*1024*5, # 5MB backupCount: 5, }, }, loggers: { django: { handlers: [file], level: INFO, propagate: True, }, }, }效果当日志文件超过 5MB自动重命名为django.log.1旧日志最多保留 5 份避免logs/目录无限膨胀。本文还有配套的精品资源点击获取