Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统

前端开发

课程简介

《Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统》Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统【技能收获】学完可掌握：Vue / 前端工程化。课程以实战为导向，覆盖从基础概念到完整项目落地的关键步骤，配套章节笔记便于课后复盘与面试前快速回顾。【学习建议】建议按目录顺序学习，先打基础再进入综合实战章节；每完成 2～3 节可结合笔记整理一份学习小结，最终尝试独立复现一套完整 Demo 写入个人作品集。【就业发展】可面向岗位：Linux 运维工程师、SRE、云计算工程师、DevOps 工程师。云原生与自动化运维仍是企业 IT 刚需方向，认

已有 0 人浏览发布 2026-09-15 更新 2026-09-15

这套资料的主题很明确：用 Spring Cloud 做后端微服务拆分，用 Vue 做前端单页应用，中间靠 REST 接口和网关打通，最终落在一个"在线视频课程系统"这样的真实业务形态上。和那种只讲单个框架 API 的教程不同，它的价值在于把前后端两条工程线同时铺开，让你看到接口契约、鉴权传递、跨域处理、静态资源与视频流这些环节是怎么在一个项目里咬合的。

技术栈的边界与分工

后端以 Spring Cloud 体系为主干，涉及服务注册发现、配置中心、网关路由、熔断降级这几类典型组件，业务侧则覆盖课程管理、章节与课时、用户与权限、订单或购买记录等模块。前端用 Vue 搭配路由与状态管理，配合构建工具完成打包与代理配置。真正需要你留意的不是"用了哪些组件"，而是每个组件解决的是哪一类问题：注册发现解决服务地址漂移，网关解决统一入口与鉴权前置，配置中心解决多环境参数下放。带着问题去看代码，比逐个背注解有效得多。

项目结构里可复用的部分

这类项目的骨架通常可以拆成几层来读。公共模块放实体、统一返回体、异常定义和工具类，业务模块按领域切分，网关单独成服务，前端按视图、组件、接口请求、状态管理分层。其中几块是能直接搬到别的项目里去的：统一响应结构与全局异常处理、基于拦截器或过滤器的登录态校验、前端请求层的封装与错误统一处理、视频类资源的路径组织与访问控制。把这几块单独抽出来理解，比整体抄一遍项目更有长期收益。

前后端分离的关键衔接点

分离架构真正容易出问题的地方，往往不在业务逻辑，而在衔接处。接口文档与字段约定是否稳定、跨域与代理在开发和生产环境下怎么切换、Token 放在请求头还是 Cookie、网关鉴权后如何把用户信息透传给下游服务、分页与查询条件怎么统一序列化——这些都是需要在代码里对照确认的细节。资料里如果保留了接口定义和请求示例，建议你顺着一条完整的调用链走一遍，从页面点击到数据库落库，把中间经过的每一层标注出来。

怎么用这套资料自学

先跑通再读懂：把服务按依赖顺序启动，确认注册中心、网关、业务服务、前端都能正常联通，再回头读配置与启动类。
按调用链阅读：挑一个功能（比如课程详情），从前端接口文件追到 Controller、Service、Mapper，画出链路图。
做减法验证：尝试删掉或替换某个组件（如把网关路由改成直连），观察系统哪些能力会失效，这比只看讲解更能理解组件职责。
局部重写：选一个模块，不看原代码自己实现一遍，再对比差异，重点看异常处理、参数校验、事务边界这些容易忽略的地方。
补充工程能力：关注打包部署、多环境配置、日志与接口调试工具的配合使用，这些在真实协作中占比不低。

适合的读者与预期

如果你已经写过基础的 Spring Boot 接口和 Vue 页面，但没做过完整的微服务拆分与前后端协作，这套资料的适配度较高；如果完全没接触过 Java Web 或前端框架，建议先补齐单模块开发再进入。把它当成一份可对照、可拆解、可局部复用的工程参考，边跑边改，收获会比顺序观看大得多。

Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统

课程推荐

视频目录（87 节）

* 1-2 课程介绍及学习指导.mp4

* 2-1 使用Eureka搭建注册中心.mp4

* 2-2 搭建业务模块-system.mp4

* 2-3 搭建路由模块-gateway.mp4

* 3-1 集成持久层框架Mybatis.mp4

* 3-2 项目优化.mp4

* 3-3 搭建服务模块-server.mp4

