在线教育 / 内容平台方向的自建课程学习站，面向想沉淀自有课程体系的中小团队。
市面上主流的知识付费 SaaS（小鹅通、知识星球一类）按席位或流量收费，课程内容和学习数据都留在第三方平台：成本随人数线性上涨，内容也没法进版本库管理，想调整一门课的目录只能在后台上一个个点。对内部培训、自有课程体系这类场景，付出的是持续订阅费，换来的却不是自己能掌控的资产。
这个项目要解决的就是这件事：把课程内容从平台里拿出来，用 Markdown 存在代码仓库里，站点只负责账号权限、内容渲染和学习进度。结果是内容可以走 Git 做 diff 和回滚，学习数据完全自有，部署成本也压到一台 2 核 2G 的入门 ECS 就能跑起来。
分学员端与管理端两套功能，另有一套完整的界面与主题系统。
学员端：注册 / 登录 / 登出（注册后自动登录）与修改密码；课程广场用卡片展示课程封面、简介和学习进度百分比，支持按课程名或课时标题搜索，顶部有「继续学习」直接回到最近在学的课；课程详情页给出标题、简介（超三行折起）、完整目录与环形总进度，并提供「继续学习」直达第一个未完成课时；课时阅读页左侧目录导航、顶部阅读进度条，右侧渲染 Markdown 正文（标题、列表、代码高亮、表格、图片、引用）；「标记为已完成」是吸底操作条，读到一半也能随时标记，完成后自动进入下一课时；「我的学习」只列出已经开始过的课程。
管理端：课程的新建 / 编辑 / 删除、上下移排序、发布或下线；课时的新建 / 编辑 / 删除、上下移排序、发布或下线；Markdown 编辑器左侧输入、右侧实时预览，支持导入 .md 文件、上传图片并插入正文；学员列表展示注册用户及各自完成的课时数。
界面系统：亮色 / 暗色 / 跟随系统三档主题切换，选择记在 localStorage，首屏用内联脚本提前定色所以不会闪白；暗色按 Typora Blackout 主题对齐，改配色只需动 theme.css 里的一组设计令牌；列表页加载走骨架屏而不是整块遮罩；窄屏 ≤960px 目录默认折叠，≤640px 导航折到第二行。
本项目由我独立完成：需求梳理、技术选型、数据库设计、后端接口、前端页面到服务器部署运维，全流程一人承担。
技术栈：后端 Spring Boot 3 + Java 21 + MyBatis-Plus，生产用 MySQL 8，本地开发切 H2 文件库，不用先装 MySQL 就能跑；前端 Vue 3 + Vite + Element Plus，路由 Vue Router、状态 Pinia，Markdown 渲染走 markdown-it + highlight.js 并做 XSS 过滤。登录态是 HttpOnly + SameSite=Lax 的 Cookie，写操作配 CSRF 双提交校验。部署在阿里云 ECS（CentOS 8）上，systemd 常驻 + Nginx 反代，静态资源与上传目录由 Nginx 直接托管。
几个花心思的地方：
一是权限边界收在后端。/api/admin/** 整段拦截，学员手动敲 URL 也只会拿到 403，前端隐藏入口只当体验处理，不作为安全依赖。
二是课程内容不写进代码、也不写死在数据库。课程以目录形式放在 content/ 下，course.md 第一行是课程名，每个课时一个 .md 文件、按文件名前缀决定课时顺序，再用导入脚本灌进站点。内容因此能进 Git 做版本管理和 diff，写作与发布解耦。
三是把「写作规范」变成可执行的检查。配套写了 check-course-format.py 校验课时序号是否连续；check-python-snippets.py 把课程示例代码逐段跑一遍，避免教程里出现写错的示例。
四是自己写了无头截图工具 screenshot.mjs，走本机 Chrome 的 CDP，用 --delay-api / --theme / --width 自查渲染效果。
评论