1. 医学翻转课堂系统立项需求从哪来边界画到哪1.1 翻转课堂模式在医学教学中的落地形态前阵子接了个医学院老师的单子要给《医学电子技术》这门课做一套线上翻转课堂系统。需求第一句话就把我镇住了我们要支持在线看心电图波形还要能随时出题测试判断。我下意识看了一眼手头的技术栈——Vue Python Flask/Django Pycharm心里大概有了数。这套系统落地之后确实踩了不少坑从m3u8切片视频播放到后台管理界面的美化再到打包后的布局问题几乎把询问度最高的坑都趟了一遍。这篇文章把整个过程拆开说清楚想搭在线课堂、翻转课堂系统的同行可以直接照着做。先说清楚一个概念翻转课堂不是简单地把课程录成视频传上网。它强调的是把知识的初次传递放到课前把知识的深化应用放到课堂。对医学电子技术这门课来说知识初次传递指的是电路原理讲解、心电图机工作流程、生物电信号采集方法这些内容它们非常适合通过录播视频让学生提前消化。课堂上老师不再花四十分钟念PPT而是直接针对心电图波形判读、仪器故障排查这类案例做互动讨论和实操演练。我梳理了大量搜索词之后发现大家最关心的其实是几个具体能力点视频能不能在线流畅播放、播放格式能不能用m3u8切片流、后台管理界面如何做得像样、前后端怎么打通、开发环境怎么快速配好。说白了医学老师不关心你用Django还是Flask他们只关心东西好不好用、稳不稳定、学生的使用门槛高不高。1.2 学生端、教师端、管理端的功能拆分学生端这个角色核心操作是看视频、做测验、提问题。医学电子技术涉及到大量波形图比如心电图的P波、QRS波群、T波学生需要在视频里反复回看波形变化所以视频进度记忆和倍速播放就成了刚需。一个学生上午上课可能只看到P波这段下午接着看QRS波群系统必须记住他上一次停在哪里。教师端要能上传课程视频、编辑章节、管理测验题库、查看学生的完成情况和成绩分布。这个系统最后给到老师手里的操作界面得让一个不熟悉开发的医学教授十分钟内上手。如果上传一个视频需要他打开命令行执行FFmpeg命令那这系统基本等于白做。所以教师端的所有操作都要做成可视化表单视频上传、切片、转码这些事应该在后端自动化完成。管理端则是整个平台的底座用户管理、课程审核、数据统计、系统配置都在这层。做这样一套系统上面这三个角色缺一不可否则就不叫系统而叫Demo。1.3 把热搜需求转成开发任务的优先级从搜集到的网络热词可以看出大家对这套技术栈普遍关注这些点vue播放m3u8、django admin界面美化、django streaminghttpresponse、vue打包后布局异常、python安装、pycharm配置、vue安装及环境配置。我把它们转成开发优先级清单顺序是这样定的基础环境搭建Python、Pycharm、Node、Vue CLI后端框架与数据库连通视频播放链路含m3u8切片前后端联调与跨域后台管理美化打包部署与问题修复这个顺序是实际项目中踩出来的不是教科书里的推荐。任何一个环节卡住后面都没法开工。尤其是环境搭建很多新手项目死在第一步原因是Python版本、Node版本、依赖包版本互相打架。后面我会逐个环节展开讲。2. 技术选型Vue Python系后端是这套系统的稳定三角2.1 Vue为什么前端选它而不是JQuery、React谈技术选型先讲背景。医学教学系统的特点是页面复杂度不高但交互点多且分散。如果用JQuery这套老方案几十个页面的DOM操作会让代码迅速失控。虽然React也完全可以做但Vue的模板语法更贴近HTML原生书写习惯学习成本低符合教学类项目少维护、易交接的诉求。医学工程的老师未来可能要自己维护部分页面Vue的模板写法对他们来说比JSX更友好。这套系统我用的Vue 2 Element UI的组合。Vue 3的Composition API很强但生态里很多管理后台组件在Vue 2 Element UI上成熟度更高。如果重新立项我可能会直接用Vue 3 Element Plus但这不是本文要展开的关键。对当前项目来说能用、够用、不拖进度才是第一原则。前端选型的核心不是追新而是看你团队的熟悉度和项目的实际复杂度。2.2 Flask与Django不是二选一而是看场景这里我说点实在的。标题里同时出现flask和django不代表要同时用两套框架而是根据不同项目体量做选择。Django自带Admin后台、ORM、用户认证、CSRF保护这些全套能力适合快速搭建数据模型相对密集的教学系统。Flask则特别轻量适合接口数量不多、需要高度自定义的场景。你在热搜里看到的django admin界面美化、django streaminghttpresponse、django install mysqlclient、django创建app这些高频词本身就说明用Django的人多踩坑的也多。在我这个医学翻转课堂项目里我选择了Django作为主后端同时用Flask做过早期原型验证。如果预算紧、周期短而且你只需要几个简单的CRUD接口Flask SQLAlchemy更灵活但如果你需要一套开箱即用的后台管理界面Django在很大程度上是现成的。需要注意的是Django把大部分事情都做好了但也意味着你默认接受了它的设计约束比如数据库迁移机制、ORM查询方式、模板继承规则。你可以不喜欢但要顺着它来否则会在各种细节上花掉大量时间。2.3 Pycharm在开发链路中的角色与配置Pycharm作为IDE是很多Python开发者的重要工具。专业版支持Django、Flask项目结构识别的功能比较完善社区版也够用关键差异在于专业版对前端JavaScript、数据库工具、远程部署的内置支持更全面。如果手上正好有专业版授权不要浪费如果没有社区版配合VSCode做Vue开发一样香。我看到有不少人在搜pycharm激活、pycharm专业版激活这里给个建议能走官方正版或者学校授权就尽量走正规渠道社区版对学习型项目完全够用没必要在这上面花心思折腾。有一点容易被忽略Pycharm里配置虚拟环境。项目依赖一旦混乱最典型的症状就是在我电脑上明明能跑然后在服务器上跑不起来。我的建议是每个后端项目单独建一个Python 3.9或3.10的虚拟环境用requirements.txt把依赖锁好。具体操作时在Pycharm的Settings - Project - Python Interpreter里选择New environment指定好虚拟环境路径之后所有pip安装都装到这个环境里。这个习惯会让你在部署到服务器时省掉一大半的依赖冲突问题。3. 系统架构与数据模型先把地基画清楚3.1 前后端分离的总体架构前后端分离的核心思想是Vue负责页面渲染和用户交互后端只提供JSON格式的数据接口。好处是前端可以单独部署到Nginx上后端可以单独跑在Gunicorn/UWSGI后面各自伸缩、互不打扰。对医学翻转课堂系统来说这套架构意味着学生端的课程学习页、教师端的课程管理页、管理员的系统设置页都可以做成独立的前端页面通过调用同一套后端接口来获取数据。接口设计要按资源拆分课程、章节、视频、测验、讨论、用户、成绩各成一类。每个模块的接口设计都遵循RESTful风格GET用来查POST用来增PUT/PATCH用来改DELETE用来删。前后端通过Axios发送异步请求后端返回标准化的返回结构我习惯统一成这种格式{ code: 200, message: success, data: {} }这样前端处理异常时就统一看code字段不需要到处判断HTTP状态码。再加上axios的拦截器统一处理Token过期、网络错误等情况前端的错误处理逻辑会非常干净。3.2 核心数据表设计Django的ORM帮助我们通过Model类来定义数据表但设计得好不好直接决定后期写查询时爽不爽。我按模块逐个过一下。用户模块用户表与用户扩展信息表存放学号/工号、班级、头像身份字段用角色来区分学生、教师、管理员。这里不要建三张几乎相同但细节不同的用户表一个User表加一个role字段就能覆盖所有角色。Django自带的auth_user表通常需要扩展我习惯写一个Profile模型User一对一关联把姓名字段、班级、学号等信息放进去。课程模块课程表、章节表、视频资源表、课件表。章节与课程为多对一关系视频与章节为多对一关系所以一个章节可以挂多个视频。翻转课堂对视频的依赖程度很高往往一个章节里面会同时出现教学讲解、实操演示、病例分析三段视频。课程表建议加一个status字段草稿、已发布、已归档三种状态方便老师提前准备课程内容而不被学生看到。测验模块测验表、题目表、选项表、答题记录表、成绩表。题目类型要尽量覆盖单选、多选、判断、填空即使是医学电子技术这种偏工科的课程也经常会出波形判断的看图题。选项表的设计不复杂关键是题干字段要支持图片因为心电图波形判断题必须配图。答题记录表要记录学生每次提交的所有答案成绩表单独存放最终得分。互动模块讨论主题表、回帖表、点赞表。这里需要注意的是尽量不要在回帖表里存冗余的点赞数字段否则每次点赞都要同时更新两个地方事务处理不好会出数据不一致。更稳的方案是把点赞事件记录单独存储需要展示点赞数时再做聚合查询。虽然多了一次count查询但保证了数据一致性。学习行为模块学习进度表、视频播放记录表。医学电子技术的课程时长普遍不短学生很可能分两天才看完一个视频所以视频播放记录表必须记录播放进度和最后观看时间学生再次打开视频时能自动续播。学习进度表单独记总的完成度视频播放记录表记每次播放的细节两张表各司其职。3.3 视频流处理的思路m3u8是线上课堂的关键短视频可以直接用MP4整文件播放但教学视频通常是半小时到一小时的长时间录制内容直接MP4有几个问题文件体积大加载慢网络一跳就得从头等缓冲。m3u8切片格式解决了这个问题它把一个大的视频流切成很多个.ts分片文件播放器按需加载网络波动时可以智能调整码率用户体验自然不一样。m3u8并不是某个播放器私有格式这是苹果公司提出的HTTP Live StreamingHLS标准。用户在网页端提交一个.m3u8的索引文件地址播放器会请求这个索引然后按顺序拉取里面的.ts分段。用FFmpeg转码的时候一条命令就可以把一个MP4转成m3u8加ts文件序列ffmpeg -i input.mp4 -c:v libx264 -hls_time 10 -hls_list_size 0 -hls_segment_filename output_%03d.ts output.m3u8这里-hls_time 10表示每个分片时长10秒-hls_list_size 0表示在m3u8索引里保留所有分片记录而不是只保留最近几个。配合码率参数可以对同一个视频生成多个码率的切片实现自适应码率播放。对于医学电子技术的教学视频2Mbps以下的码率就足够清晰了因为大多是PPT讲义和波形图4096*2160的超高清完全没有必要反而会拖垮服务器带宽。4. 后端核心模块从空项目到能跑通业务4.1 Django项目初始化与数据库连接我用Django MySQL为例说下流程。首先在Pycharm里创建虚拟环境然后直接用pip安装依赖。依赖清单大致是django、djangorestframework、mysqlclient、django-cors-headers、simpleui再加一个用于JWT认证的djangorestframework-simplejwt。关键点之一是mysqlclient在Windows下安装经常会出状况编译报错是高频问题。如果实在装不上不用死磕改用pymysql替代并在项目的__init__.py里做兼容处理import pymysql pymysql.install_as_MySQLdb()这个方法在开发环境能解决一大半的数据库连接问题。但注意生产环境部署在Linux服务器上时建议还是把mysqlclient装上因为pymysql在性能上会稍弱一点。数据库连接配置在settings.py里核心就是填写数据库名、用户名、密码、主机、端口。这里有个实际经验本地用root密码访问开发库没问题但部署到服务器时一定要给Django应用单独建一个数据库账号权限只开放目标库避免应用被入侵后数据库裸奔。然后执行makemigrations和migrate数据表就会自动创建出来。Django的迁移机制是它的一个关键优势改Model之后执行一条命令就能同步数据库结构这让迭代开发安全很多不需要像原生SQL那样每次手动改表结构。4.2 用户认证与权限控制Django自带的用户认证系统已经比较完整DRF则提供了Token认证和JWT认证的扩展方案。对于前后端分离的架构我更推荐用JWT因为服务端不需要维护Session状态前端把Token存在本地每次请求带上Authorization请求头即可。简单说JWT就是一个带签名的加密字符串服务端验证签名就知道这个用户是谁不需要查数据库里的会话记录。DRF的配置很简单在settings.py里加上REST_FRAMEWORK { DEFAULT_AUTHENTICATION_CLASSES: [ rest_framework_simplejwt.authentication.JWTAuthentication, ], DEFAULT_PERMISSION_CLASSES: [ rest_framework.permissions.IsAuthenticated, ], }权限建议做三级游客只能浏览课程简介学生登录后可以看视频、做测验、发讨论教师额外拥有上传视频、管理章节和查看成绩的权限。实现方式是在视图函数上加permission_classes装饰器或者在视图集里根据不同的action设置不同的权限类。这样代码看起来清晰也不会因为一个接口的权限漏配导致整个系统暴露。4.3 课程与视频接口的实现要点课程接口相对简单无非是课程列表、课程详情、章节列表。重点是视频接口要注意鉴权教务场景里视频是很重要的教学资源直接暴露给游客容易被盗链。较好的做法是给视频访问链接增加临时签名比如在URL里带上过期时间和签名参数服务端校验通过后才返回视频流。具体到Django实现可以封装一个sign_video_url方法在返回视频信息给前端时生成带签名的播放地址。Django里做视频点播接口一个常用的方式是返回StreamingHttpResponse响应类型设置为application/vnd.apple.mpegurl。这里有一个搜索热度很高的关键词django streaminghttpresponse参数content_type和content-disposition在实际编码时确实容易踩坑。content_type要跟浏览器预期接收的类型一致content-disposition则决定浏览器是将资源内联播放还是当作附件下载。对于m3u8播放场景content-disposition设成inline比较合理设置成attachment的话浏览器会直接下载文件播放器根本没法触发。如果视频文件本身已经传到了Nginx静态目录或者对象存储其实后端不需要直接转发视频字节只需要返回一个带签名的重定向URL。服务端把请求302到实际文件地址这样既能鉴权又不会让后端进程陷入大量的IO操作。这个思路对服务器性能非常重要尤其是一百个学生同时看视频的时候靠Django进程转发视频流会导致CPU和内存瞬间飙升。4.4 测验与讨论的接口设计测验接口首先要把教师端和学生端分开。教师端创建测验、维护题库学生端拉取测验列表、提交答案。提交答案接口是整个测验模块的核心要特别注意防作弊。一个可落地的方案是学生提交答案时带上开始时间、答题总时长、题目乱序标识后台用这几个参数做简单校验明显超时的提交可以直接判定无效。具体实现上测验表里会有开始时间和持续时长两个字段前端拉取测验题目时同时下发生成一份试题快照提交时后端校验时间戳范围。医学电子技术的测验里波形题尤其重要这类题目因为图片无法在短时间内进行穷举最好固定题目序号不随机打乱保证学生在看图时能一心一意看图而不是盯着题号和倒计时焦虑。讨论区接口需要注意嵌套关系。不要试图在前端把楼中楼玩出花来后端提供两级模型就够了主题与回复。主题属于某个章节回复属于某个主题第二级回复如果要做也统一挂在主题下用父回复ID来标识逻辑关系。这样数据查询简单性能也好。接口设计上/api/course/1/chapter/2/topics返回主题列表/api/topics/3/replies返回该主题下的回复列表分页每页20条即可。5. 前端建设Vue页面与视频播放5.1 环境配置与项目骨架前端开发先要安装Node.js和npm。Windows和Mac下都有官方安装包Linux下可以用apt或yum直接安装。安装完成后用Vue CLI创建项目npm install -g vue/cli vue create medical-frontend创建时选择Router和Vuex这两个几乎是必选。这里有个老生常谈的坑镜像源问题。npm install经常卡住我的做法是直接在用户目录的.npmrc文件里写一行registryhttps://registry.npmmirror.com改完之后npm install的速度会快好几倍。安装完成后用npm run serve启动开发服务器配合Vue devtools调试。项目骨架搭好之后我会先清理默认组件然后按模块建立目录views下面放student、teacher、admin三个子目录api目录里按资源分文件定义接口请求router目录里配置路由守卫。5.2 视频播放模块的完整方案视频播放是这套系统的门面也是热搜词里出现频率最高的地方。我推荐用video.js配合hls.js来播放m3u8流。在Vue 2项目中可以直接引vue-video-player组件封装。配置好source之后播放器会负责拉取m3u8索引并加载ts分片。要注意的是不同浏览器对HLS的原生支持差别很大Safari原生支持Chrome和Firefox必须依赖hls.js。Vue组件里这样配置import video.js/dist/video-js.css import VideoPlayer from vue-video-player export default { components: { VideoPlayer }, data() { return { playerOptions: { sources: [{ type: application/x-mpegURL, src: this.videoUrl }], techOrder: [html5], html5: { hls: { overrideNative: true, enableLowInitialPlaylist: true } }, autoplay: false, controls: true, muted: false } } } }这里overrideNative设置为true是强制在Chrome和Firefox里使用hls.js而不是原生播放器以保证行为一致。enableLowInitialPlaylist设为true会让播放器在刚打开时先加载低码率的初始分片实现快速起播。还有一个不太容易被注意到的点跨域。如果前端跑在localhost:8080后端跑在localhost:8000视频索引和ts分片请求都会产生跨域。开发阶段用corsheaders或者Vue的代理能解决生产环境如果前后端域名不同比如前端在课堂系统的二级域名下视频资源在单独的CDN域名下那就必须给CDN配置跨域响应头否则播放器会莫名黑屏控制台报CORS错误。5.3 课程学习页与互动模块课程学习页建议采用左右布局左侧是章节列表和进度条右侧是视频播放器加文档、测验入口和讨论区TAB。这种布局在交互上减轻了学生来回跳页的负担。医学电子技术课程的波形图比较多页面里最好在视频播放器下方放一个要点笔记区域学生可以边看视频边记波形特点笔记提交后存到后端学习进度记录表里一并保存。左右布局的实现不复杂left固定宽度280pxright使用flex自动填充。视频播放器上方放课程名称和章节名称下方是TAB切换区。学生点击左侧章节时前端先根据学习记录接口查询该章节的最新播放进度再向后端请求带签名的视频播放地址然后初始化播放器。这个流程看着简单但顺序不能乱先拿进度再拿播放地址否则播放器从0秒开始播学生每次打开都从头看体验极差。讨论区嵌入在TAB里用Vue的keep-alive缓存讨论列表数据。学生从视频切到讨论再切回来视频进度不能丢否则体验会非常割裂。5.4 后台管理界面的建设与美化后台管理我们需要快速可用的界面。Django Admin是很好的起点但原生django admin界面并不算美观好在可以用第三方组件来美化。simpleui是目前口碑比较好的一款。安装非常简单pip install django-simpleui然后在settings.py的INSTALLED_APPS里把simpleui放在django.contrib.admin前面。安装完之后登录界面和后台布局立刻不一样视觉上像现代化的管理后台。这个点如果是给老师做演示视觉差异会直接影响对方的第一印象属于性价比极高的一笔投入。simpleui还支持自定义菜单。在后台里要挂一个数据看板的话最好是利用simpleui提供的自定义菜单和页面机制不要在admin后台注册一堆只有内部才懂的英文表名。给老师演示的时候心电图测验成绩分布这种中文菜单比ExamResultList直观得多。菜单配置写在settings.py里用SIMPLEUI_CONFIG这个字典来定义。6. 开发中的血泪清单这些坑几乎人人都会踩6.1 vue播放m3u8黑屏、卡顿与报错排查链路这个坑我专门拿出来细说。刚开始做时我把m3u8地址直接塞给video.js结果Chrome和Firefox都黑屏控制台报错不断。后来一行一行排查发现原因很直接浏览器原生不支持HLS必须引入hls.js。把hls.js挂到video.js之前之后Chrome终于能播了但Firefox又出现偶尔卡顿。这时候我意识到问题可能在ts分片的码率太高于是把转码参数里的码率从4Mbps降到2Mbps同时把分片时长设为10秒卡顿问题就消失了。给同行排坑的思路是固定的先确认浏览器是否原生支持再确认有没有正确加载hls.js然后确认m3u8索引里的ts路径是否可用最后检查码率与网络环境是否匹配。四个环节按这个顺序排查90%的黑屏问题都能解决。如果这四个环节都没问题还黑屏那就去看后端返回视频资源时的Content-Type是否正确是不是被Nginx默认转成了application/octet-stream导致播放器不认。6.2 跨域问题与代理配置前后端分离项目的跨域是逃不掉的。开发阶段最简单的方案是Vue CLI的devServer.proxy配置把/api开头的请求转发到后端地址这样浏览器里的请求看起来是同源的。在vue.config.js里这样写module.exports { devServer: { proxy: { /api: { target: http://localhost:8000, changeOrigin: true } } } }生产阶段前端Nginx配置里反向代理后端接口更常见避免开放后端端口给公网。比如Nginx的server块里配了前端静态文件同时也配置location /api/块把请求代理到Gunicorn监听的127.0.0.1:8000上。不要图省事在后端用corsheaders直接放行所有域名那是把安全防火门拆了生产环境一定要限制来源。6.3 vue打包后布局异常这个问题出现的频率极高本地开发一切正常npm run build出来的静态文件部署到服务器布局全乱了。多数情况是因为资源路径写死成绝对路径。在vue.config.js里设置publicPath为./让资源采用相对路径加载能够解决大部分部署路径问题。如果你把前端部署在子目录下面publicPath要设置成子目录路径否则也是白屏或样式错乱。另一个常见异常是路由模式用了history刷新页面时Nginx如果没有配fallback规则会出现404白屏。有两个解决办法改路由为hash模式或者Nginx配置try_files回退到index.html。对于教学系统来说直接使用hash模式更省心URL里多一个#符号对用户没什么影响但省掉了Nginx配置的麻烦。6.4 pycharm虚拟环境与依赖管理的常见误区Pycharm偶尔会出现识别不到刚建好的虚拟环境解释器的情况在Settings - Project - Python Interpreter里手动指定一下虚拟环境里的python.exe或python3路径就能解决。这类问题通常是切换项目或者换电脑后旧配置残留导致的不算大坑。更值得重视的是requirements.txt的版本锁定问题。不要在里面写最新版或者不写版本号半个月后别人clone你的项目时直接装出一堆依赖冲突。我习惯对核心框架锁定主版本比如Django4.2.DRF3.14.而一些小工具只锁大版本这样既保证兼容性又留有一点小版本升级的余地。6.5 其他高频错误与应对mysqlclient编译失败的问题前面提过Windows下放弃编译改用pymysql是务实的选择。django install mysqlclient的搜索热度很高说明很多人都卡在这一步。其实Linux服务器上装依赖也很简单先装libmysqlclient-dev再pip install mysqlclient就能顺利编译。后台管理界面美化之后还有个容易忽略的点simpleui虽然变了外观但所有admin注册的Model还是默认按照英文类名展示。建议在Model的Meta类里设置verbose_name和verbose_name_plural这样后台菜单显示的就是课程管理、学生列表这种中文名称而不是Course、Student。这个细节在给老师做演示时非常加分。7. 从开发机到服务器部署与上线7.1 后端部署流程部署后端我用的是Nginx Gunicorn的组合。Gunicorn作为WSGI服务器负责运行Django应用Nginx负责接收外部请求并转发给Gunicorn同时处理静态文件和视频资源。这样分层的原因很简单Gunicorn处理高并发能力有限Nginx擅长反向代理和静态资源服务各干各的强项。在服务器上装好Python环境后创建一个虚拟环境拉取代码安装依赖执行migrate生成数据表然后用一条Gunicorn命令启动gunicorn medical_system.wsgi:application -w 4 -b 127.0.0.1:8000-w 4表示启动4个worker进程具体数量可以根据服务器CPU核数调整。然后Nginx里配置server块把站点41流量转发到8000端口。还有一个容易被忽略的点settings.py里的DEBUG要改成FalseALLOWED_HOSTS要填上服务器域名或IP。遗漏这两个配置部署上去不是出现大段堆栈就是403 Forbidden看起来像没重启服务其实跟代码一点关系都没有。7.2 前端部署流程前端构建产物就是dist目录里的静态文件。在项目根目录执行npm run build然后把dist目录上传到服务器放到Nginx指定的站点目录。前端上线后剩下的关键就是把/api请求通过Nginx代理到后端Gunicorn端口。完整Nginx配置里通常会包含三块内容location /对应前端静态文件location /api/对应后端接口代理location /media/对应上传的视频和图片资源。视频资源在部署时建议单独考虑。如果服务器带宽有限教学视频的流量很容易把带宽打满。我见过一个真实的案例一门课的视频总时长两小时一个班三十人同时在线看普通1Mbps带宽的服务器直接瘫痪。所以视频文件要么放对象存储要么放CDN应用服务器只负责鉴权和转发重定向这是线上课堂系统上线后的关键性能保障。7.3 性能优化与扩容在线课堂系统最怕的是视频播放卡顿。除了前文说的m3u8切片和码率优化还可以把视频资源放到对象存储或CDN上让流量压力从应用服务器上面卸下来。Django应用层面则可以通过数据库索引优化来做提升比如课程查询的category字段、播放记录查询的user_id字段都建议加上索引。在它上线初期我只给服务器配了2核4G的规格同时在线人数在50人以内时表现良好。如果以后要做全校范围的教学平台就要考虑更完善的部署方式比如后端服务多副本、数据库读写分离、Redis做缓存。但在当前阶段把一个班级、一个学院用起来没有问题比一开始就搞全套微服务靠谱得多。最后分享一点个人体会。这套系统做完之后我最深的感受是做教育类项目技术其实只占一半另一半是理解老师怎么教、学生怎么学。医学电子技术这门课老师强调心电图波形识别、仪器原理理解这些知识靠一段PPT是讲不透的必须配上可回放、可倍速、可反复观看的切片视频再辅以在线测验和讨论才能真正发挥翻转课堂的作用。如果这篇分享能帮你少走几条弯路或者让你在做类似教学系统时少排查几小时的黑屏、跨域、打包异常那这篇文章就没白写。后面有空我再聊聊怎么给这套系统加AI自动阅卷和智能学情分析先把雏形跑通后面再考虑更进阶的玩法。