1. 项目概述从零开始搭一个精品课程网站先把这个项目说清楚。标题里“python-flask精品课程网站设计Pycharm vue django”这几个关键词放在一起基本上可以判断出这就是一个前后端分离的在线教育类Web项目后端用Python系框架Flask或Django任选前端用Vue开发环境用PyCharm业务场景是“精品课程”的展示、播放和管理。我在技术社区里经常看到这类项目十有八九是课程设计、毕业设计或者是想转行做Web开发的人拿来练手的综合实战项目。它的覆盖面很广——既能锻炼Python后端的API设计能力又能练到Vue前端组件化开发还涉及到数据库建模、视频流播放、权限控制这类真实业务中绕不开的技术点。本文我按照实际动手做过这类项目的经验把从环境搭建到功能实现再到上线部署的完整链路都捋一遍顺便把Flask和Django这对“冤家”怎么选、PyCharm里怎么配置才顺手这些坑也一并填上。适合谁来参考说实话覆盖面挺宽的在校学生需要交课设/毕设想找个功能完整、技术栈主流的项目参考。Python后端初学者已经看完基础语法想通过实际项目理解Web框架、RESTful API、ORM这些概念。前端想补后端知识的朋友Vue写得差不多了想自己搭一套后端API搞清楚联调是怎么回事。想快速上线一个内容展示类网站的人比如培训机构要做一个课程宣传页在线试听功能这套架构完全够用。2. 技术选型与整体架构Flask还是Django这是个问题2.1 为什么标题里同时出现Flask和Django很多人看到标题就懵了到底是Flask还是Django我的判断是——这是一个“二选一”的项目而不是“两者并用”的项目。同时写两个后端框架没有实际意义反而会把项目复杂度抬高一截。这两者在Python Web开发里是最主流的两个选择但定位完全不同对比项FlaskDjango定位微框架轻量灵活全功能框架全家桶学习曲线平缓容易上手较陡概念多ORMSQLAlchemy需自行集成自带Django ORMAdmin后台需自己写或用扩展自带admin开箱即用适合场景小型项目、API服务、快速原型中大型项目、内容管理类系统社区生态扩展丰富按需组合一体化方案成熟回到这个项目本身。“精品课程网站”的核心功能无非是课程列表、课程详情、视频播放、用户登录、后台管理课程内容的增删改查。这类CMS味道很重的项目用Django其实是更省力的——自带Admin后台和ORM管理课程内容几乎不用额外写代码。但为什么很多人最终还是选了Flask因为学习价值更高。用Flask你被迫去理解路由、请求上下文、ORM配置、蓝图模块化这些东西而不是像Django那样“约定优于配置”很多东西被框架替你做了反而学不到底层原理。我的建议很直接如果是毕设/课设优先选Django开发效率高后台管理功能白拿。如果是练手学技术选Flask把每个零件都自己装一遍理解得更深。本文后面我会兼顾讲核心逻辑两边通用。2.2 整体架构设计前后端分离还是服务端渲染“精品课程网站”这个项目在架构上有两条路可以走方案A前后端分离Vue 后端APIVue负责页面渲染通过axios调用后端接口拿数据。后端只写API返回JSON。优点前后端职责清晰Vue生态丰富以后扩展App端可以直接复用API。缺点开发链路长要处理跨域CORS、Token认证等问题。方案B服务端渲染后端模板 Bootstrap后端直接返回HTML页面用Jinja2/DTL模板语法渲染数据。优点简单直接一个Flask应用搞定一切不用处理跨域。缺点前端交互能力弱复杂页面写起来痛苦。标题里既然出现了Vue那就说明这是一个前后端分离的项目。这也是目前行业的主流做法——前端工程化和后端服务化已经是标配。我实测下来前后端分离在学习阶段会多踩几个坑跨域、路由、构建配置但把这些坑踩完你对整个Web开发体系的认知会上一个台阶。项目目录结构我建议这样规划course_website/ # 项目根目录 ├── backend/ # 后端代码 │ ├── app.py # Flask/Django入口 │ ├── models.py # 数据模型 │ ├── api/ # 蓝图/视图目录 │ │ ├── course.py # 课程相关接口 │ │ ├── auth.py # 登录注册接口 │ │ └── user.py # 用户中心接口 │ ├── requirements.txt # 依赖列表 │ └── config.py # 配置文件 ├── frontend/ # 前端Vue工程 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 通用组件 │ │ ├── router/ # 路由配置 │ │ └── api/ # axios请求封装 │ ├── package.json │ └── vue.config.js └── README.md2.3 数据库设计课程网站的核心表结构不管用Flask还是Django数据库模型设计的思路是通用的。一个精品课程网站核心业务实体就这几个用户、课程分类、课程、课程章节、视频资源、学习记录。以课程和用户为核心表结构设计如下用户表usersid主键username用户名password_hash密码哈希role用户角色普通用户/管理员created_at注册时间课程分类表categoriesid、name、sort_order课程表coursesid、title、subtitle课程标题和副标题cover_url封面图category_id所属分类teacher授课老师price价格精品课一般不是免费的status上下架状态description课程介绍章节表chaptersid、course_id所属课程title章节标题sort_order排序权重视频表videosid、chapter_id所属章节title、video_url、duration学习记录表enrollmentsid、user_id、course_id、progress、updated_at这里有一个设计细节很多人会忽略为什么把章节和视频拆成两张表因为一个课程下有多个章节一个章节下可能有多个视频比如讲理论一个视频、讲实操一个视频如果都塞在课程表里用逗号分隔ID后面做学习进度跟踪会非常痛苦。宁可多建一张表也不要贪图省事。3. 前端Vue项目搭建从环境配置到目录初始化3.1 Node.js和Vue CLI安装的坑与解法Pycharm安装教程、Vue安装及环境配置这类问题在热搜词里出现频率很高我就知道这块是新手重灾区。首先明确你要跑Vue项目必须先装Node.js。Vue本身是一个JavaScript框架而Node.js是JavaScript的运行时环境npm是Node自带的包管理器三者关系相当于Python、解释器和pip。Node.js安装要点去官网下载LTS版本长期支持版别追最新版稳定性优先。安装路径不要带空格和中文否则后面装依赖容易出幺蛾子。安装完成后打开终端输入node -v和npm -v验证。如果提示“不是内部或外部命令”说明环境变量没配上手动把Node.js安装目录加到PATH里。Vue CLI安装Vue CLI是官方提供的脚手架工具类似Python里的django-admin。npm install -g vue/cli国内网络环境下npm默认源下载速度可能不太理想建议先切换淘宝镜像npm config set registry https://registry.npmmirror.com创建Vue项目vue create course-frontend这里有个选择项——Vue 2还是Vue 3我的建议是直接用Vue 3。Vue 3的Composition API写起来更灵活性能更好而且现在新项目基本都是Vue 3Vue 2在2023年底已经停止维护了没必要学旧技术。创建完成后cd course-frontend npm run serve浏览器访问http://localhost:8080能看到Vue的默认欢迎页就说明环境OK了。3.2 安装vue-router和axios路由与请求的基础项目要支持页面跳转和接口调用这两个依赖是标配npm install vue-router4 npm install axios路由配置示例src/router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import CourseDetail from ../views/CourseDetail.vue import Login from ../views/Login.vue const routes [ { path: /, name: Home, component: Home }, { path: /course/:id, name: CourseDetail, component: CourseDetail }, { path: /login, name: Login, component: Login } ] const router createRouter({ history: createWebHistory(), routes }) export default router这里面的核心知识点是路由参数。比如/course/:id这个路径id就是路由参数我们在页面组件里可以用route.params.id拿到课程ID然后带着这个ID去请求课程详情接口。热搜词里有“vue路由参数”这个知识点在课程详情页是必备技能。axios建议做一层统一封装src/api/request.jsimport axios from axios const request axios.create({ baseURL: http://127.0.0.1:5000/api, timeout: 10000 }) // 请求拦截器自动带上token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) export default request3.3 视频播放功能M3U8格式的处理方案热搜词里有个很有意思的关键词——“vue播放m3u8”。课程网站的视频资源如果要做防盗链、支持拖动进度条精准定位、码率自适应业界标准方案就是用HLS协议视频文件被切片成一堆.ts小文件然后用一个.m3u8索引文件去描述播放顺序。Vue播放这类视频最省事的方案是用video.js加videojs-contrib-hls插件或者用hls.js这个库。用hls.js的方式import Hls from hls.js export function playVideo(videoElement, videoUrl) { if (videoElement.canPlayType(application/vnd.apple.mpegurl)) { // Safari原生支持HLS videoElement.src videoUrl } else if (Hls.isSupported()) { // 其他浏览器用hls.js const hls new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoElement) } }这里要特别注意后端返回视频地址时一定要处理好跨域问题。M3U8分片请求跨域的话视频是播放不了的需要在后端设置CORS响应头这一点我后面在联调部分会详细说。4. 后端API开发Flask与Django双版本实操4.1 Flask版本用蓝图构建模块化APIFlask的开发流程我按实际的步骤拆解。先安装依赖pip install flask flask-cors flask-sqlalchemy flask-jwt-extended这几个库分别是Web框架、跨域处理、数据库ORM、JWT认证。创建app.py基础配置from flask import Flask from flask_cors import CORS from flask_sqlalchemy import SQLAlchemy from flask_jwt_extended import JWTManager app Flask(__name__) app.config[SQLALCHEMY_DATABASE_URI] sqlite:///course.db app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False app.config[JWT_SECRET_KEY] your-secret-key CORS(app) # 允许跨域 db SQLAlchemy(app) jwt JWTManager(app)注意CORS(app)这一行没有它前端Vue永远调不通接口浏览器控制台会报“blocked by CORS policy”。这是因为前后端分离后前端跑在8080端口后端跑在5000端口两者端口不同就属于跨域请求浏览器默认会拦截。flask-cors就是在响应头里加Access-Control-Allow-Origin告诉浏览器“这个跨域请求我允许”。课程列表接口from flask import jsonify, request from models import Course, db app.route(/api/courses, methods[GET]) def get_courses(): 获取课程列表支持按分类筛选 category_id request.args.get(category_id, typeint) query Course.query.filter_by(statuspublished) if category_id: query query.filter_by(category_idcategory_id) courses query.order_by(Course.created_at.desc()).all() return jsonify([{ id: c.id, title: c.title, cover_url: c.cover_url, teacher: c.teacher, price: c.price } for c in courses])这里有几个基础但重要的点查询参数通过request.args.get()获取类型用typeint强制转换避免前端传来字符串导致比较时出问题。只返回需要字段不要直接把ORM对象jsonify出去因为里面可能包含不需要的字段而且ORM对象序列化也不方便。查询结果排序用order_by(created_at.desc())保证新发布的课程排在前面。4.2 Django版本admin后台让你少写一半代码如果你选Django创建项目的命令略有不同django-admin startproject course_website cd course_website python manage.py startapp course在settings.py里注册应用并配置数据库。开发阶段直接用默认的SQLite就行零配置一个文件搞定。Django最香的地方是它的Admin后台。在course/admin.py里注册模型from django.contrib import admin from .models import Course, Chapter, Video admin.register(Course) class CourseAdmin(admin.ModelAdmin): list_display (title, teacher, price, status) list_filter (status, category) search_fields (title,)然后创建管理员账号python manage.py createsuperuser启动服务后访问/admin登录进去就能直接在后台录入课程信息不用写一行代码就拥有一个完整的后台管理系统。对于课程网站这种对内容管理要求高的项目这个功能能省出大把时间。Django的视图函数写法from django.http import JsonResponse from .models import Course def course_list(request): courses Course.objects.filter(statuspublished) data [{ id: c.id, title: c.title, cover_url: c.cover_url, price: str(c.price) } for c in courses] return JsonResponse({data: data, code: 0})然后在urls.py里配置路由from django.urls import path from . import views urlpatterns [ path(api/courses, views.course_list), ]4.3 登录认证JWT是怎么保护你的课程接口的课程网站不是所有内容都免费开放付费课程的视频接口必须做权限校验。业界主流方案是JWTJSON Web Token。JWT的流程是这样的用户输入用户名密码POST到/api/login。后端验证账号密码验证通过就用密钥生成一个Token返回给前端。前端把Token存到localStorage里。前端请求需要登录的接口时在请求头Authorization里带上Token。后端检查Token合法就放行不合法就返回401。用Flask实现这个逻辑from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity app.route(/api/login, methods[POST]) def login(): data request.get_json() user User.query.filter_by(usernamedata[username]).first() if user and user.check_password(data[password]): token create_access_token(identitystr(user.id)) return jsonify({token: token, username: user.username}) return jsonify({msg: 用户名或密码错误}), 401 app.route(/api/user/profile, methods[GET]) jwt_required() def profile(): user_id get_jwt_identity() user User.query.get(user_id) return jsonify({username: user.username, email: user.email})关于密码存储必须多说一句——绝对不允许明文存密码。用werkzeug.security提供的generate_password_hash生成哈希再入库校验时用check_password_hash。即使数据库泄露攻击者拿到的也是哈希值无法反推原始密码。5. 前后端联调从跨域报错到数据打通5.1 Vue项目里是如何调用后端接口的后端API写完了前端怎么调我见过太多新手在这一步卡住。完整流程是这样的在Vue项目里以课程列表页为例在src/views/Home.vue中template div classcourse-list div classcourse-card v-forcourse in courses :keycourse.id img :srccourse.cover_url alt课程封面 h3{{ course.title }}/h3 p讲师{{ course.teacher }}/p p classprice{{ course.price }}/p router-link :to/course/${course.id}查看详情/router-link /div /div /template script setup import { ref, onMounted } from vue import request from ../api/request const courses ref([]) onMounted(async () { const resp await request.get(/courses) courses.value resp.data }) /script这里有一个非常容易踩的坑axios返回的数据结构。axios默认返回的是一个AxiosResponse对象真实的数据在resp.data里而data里面才是后端返回的JSON。如果你后端返回的是{data: [...]}这种套娃结构那么要取到课程列表就得写resp.data.data。建议后端统一返回格式{code: 0, msg: success, data: [...]}前端再封装一层把每次处理的逻辑统一掉就不会乱。5.2 视频接口的权限校验与防盗链课程视频是核心资产不能让人白嫖。视频接口的权限校验在后端要这样处理app.route(/api/video/int:video_id, methods[GET]) jwt_required() def get_video(video_id): 获取视频播放地址需要登录 video Video.query.get(video_id) if not video: return jsonify({msg: 视频不存在}), 404 # 检查当前用户是否购买了该课程 user_id get_jwt_identity() enrollment Enrollment.query.filter_by( user_iduser_id, course_idvideo.chapter.course_id ).first() if not enrollment: return jsonify({msg: 请先购买课程}), 403 return jsonify({video_url: video.video_url})前端在请求这个接口时由于axios拦截器里已经自动带了Authorization头所以用户登录后就能正常拿到视频地址。清掉localStorage里的Token再试就会收到403或401视频加载不出来——这个效果就是权限控制在做功。5.3 开发期跨域配置Vue CLI代理除了用flask-cors另一种处理跨域的方式是通过Vue CLI的代理功能“曲线救国”。在vue.config.js里加这样一段配置module.exports { devServer: { proxy: { /api: { target: http://127.0.0.1:5000, changeOrigin: true } } } }这个方案的本质是浏览器没有跨域问题了。因为浏览器请求的是同源的8080端口也就是Vue开发服务器Vue开发服务器在服务端转发这个请求到5000端口。服务端之间的请求不受浏览器同源策略限制所以数据能顺利回来。这样配置的好处是前端代码里写的baseURL可以简化为/api而不是写死带端口的完整地址。开发建议开发阶段用代理方式更省心不用在服务器加CORS配置测试跨域是否正常时配置完代理必须重启npm run serve才能生效。6. PyCharm环境与开发效率这些配置让你少踩坑6.1 PyCharm里配置Python解释器和虚拟环境很多新手在PyCharm里跑Flask项目跑不起来80%的问题出在解释器配置上。正确做法打开PyCharmFile - Settings - Project - Python Interpreter。点击齿轮图标选Add。选择Virtualenv Environment - New创建一个新的虚拟环境。在Base Interpreter选择你安装的Python版本建议3.8以上但Python 3.12刚出时很多库还没适配别太激进。为什么要用虚拟环境就好比你每个项目都有自己的一个独立工具箱项目A装Flask 2.x项目B装Flask 3.x互不干扰。如果你把所有依赖都装进全局Python环境时间一长不同项目的版本冲突会把你折磨疯。创建好虚拟环境后在PyCharm的Terminal里安装依赖pip install -r requirements.txt如果你用的是requirements.txt内容按需列出flask3.0.0 flask-cors4.0.0 flask-sqlalchemy3.1.1 flask-jwt-extended4.6.0固定版本号是个好习惯避免过几个月依赖升级后项目跑不起来了。6.2 PyCharm运行Flask/Django的调试配置直接在PyCharm里点绿色三角形运行app.py这样调试体验最好因为可以打断点、看变量、单步执行——这是用命令行跑程序享受不到的待遇。Flask项目在PyCharm里的运行配置Script path选择app.pyParameters留空Environment variables设FLASK_ENVdevelopment开发模式改代码自动重载Django项目的运行配置在PyCharm里选择Django Server类型Host填127.0.0.1Port填8000Environment variables设PYTHONUNBUFFERED1然后就可以在Python代码里打断点前端请求接口时后端会停在断点处你能看到每次请求带了什么参数、查了什么数据——前后端联调排错的神器没有之一。6.3 常见pip安装问题记录热搜词里“pycharm怎么安装pandas包”这类问题频率很高我在这里集中记录一下常见情况pip install报错“Could not find a version that satisfies the requirement”通常是包名拼错了或者这个包不支持你当前的Python版本。去PyPI官网确认包名再查一下版本兼容性。安装速度极慢换国内镜像源清华或阿里云的源都行pip install -i https://pypi.tuna.tsinghua.edu.cn/simple 包名。安装后PyCharm里import报错但命令行能import这是解释器没选对。PyCharm右上角或Settings里把解释器切换到正确的虚拟环境然后重启PyCharm。7. 项目部署上线宝塔面板部署Django/Flask的实战7.1 部署方案选型服务器与面板项目做完要给别人看就得部署上线。热搜词里“宝塔部署django”说明很多人选择了宝塔面板。宝塔本质上是一个服务器管理面板通过网页界面就能操作文件、数据库、Nginx、Python项目管理器不用在纯命令行里痛苦挣扎很适合中小型项目和初学者。部署前需要准备一台云服务器2核4G起步学生机也够用一个域名可选没有域名用IP端口也能访问宝塔面板安装好7.2 Django项目部署实录在服务器上部署Django项目流程是这样的第一步本地项目上传用宝塔的文件管理器把项目压缩包上传到服务器比如/www/wwwroot/course_website/然后解压。第二步安装Python依赖cd /www/wwwroot/course_website python3 -m venv venv source venv/bin/activate pip install -r requirements.txt第三步安装mysqlclientDjango连MySQL必备这个包经常是部署时最容易挂的一环因为需要编译。两个方法用pip直接装预编译版本pip install mysqlclient装不上就先yum install mysql-devel gcc然后再pip安装。第四步收集静态文件和配置ALLOWED_HOSTSpython manage.py collectstatic --noinput在settings.py里ALLOWED_HOSTS [*] # 生产环境建议填具体域名 DEBUG False STATIC_ROOT /www/wwwroot/course_website/static/第五步通过宝塔的Python项目管理器添加项目宝塔面板 - 软件商店 - Python项目管理器添加项目时项目路径选择项目目录Python版本选3.x启动文件选manage.py启动参数填runserver 0.0.0.0:8000运行用户选www注意调试阶段用runserver可以生产环境建议改成gunicorn。runserver自带的那套开发服务器并发能力很弱多个用户同时访问就会明显卡顿。7.3 用Nginx做反向代理并配置HTTPS直接用8000端口访问不好看也不安全标准做法是用Nginx反向代理用户访问80端口HTTP或443端口HTTPSNginx把请求转发给Django。Nginx配置示例server { listen 80; server_name your-domain.com; # Vue前端静态文件 root /www/wwwroot/course_frontend/dist; index index.html; # 解决Vue Router的history模式刷新404问题 location / { try_files $uri $uri/ /index.html; } # API请求反向代理到Django location /api { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这一行try_files $uri $uri/ /index.html;是很多人的拦路虎。Vue用history模式时前端路由是浏览器端用pushState实现的服务器上并不存在真实的/course/1这个文件。用户直接访问/course/1时Nginx会返回404加上这个配置后所有请求都回退到index.html由Vue Router自己去匹配路由。如果你用hash模式URL带#就没有这个问题但URL会多一个#号不美观。生产环境强烈建议history模式这条Nginx配置。配置完成后在宝塔里重载Nginx再用Certbot或宝塔的SSL证书功能申请免费证书配置HTTPS后整个部署流程就完整了。部署后记得测试一下以下几个点首页能不能打开课程列表是否正常显示点击课程详情URL直接访问是否404登录接口是否正常看Nginx日志排查视频能不能播放检查M3U8分片请求是否也被代理8. 常见问题排查与避坑手册8.1 前端Vue的坑Vue打包后布局异常很多时候是因为相对路径问题。vue.config.js里设置publicPath: ./让打包后的资源引用相对路径部署到子目录也不会挂。刷新页面404Vue Router用了history模式服务器没配置try_files兜底。解决方法是改hash模式或者按上面说的Nginx加try_files配置。M3U8视频播放不了先开浏览器F12的Network面板看请求——如果.m3u8请求了那大概率是跨域如果.ts分片请求了但视频黑屏检查后端返回的Content-Type是否正确。还有一种可能视频源是加密的Key URI指向一个鉴权地址这种需要把Key请求也处理好。M3U8播放延迟/不流畅视频切片很大概率是码率设高了HLS的优势本来是自适应码率但如果后端只生成了单码率的视频带宽不够就会卡。用工具重新转码时加上多码率输出。8.2 后端Django/Flask的坑django安装mysqlclient失败这个我前面说过了缺少系统级依赖。Ubuntu/Debian系用apt install python3-dev default-libmysqlclient-dev build-essentialCentOS系用yum install python3-devel mysql-devel gcc。装完再pip安装就顺了。Django执行查询-删除对象报错删除对象前要注意关联数据。比如删除课程前课程下还有章节、视频、学习记录直接用course.delete()会触发外键约束报错或产生孤儿数据。解决方式是在模型里设置on_deletemodels.SET_NULL允许为空或on_deletemodels.CASCADE级联删除具体用哪个取决于业务逻辑。JWT Token报错“Signature verification failed”前后端用的密钥不一致或者Token在传输中被截断/修改。检查一下后端JWT_SECRET_KEY配置和前端请求头格式Bearer后面注意有一个空格。8.3 部署和环境的坑服务器上Django能跑但前端请求502检查Nginx日志/www/wwwroot/log/下基本都是后端程序没启动或者后端崩了。用ps aux | grep gunicorn之类的命令确认进程还在运行。让我花时间最多的是静态文件404Django的静态文件默认是不放到一起的必须先collectstatic再用Nginx把/static路径指向收集出来的目录。少数新手改完settings后忘了跑这条命令页面样式全无第一反应是怀疑CDN挂了。数据库中文乱码MySQL建库时指定字符集CREATE DATABASE course_db CHARACTER SET utf8mb4;utf8mb4比utf8多支持emoji和一些特殊符号比如表情符号现在基本是标准配置。8.4 问题排查思路总结我把常用的排查思路整理成一个固定流程先看浏览器控制台F12Network里看请求状态码Console里看报错信息。404就是地址写错或路由冲突403是权限不够500是后端挂了看日志。再看后端日志Flask默认会打印一条完整的错误堆栈Django的debug模式会在页面直接显示错误详情。日志里找到Traceback (most recent call last)往上看最后一行Error就是根因。逐层验证前端Vue - Nginx - 后端进程 - 数据库。用curl从服务器本地直接请求API能返回JSON说明后端正常问题出在前面的链路。善用排除法把自定义代码注释掉一部分逐步缩小范围比盯着代码干猜效率高得多。9. 后续扩展方向与优化建议到这里“精品课程网站”的核心功能已经全部跑通。但作为完整项目还可以根据需要做扩展视频防盗链升级现在只是登录就能看如果要做付费课程可以对接七牛云、阿里云的对象存储和视频处理服务它们自带防盗链签名、CDN加速、多码率转码比自己用ffmpeg切片靠谱一个量级。加缓存层课程列表页访问频率最高用Redis加一层缓存把接口响应时间从几百毫秒降到几毫秒。Django有现成的django-redisFlask也有flask-caching。接口限流和防刷如果部署到公网接口会被脚本扫写个简单的IP限流比如同一个IP一分钟内请求超过60次就拒绝服务。flask里很简单Django也有第三方中间件。后台管理优化Django自带的admin界面有点“原生”热搜词里有个“django admin界面美化”这是真实需求。方案有两个一是用django-simpleui这类第三方库换皮肤二是做前后端分离后单独配一套Vue后台管理页面对学习更有价值。搜索功能课程多了之后用户想搜“Python基础”找不到就流失了。接入Elasticsearch有点重可以先做好在数据库层用LIKE %关键词%的模糊查询数据量一万条以内体验完全够用。最后再分享一个小的实操体会做这类全栈项目最大的价值不是把功能堆出来而是把“一个请求从浏览器出发到数据库再返回”这条链路完完整整走通把每一层在什么位置、解决了什么问题摸清楚。我在调试过程中遇到最磨人的问题十个里有七个不是逻辑难而是环境配置、路径拼接、版本不兼容这类“脏活”。但恰恰是这些脏活让一个人从“会写代码”进化成“能做项目”。你把这个项目从头到尾做完、部署上线这个过程中的成长远不是看几篇教程能比的。 Python Flask+Vue+Django精品课程网站全栈开发实战
1. 项目概述从零开始搭一个精品课程网站先把这个项目说清楚。标题里“python-flask精品课程网站设计Pycharm vue django”这几个关键词放在一起基本上可以判断出这就是一个前后端分离的在线教育类Web项目后端用Python系框架Flask或Django任选前端用Vue开发环境用PyCharm业务场景是“精品课程”的展示、播放和管理。我在技术社区里经常看到这类项目十有八九是课程设计、毕业设计或者是想转行做Web开发的人拿来练手的综合实战项目。它的覆盖面很广——既能锻炼Python后端的API设计能力又能练到Vue前端组件化开发还涉及到数据库建模、视频流播放、权限控制这类真实业务中绕不开的技术点。本文我按照实际动手做过这类项目的经验把从环境搭建到功能实现再到上线部署的完整链路都捋一遍顺便把Flask和Django这对“冤家”怎么选、PyCharm里怎么配置才顺手这些坑也一并填上。适合谁来参考说实话覆盖面挺宽的在校学生需要交课设/毕设想找个功能完整、技术栈主流的项目参考。Python后端初学者已经看完基础语法想通过实际项目理解Web框架、RESTful API、ORM这些概念。前端想补后端知识的朋友Vue写得差不多了想自己搭一套后端API搞清楚联调是怎么回事。想快速上线一个内容展示类网站的人比如培训机构要做一个课程宣传页在线试听功能这套架构完全够用。2. 技术选型与整体架构Flask还是Django这是个问题2.1 为什么标题里同时出现Flask和Django很多人看到标题就懵了到底是Flask还是Django我的判断是——这是一个“二选一”的项目而不是“两者并用”的项目。同时写两个后端框架没有实际意义反而会把项目复杂度抬高一截。这两者在Python Web开发里是最主流的两个选择但定位完全不同对比项FlaskDjango定位微框架轻量灵活全功能框架全家桶学习曲线平缓容易上手较陡概念多ORMSQLAlchemy需自行集成自带Django ORMAdmin后台需自己写或用扩展自带admin开箱即用适合场景小型项目、API服务、快速原型中大型项目、内容管理类系统社区生态扩展丰富按需组合一体化方案成熟回到这个项目本身。“精品课程网站”的核心功能无非是课程列表、课程详情、视频播放、用户登录、后台管理课程内容的增删改查。这类CMS味道很重的项目用Django其实是更省力的——自带Admin后台和ORM管理课程内容几乎不用额外写代码。但为什么很多人最终还是选了Flask因为学习价值更高。用Flask你被迫去理解路由、请求上下文、ORM配置、蓝图模块化这些东西而不是像Django那样“约定优于配置”很多东西被框架替你做了反而学不到底层原理。我的建议很直接如果是毕设/课设优先选Django开发效率高后台管理功能白拿。如果是练手学技术选Flask把每个零件都自己装一遍理解得更深。本文后面我会兼顾讲核心逻辑两边通用。2.2 整体架构设计前后端分离还是服务端渲染“精品课程网站”这个项目在架构上有两条路可以走方案A前后端分离Vue 后端APIVue负责页面渲染通过axios调用后端接口拿数据。后端只写API返回JSON。优点前后端职责清晰Vue生态丰富以后扩展App端可以直接复用API。缺点开发链路长要处理跨域CORS、Token认证等问题。方案B服务端渲染后端模板 Bootstrap后端直接返回HTML页面用Jinja2/DTL模板语法渲染数据。优点简单直接一个Flask应用搞定一切不用处理跨域。缺点前端交互能力弱复杂页面写起来痛苦。标题里既然出现了Vue那就说明这是一个前后端分离的项目。这也是目前行业的主流做法——前端工程化和后端服务化已经是标配。我实测下来前后端分离在学习阶段会多踩几个坑跨域、路由、构建配置但把这些坑踩完你对整个Web开发体系的认知会上一个台阶。项目目录结构我建议这样规划course_website/ # 项目根目录 ├── backend/ # 后端代码 │ ├── app.py # Flask/Django入口 │ ├── models.py # 数据模型 │ ├── api/ # 蓝图/视图目录 │ │ ├── course.py # 课程相关接口 │ │ ├── auth.py # 登录注册接口 │ │ └── user.py # 用户中心接口 │ ├── requirements.txt # 依赖列表 │ └── config.py # 配置文件 ├── frontend/ # 前端Vue工程 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── components/ # 通用组件 │ │ ├── router/ # 路由配置 │ │ └── api/ # axios请求封装 │ ├── package.json │ └── vue.config.js └── README.md2.3 数据库设计课程网站的核心表结构不管用Flask还是Django数据库模型设计的思路是通用的。一个精品课程网站核心业务实体就这几个用户、课程分类、课程、课程章节、视频资源、学习记录。以课程和用户为核心表结构设计如下用户表usersid主键username用户名password_hash密码哈希role用户角色普通用户/管理员created_at注册时间课程分类表categoriesid、name、sort_order课程表coursesid、title、subtitle课程标题和副标题cover_url封面图category_id所属分类teacher授课老师price价格精品课一般不是免费的status上下架状态description课程介绍章节表chaptersid、course_id所属课程title章节标题sort_order排序权重视频表videosid、chapter_id所属章节title、video_url、duration学习记录表enrollmentsid、user_id、course_id、progress、updated_at这里有一个设计细节很多人会忽略为什么把章节和视频拆成两张表因为一个课程下有多个章节一个章节下可能有多个视频比如讲理论一个视频、讲实操一个视频如果都塞在课程表里用逗号分隔ID后面做学习进度跟踪会非常痛苦。宁可多建一张表也不要贪图省事。3. 前端Vue项目搭建从环境配置到目录初始化3.1 Node.js和Vue CLI安装的坑与解法Pycharm安装教程、Vue安装及环境配置这类问题在热搜词里出现频率很高我就知道这块是新手重灾区。首先明确你要跑Vue项目必须先装Node.js。Vue本身是一个JavaScript框架而Node.js是JavaScript的运行时环境npm是Node自带的包管理器三者关系相当于Python、解释器和pip。Node.js安装要点去官网下载LTS版本长期支持版别追最新版稳定性优先。安装路径不要带空格和中文否则后面装依赖容易出幺蛾子。安装完成后打开终端输入node -v和npm -v验证。如果提示“不是内部或外部命令”说明环境变量没配上手动把Node.js安装目录加到PATH里。Vue CLI安装Vue CLI是官方提供的脚手架工具类似Python里的django-admin。npm install -g vue/cli国内网络环境下npm默认源下载速度可能不太理想建议先切换淘宝镜像npm config set registry https://registry.npmmirror.com创建Vue项目vue create course-frontend这里有个选择项——Vue 2还是Vue 3我的建议是直接用Vue 3。Vue 3的Composition API写起来更灵活性能更好而且现在新项目基本都是Vue 3Vue 2在2023年底已经停止维护了没必要学旧技术。创建完成后cd course-frontend npm run serve浏览器访问http://localhost:8080能看到Vue的默认欢迎页就说明环境OK了。3.2 安装vue-router和axios路由与请求的基础项目要支持页面跳转和接口调用这两个依赖是标配npm install vue-router4 npm install axios路由配置示例src/router/index.jsimport { createRouter, createWebHistory } from vue-router import Home from ../views/Home.vue import CourseDetail from ../views/CourseDetail.vue import Login from ../views/Login.vue const routes [ { path: /, name: Home, component: Home }, { path: /course/:id, name: CourseDetail, component: CourseDetail }, { path: /login, name: Login, component: Login } ] const router createRouter({ history: createWebHistory(), routes }) export default router这里面的核心知识点是路由参数。比如/course/:id这个路径id就是路由参数我们在页面组件里可以用route.params.id拿到课程ID然后带着这个ID去请求课程详情接口。热搜词里有“vue路由参数”这个知识点在课程详情页是必备技能。axios建议做一层统一封装src/api/request.jsimport axios from axios const request axios.create({ baseURL: http://127.0.0.1:5000/api, timeout: 10000 }) // 请求拦截器自动带上token request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config }) export default request3.3 视频播放功能M3U8格式的处理方案热搜词里有个很有意思的关键词——“vue播放m3u8”。课程网站的视频资源如果要做防盗链、支持拖动进度条精准定位、码率自适应业界标准方案就是用HLS协议视频文件被切片成一堆.ts小文件然后用一个.m3u8索引文件去描述播放顺序。Vue播放这类视频最省事的方案是用video.js加videojs-contrib-hls插件或者用hls.js这个库。用hls.js的方式import Hls from hls.js export function playVideo(videoElement, videoUrl) { if (videoElement.canPlayType(application/vnd.apple.mpegurl)) { // Safari原生支持HLS videoElement.src videoUrl } else if (Hls.isSupported()) { // 其他浏览器用hls.js const hls new Hls() hls.loadSource(videoUrl) hls.attachMedia(videoElement) } }这里要特别注意后端返回视频地址时一定要处理好跨域问题。M3U8分片请求跨域的话视频是播放不了的需要在后端设置CORS响应头这一点我后面在联调部分会详细说。4. 后端API开发Flask与Django双版本实操4.1 Flask版本用蓝图构建模块化APIFlask的开发流程我按实际的步骤拆解。先安装依赖pip install flask flask-cors flask-sqlalchemy flask-jwt-extended这几个库分别是Web框架、跨域处理、数据库ORM、JWT认证。创建app.py基础配置from flask import Flask from flask_cors import CORS from flask_sqlalchemy import SQLAlchemy from flask_jwt_extended import JWTManager app Flask(__name__) app.config[SQLALCHEMY_DATABASE_URI] sqlite:///course.db app.config[SQLALCHEMY_TRACK_MODIFICATIONS] False app.config[JWT_SECRET_KEY] your-secret-key CORS(app) # 允许跨域 db SQLAlchemy(app) jwt JWTManager(app)注意CORS(app)这一行没有它前端Vue永远调不通接口浏览器控制台会报“blocked by CORS policy”。这是因为前后端分离后前端跑在8080端口后端跑在5000端口两者端口不同就属于跨域请求浏览器默认会拦截。flask-cors就是在响应头里加Access-Control-Allow-Origin告诉浏览器“这个跨域请求我允许”。课程列表接口from flask import jsonify, request from models import Course, db app.route(/api/courses, methods[GET]) def get_courses(): 获取课程列表支持按分类筛选 category_id request.args.get(category_id, typeint) query Course.query.filter_by(statuspublished) if category_id: query query.filter_by(category_idcategory_id) courses query.order_by(Course.created_at.desc()).all() return jsonify([{ id: c.id, title: c.title, cover_url: c.cover_url, teacher: c.teacher, price: c.price } for c in courses])这里有几个基础但重要的点查询参数通过request.args.get()获取类型用typeint强制转换避免前端传来字符串导致比较时出问题。只返回需要字段不要直接把ORM对象jsonify出去因为里面可能包含不需要的字段而且ORM对象序列化也不方便。查询结果排序用order_by(created_at.desc())保证新发布的课程排在前面。4.2 Django版本admin后台让你少写一半代码如果你选Django创建项目的命令略有不同django-admin startproject course_website cd course_website python manage.py startapp course在settings.py里注册应用并配置数据库。开发阶段直接用默认的SQLite就行零配置一个文件搞定。Django最香的地方是它的Admin后台。在course/admin.py里注册模型from django.contrib import admin from .models import Course, Chapter, Video admin.register(Course) class CourseAdmin(admin.ModelAdmin): list_display (title, teacher, price, status) list_filter (status, category) search_fields (title,)然后创建管理员账号python manage.py createsuperuser启动服务后访问/admin登录进去就能直接在后台录入课程信息不用写一行代码就拥有一个完整的后台管理系统。对于课程网站这种对内容管理要求高的项目这个功能能省出大把时间。Django的视图函数写法from django.http import JsonResponse from .models import Course def course_list(request): courses Course.objects.filter(statuspublished) data [{ id: c.id, title: c.title, cover_url: c.cover_url, price: str(c.price) } for c in courses] return JsonResponse({data: data, code: 0})然后在urls.py里配置路由from django.urls import path from . import views urlpatterns [ path(api/courses, views.course_list), ]4.3 登录认证JWT是怎么保护你的课程接口的课程网站不是所有内容都免费开放付费课程的视频接口必须做权限校验。业界主流方案是JWTJSON Web Token。JWT的流程是这样的用户输入用户名密码POST到/api/login。后端验证账号密码验证通过就用密钥生成一个Token返回给前端。前端把Token存到localStorage里。前端请求需要登录的接口时在请求头Authorization里带上Token。后端检查Token合法就放行不合法就返回401。用Flask实现这个逻辑from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity app.route(/api/login, methods[POST]) def login(): data request.get_json() user User.query.filter_by(usernamedata[username]).first() if user and user.check_password(data[password]): token create_access_token(identitystr(user.id)) return jsonify({token: token, username: user.username}) return jsonify({msg: 用户名或密码错误}), 401 app.route(/api/user/profile, methods[GET]) jwt_required() def profile(): user_id get_jwt_identity() user User.query.get(user_id) return jsonify({username: user.username, email: user.email})关于密码存储必须多说一句——绝对不允许明文存密码。用werkzeug.security提供的generate_password_hash生成哈希再入库校验时用check_password_hash。即使数据库泄露攻击者拿到的也是哈希值无法反推原始密码。5. 前后端联调从跨域报错到数据打通5.1 Vue项目里是如何调用后端接口的后端API写完了前端怎么调我见过太多新手在这一步卡住。完整流程是这样的在Vue项目里以课程列表页为例在src/views/Home.vue中template div classcourse-list div classcourse-card v-forcourse in courses :keycourse.id img :srccourse.cover_url alt课程封面 h3{{ course.title }}/h3 p讲师{{ course.teacher }}/p p classprice{{ course.price }}/p router-link :to/course/${course.id}查看详情/router-link /div /div /template script setup import { ref, onMounted } from vue import request from ../api/request const courses ref([]) onMounted(async () { const resp await request.get(/courses) courses.value resp.data }) /script这里有一个非常容易踩的坑axios返回的数据结构。axios默认返回的是一个AxiosResponse对象真实的数据在resp.data里而data里面才是后端返回的JSON。如果你后端返回的是{data: [...]}这种套娃结构那么要取到课程列表就得写resp.data.data。建议后端统一返回格式{code: 0, msg: success, data: [...]}前端再封装一层把每次处理的逻辑统一掉就不会乱。5.2 视频接口的权限校验与防盗链课程视频是核心资产不能让人白嫖。视频接口的权限校验在后端要这样处理app.route(/api/video/int:video_id, methods[GET]) jwt_required() def get_video(video_id): 获取视频播放地址需要登录 video Video.query.get(video_id) if not video: return jsonify({msg: 视频不存在}), 404 # 检查当前用户是否购买了该课程 user_id get_jwt_identity() enrollment Enrollment.query.filter_by( user_iduser_id, course_idvideo.chapter.course_id ).first() if not enrollment: return jsonify({msg: 请先购买课程}), 403 return jsonify({video_url: video.video_url})前端在请求这个接口时由于axios拦截器里已经自动带了Authorization头所以用户登录后就能正常拿到视频地址。清掉localStorage里的Token再试就会收到403或401视频加载不出来——这个效果就是权限控制在做功。5.3 开发期跨域配置Vue CLI代理除了用flask-cors另一种处理跨域的方式是通过Vue CLI的代理功能“曲线救国”。在vue.config.js里加这样一段配置module.exports { devServer: { proxy: { /api: { target: http://127.0.0.1:5000, changeOrigin: true } } } }这个方案的本质是浏览器没有跨域问题了。因为浏览器请求的是同源的8080端口也就是Vue开发服务器Vue开发服务器在服务端转发这个请求到5000端口。服务端之间的请求不受浏览器同源策略限制所以数据能顺利回来。这样配置的好处是前端代码里写的baseURL可以简化为/api而不是写死带端口的完整地址。开发建议开发阶段用代理方式更省心不用在服务器加CORS配置测试跨域是否正常时配置完代理必须重启npm run serve才能生效。6. PyCharm环境与开发效率这些配置让你少踩坑6.1 PyCharm里配置Python解释器和虚拟环境很多新手在PyCharm里跑Flask项目跑不起来80%的问题出在解释器配置上。正确做法打开PyCharmFile - Settings - Project - Python Interpreter。点击齿轮图标选Add。选择Virtualenv Environment - New创建一个新的虚拟环境。在Base Interpreter选择你安装的Python版本建议3.8以上但Python 3.12刚出时很多库还没适配别太激进。为什么要用虚拟环境就好比你每个项目都有自己的一个独立工具箱项目A装Flask 2.x项目B装Flask 3.x互不干扰。如果你把所有依赖都装进全局Python环境时间一长不同项目的版本冲突会把你折磨疯。创建好虚拟环境后在PyCharm的Terminal里安装依赖pip install -r requirements.txt如果你用的是requirements.txt内容按需列出flask3.0.0 flask-cors4.0.0 flask-sqlalchemy3.1.1 flask-jwt-extended4.6.0固定版本号是个好习惯避免过几个月依赖升级后项目跑不起来了。6.2 PyCharm运行Flask/Django的调试配置直接在PyCharm里点绿色三角形运行app.py这样调试体验最好因为可以打断点、看变量、单步执行——这是用命令行跑程序享受不到的待遇。Flask项目在PyCharm里的运行配置Script path选择app.pyParameters留空Environment variables设FLASK_ENVdevelopment开发模式改代码自动重载Django项目的运行配置在PyCharm里选择Django Server类型Host填127.0.0.1Port填8000Environment variables设PYTHONUNBUFFERED1然后就可以在Python代码里打断点前端请求接口时后端会停在断点处你能看到每次请求带了什么参数、查了什么数据——前后端联调排错的神器没有之一。6.3 常见pip安装问题记录热搜词里“pycharm怎么安装pandas包”这类问题频率很高我在这里集中记录一下常见情况pip install报错“Could not find a version that satisfies the requirement”通常是包名拼错了或者这个包不支持你当前的Python版本。去PyPI官网确认包名再查一下版本兼容性。安装速度极慢换国内镜像源清华或阿里云的源都行pip install -i https://pypi.tuna.tsinghua.edu.cn/simple 包名。安装后PyCharm里import报错但命令行能import这是解释器没选对。PyCharm右上角或Settings里把解释器切换到正确的虚拟环境然后重启PyCharm。7. 项目部署上线宝塔面板部署Django/Flask的实战7.1 部署方案选型服务器与面板项目做完要给别人看就得部署上线。热搜词里“宝塔部署django”说明很多人选择了宝塔面板。宝塔本质上是一个服务器管理面板通过网页界面就能操作文件、数据库、Nginx、Python项目管理器不用在纯命令行里痛苦挣扎很适合中小型项目和初学者。部署前需要准备一台云服务器2核4G起步学生机也够用一个域名可选没有域名用IP端口也能访问宝塔面板安装好7.2 Django项目部署实录在服务器上部署Django项目流程是这样的第一步本地项目上传用宝塔的文件管理器把项目压缩包上传到服务器比如/www/wwwroot/course_website/然后解压。第二步安装Python依赖cd /www/wwwroot/course_website python3 -m venv venv source venv/bin/activate pip install -r requirements.txt第三步安装mysqlclientDjango连MySQL必备这个包经常是部署时最容易挂的一环因为需要编译。两个方法用pip直接装预编译版本pip install mysqlclient装不上就先yum install mysql-devel gcc然后再pip安装。第四步收集静态文件和配置ALLOWED_HOSTSpython manage.py collectstatic --noinput在settings.py里ALLOWED_HOSTS [*] # 生产环境建议填具体域名 DEBUG False STATIC_ROOT /www/wwwroot/course_website/static/第五步通过宝塔的Python项目管理器添加项目宝塔面板 - 软件商店 - Python项目管理器添加项目时项目路径选择项目目录Python版本选3.x启动文件选manage.py启动参数填runserver 0.0.0.0:8000运行用户选www注意调试阶段用runserver可以生产环境建议改成gunicorn。runserver自带的那套开发服务器并发能力很弱多个用户同时访问就会明显卡顿。7.3 用Nginx做反向代理并配置HTTPS直接用8000端口访问不好看也不安全标准做法是用Nginx反向代理用户访问80端口HTTP或443端口HTTPSNginx把请求转发给Django。Nginx配置示例server { listen 80; server_name your-domain.com; # Vue前端静态文件 root /www/wwwroot/course_frontend/dist; index index.html; # 解决Vue Router的history模式刷新404问题 location / { try_files $uri $uri/ /index.html; } # API请求反向代理到Django location /api { proxy_pass http://127.0.0.1:8000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } }这一行try_files $uri $uri/ /index.html;是很多人的拦路虎。Vue用history模式时前端路由是浏览器端用pushState实现的服务器上并不存在真实的/course/1这个文件。用户直接访问/course/1时Nginx会返回404加上这个配置后所有请求都回退到index.html由Vue Router自己去匹配路由。如果你用hash模式URL带#就没有这个问题但URL会多一个#号不美观。生产环境强烈建议history模式这条Nginx配置。配置完成后在宝塔里重载Nginx再用Certbot或宝塔的SSL证书功能申请免费证书配置HTTPS后整个部署流程就完整了。部署后记得测试一下以下几个点首页能不能打开课程列表是否正常显示点击课程详情URL直接访问是否404登录接口是否正常看Nginx日志排查视频能不能播放检查M3U8分片请求是否也被代理8. 常见问题排查与避坑手册8.1 前端Vue的坑Vue打包后布局异常很多时候是因为相对路径问题。vue.config.js里设置publicPath: ./让打包后的资源引用相对路径部署到子目录也不会挂。刷新页面404Vue Router用了history模式服务器没配置try_files兜底。解决方法是改hash模式或者按上面说的Nginx加try_files配置。M3U8视频播放不了先开浏览器F12的Network面板看请求——如果.m3u8请求了那大概率是跨域如果.ts分片请求了但视频黑屏检查后端返回的Content-Type是否正确。还有一种可能视频源是加密的Key URI指向一个鉴权地址这种需要把Key请求也处理好。M3U8播放延迟/不流畅视频切片很大概率是码率设高了HLS的优势本来是自适应码率但如果后端只生成了单码率的视频带宽不够就会卡。用工具重新转码时加上多码率输出。8.2 后端Django/Flask的坑django安装mysqlclient失败这个我前面说过了缺少系统级依赖。Ubuntu/Debian系用apt install python3-dev default-libmysqlclient-dev build-essentialCentOS系用yum install python3-devel mysql-devel gcc。装完再pip安装就顺了。Django执行查询-删除对象报错删除对象前要注意关联数据。比如删除课程前课程下还有章节、视频、学习记录直接用course.delete()会触发外键约束报错或产生孤儿数据。解决方式是在模型里设置on_deletemodels.SET_NULL允许为空或on_deletemodels.CASCADE级联删除具体用哪个取决于业务逻辑。JWT Token报错“Signature verification failed”前后端用的密钥不一致或者Token在传输中被截断/修改。检查一下后端JWT_SECRET_KEY配置和前端请求头格式Bearer后面注意有一个空格。8.3 部署和环境的坑服务器上Django能跑但前端请求502检查Nginx日志/www/wwwroot/log/下基本都是后端程序没启动或者后端崩了。用ps aux | grep gunicorn之类的命令确认进程还在运行。让我花时间最多的是静态文件404Django的静态文件默认是不放到一起的必须先collectstatic再用Nginx把/static路径指向收集出来的目录。少数新手改完settings后忘了跑这条命令页面样式全无第一反应是怀疑CDN挂了。数据库中文乱码MySQL建库时指定字符集CREATE DATABASE course_db CHARACTER SET utf8mb4;utf8mb4比utf8多支持emoji和一些特殊符号比如表情符号现在基本是标准配置。8.4 问题排查思路总结我把常用的排查思路整理成一个固定流程先看浏览器控制台F12Network里看请求状态码Console里看报错信息。404就是地址写错或路由冲突403是权限不够500是后端挂了看日志。再看后端日志Flask默认会打印一条完整的错误堆栈Django的debug模式会在页面直接显示错误详情。日志里找到Traceback (most recent call last)往上看最后一行Error就是根因。逐层验证前端Vue - Nginx - 后端进程 - 数据库。用curl从服务器本地直接请求API能返回JSON说明后端正常问题出在前面的链路。善用排除法把自定义代码注释掉一部分逐步缩小范围比盯着代码干猜效率高得多。9. 后续扩展方向与优化建议到这里“精品课程网站”的核心功能已经全部跑通。但作为完整项目还可以根据需要做扩展视频防盗链升级现在只是登录就能看如果要做付费课程可以对接七牛云、阿里云的对象存储和视频处理服务它们自带防盗链签名、CDN加速、多码率转码比自己用ffmpeg切片靠谱一个量级。加缓存层课程列表页访问频率最高用Redis加一层缓存把接口响应时间从几百毫秒降到几毫秒。Django有现成的django-redisFlask也有flask-caching。接口限流和防刷如果部署到公网接口会被脚本扫写个简单的IP限流比如同一个IP一分钟内请求超过60次就拒绝服务。flask里很简单Django也有第三方中间件。后台管理优化Django自带的admin界面有点“原生”热搜词里有个“django admin界面美化”这是真实需求。方案有两个一是用django-simpleui这类第三方库换皮肤二是做前后端分离后单独配一套Vue后台管理页面对学习更有价值。搜索功能课程多了之后用户想搜“Python基础”找不到就流失了。接入Elasticsearch有点重可以先做好在数据库层用LIKE %关键词%的模糊查询数据量一万条以内体验完全够用。最后再分享一个小的实操体会做这类全栈项目最大的价值不是把功能堆出来而是把“一个请求从浏览器出发到数据库再返回”这条链路完完整整走通把每一层在什么位置、解决了什么问题摸清楚。我在调试过程中遇到最磨人的问题十个里有七个不是逻辑难而是环境配置、路径拼接、版本不兼容这类“脏活”。但恰恰是这些脏活让一个人从“会写代码”进化成“能做项目”。你把这个项目从头到尾做完、部署上线这个过程中的成长远不是看几篇教程能比的。