* 3-4 集成mybatis generator.mp4

* 4-1 使用vue cli创建admin项目.mp4

* 4-2 集成bootstrap后台管理模板ace.mp4

* 4-3 集成路由vue-router.mp4

* 4-4 控台欢迎页面开发.mp4

* 5-1 大章列表查询功能开发1.mp4

* 5-2 大章列表查询功能开发2.mp4

* 5-3 大章列表查询功能开发3.mp4

* 5-4 分页功能开发.mp4

* 5-5 前端分页组件的使用.mp4

* 5-6 增加新增大章功能.mp4

* 5-7 修改删除大章功能.mp4

* 5-8 集成前端通用组件.mp4

* 5-9 代码优化.mp4

* 6-1 代码生成器原理介绍.mp4

* 6-2 controller层和service层代码生成.mp4

* 6-3 dto层代码生成.mp4

* 6-4 前端vue界面代码生成.mp4

* 6-5 字段校验和通用字段的处理.mp4

* 6-6 前端枚举代码生成.mp4

* 6-7 生成器综合示例.mp4

* 6-8 生成器升级作业.mp4

* 7-1 课程管理功能开发.mp4

* 7-2 课程时长的保存和显示.mp4

* 7-3 分类管理功能开发.mp4

* 7-4 课程和分类关联保存和显示.mp4

* 7-5 课程内容功能开发.mp4

* 7-6 课程代码优化.mp4

* 7-7 讲师管理功能开发.mp4

* 8-1 完成基本的文件上传功能.mp4

* 8-2 讲师头像的保存与显示.mp4

* 8-3 文件上传组件开发1.mp4

* 8-4 文件上传组件开发2.mp4

* 8-5 增加文件管理功能1.mp4

* 8-6 增加文件管理功能2.mp4

* 8-7 文件上传组件的使用.mp4

* 8-8 作业讲解：课程内容中增加文件管理.mp4

* 9-1 分片传输的试探.mp4

* 9-2 分片上传功能开发1.mp4

* 9-3 分片上传功能开发2.mp4

* 9-4 分片合并功能开发.mp4

* 9-5 分片检查与极速秒传.mp4

* 9-6 文件上传流程图.mp4

* 10-1 阿里云OSS简介.mp4

* 10-2 基于OSS接口的文件上传.mp4

* 10-3 阿里云视频点播服务介绍.mp4

* 10-4 基于OSS原生SDK上传视频到点播1.mp4

* 10-5 基于OSS原生SDK上传视频到点播2.mp4

* 10-6 视频授权播放功能开发.mp4

* 11-1 增加用户管理功能.mp4

* 11-2 密码的加密传输与加密存储.mp4

* 11-3 基本的登录功能开发.mp4

* 11-4 退出登录与记住登录.mp4

* 11-5 增加登录图形验证码.mp4

* 11-6 单点登录功能开发.mp4

* 11-7 前后端登录拦截.mp4

* 11-8 用户登录流程图.mp4

* 12-1 通用权限解决方案介绍.mp4

* 12-2 资源配置管理.mp4

* 12-3 角色权限管理.mp4

* 12-4 登录时获取资源权限.mp4

* 12-5 权限拦截功能开发.mp4

* 13-1 网站模块的搭建.mp4

* 13-2 集成bootstrap**模板.mp4

* 13-3 首页开发-1.mp4

* 13-4 首页开发-2.mp4

* 13-5 课程列表页面开发.mp4

* 13-6 分类筛选功能开发.mp4

* 13-7 课程详情页面开发.mp4

* 13-8 章节显示与视频播放.mp4

* 13-9 增加会员注册功能.mp4

* 13-10 增加登录与退出登录功能.mp4

* 13-11 增加发送短信验证码功能.mp4

* 13-12 完善登录注册校验功能.mp4

* 13-13 增加立即报名功能.mp4

* 14-1 项目初始化.mp4

* 14-2 控台欢迎页开发.mp4

* 14-3 前后端多环境配置.mp4

* 14-4 前后端缓存的使用.mp4

* 15-1 课程总结.mp4

Spring Cloud + Vue 前后端分离 开发企业级在线视频课程系统

技术栈的边界与分工

项目结构里可复用的部分

前后端分离的关键衔接点

怎么用这套资料自学

适合的读者与预期

Spring Cloud + Vue 前后端分离开发企业级在线视频课程系统