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

系统定位： 技术前言，前后端分离，适合入门实战。课设，毕设源码。

技术介绍：Spring Cloud+Vue前后端分离架构，还会掌握到视频文件的处理，包括文件上传、断点续传、文件存储、视频点播、视频加密等核心技术

　　SpringCloud；

　　SpringBoot；

　　Vue4.1

　　MySql5.7以上

　　Maven3.6

　　Redis

　　JDK8

第1章 课程导学与准备工作

本章主要介绍为何要带大家学习一个前后端分离的企业级在线视频系统课程，通过本课程学习不仅会掌握Spring Cloud+Vue前后端分离架构，还会掌握到视频文件的处理，包括文件上传、断点续传、文件存储、视频点播、视频加密等核心技术，之后会为大家介绍本课程内容具体安排，最后给出如何学好这门课程的一些学习建议。希望大家...

 1-1 课前必读（不看会错过一个亿）

 1-2 课程介绍及学习指导试看

第2章 使用Maven搭建SpringCloud项目

本章将介绍使用Maven搭建SpringCloud微服务项目，学习微服务核心组件：注册中心Eureka和路由Gateway。

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

 2-2 搭建业务模块-system

 2-3 搭建路由模块-gateway

第3章 SpringBoot项目技术整合

本章将介绍单个SpringBoot的纯后端应用的搭建，集成Mybatis框架及代码生成器，并集成热部署DevTools，学习单个应用的环境搭建及提高开发效率的准备。

 3-1 集成持久层框架Mybatis

 3-2 项目优化试看

 3-3 搭建服务模块-server

 3-4 集成mybatis generator试看

第4章 使用Vue cli 4搭建管理控台

本章将介绍Vue cli和bootstrap的使用。Vue是MVVM框架，其代码结构类似于Angular、微信小程序。Bootstrap是一个响应式框架，一套代码可适应PC，手机屏幕。本章使用Vue cli 4 + Bootstrap 3搭建控台管理应用，学习单页面应用搭建及响应式设计。...

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

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

 4-3 集成路由vue-router

 4-4 控台欢迎页面开发

第5章 单表管理功能前后端开发

本章将演示控台单表增删改查的前后端开发，重点学习前后端数据交互，Vue ajax库axios的使用，使用Vue自定义组件制作分页组件，Mybatis分页插件pagehelper的使用等功能。介绍常用的公共组件的使用，包括前端确认框、提示框、等待框，后端复制工具类、统一日志AOP等。...

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

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

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

 5-4 分页功能开发

 5-5 前端分页组件的使用

 5-6 增加新增大章功能

 5-7 修改删除大章功能

 5-8 集成前端通用组件

 5-9 代码优化

第6章 通用代码生成器开发

本章将演示代码生成器的制作，学习模板引擎freemarker的使用。通过代码生成器可以快速生成dto、service、controller和vue界面代码，再配合上mybatis generator，可以快速完成单表的增删改查管理功能，极大的提高开发效率。另外，本章的知识也可应用于静态页面生成、导出复杂excel等涉及文件生成的场景。...

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

 6-2 controller层和service层代码生成

 6-3 dto层代码生成

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

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

 6-6 前端枚举代码生成

 6-7 生成器综合示例

 6-8 生成器升级作业

第7章 核心业务功能开发

本章将演示核心业务功能开发，包括课程、章、节、分类的管理功能，学习前端页面跳转及参数传递，Vue过滤器，前端树形展示插件zTree，富文本框的使用，Spring事务，通用排序功能解决方案等。

 7-1 课程管理功能开发

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

 7-3 分类管理功能开发

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

 7-5 课程内容功能开发

 7-6 课程代码优化

 7-7 讲师管理功能开发

第8章 文件上传功能开发

本章将演示文件模块的开发，会使用SpringBoot + Vue完成文件上传功能，上传的图片支持实时预览显示。文件上传是系统操作中常见的功能，文件有大有小，不可避免带来带宽的问题，单独的文件模块很好的解决这个问题。

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

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

 8-3 文件上传组件开发1

 8-4 文件上传组件开发2

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

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

 8-7 文件上传组件的使用

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

第9章 大文件断点续与极速秒传

本章将在上一章的基础上增加大文件断点续传功能。作为一个视频网站，一个文件从几十M到上G，上传一个大文件受网络影响很大，一次上传成功的几率很小，为此我们会在本章完善文件上传功能，支持断点续传并且上传文件时，检查文件是否上传过实现极速秒传。...

 9-1 分片传输的试探

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

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

 9-4 分片合并功能开发

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

 9-6 文件上传流程图

第10章 基于阿里云OSS的文件上传

在线视频课程的核心内容就是视频，保障视频不外泄是程序的重中之重，所以我们需要对视频做加密处理，本章我们选择阿里云视频加密，阿里云视频点播是对OSS的包装，支持防盗链和视频加密。

 10-1 阿里云OSS简介

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

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

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

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

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

第11章 用户管理与登录

本章将演示用户管理及控台登录功能的开发，登录拦截是一个管理控台最基本的权限拦截，防止出现未登录用户直接访问控台界面或接口，同时保障系统内部用户的信息安全，介绍单点登录功能的开发，单点登录SSO（Single Sign On）在大型网站设计中非常常见，用户只需要登录一次就可以访问所有相互信任的应用系统，是提升用户体...

 11-1 增加用户管理功能

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

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

 11-4 退出登录与记住登录

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

 11-6 单点登录功能开发

 11-7 前后端登录拦截

 11-8 用户登录流程图

第12章 通用权限设计

本章演示通用权限功能开发，不依赖任何使用第三方框架，使用经典的资源、角色、用户关联，灵活且维护，可以细粒度的控制菜单、按钮、接口的权限，适用于通用后台管理系统的权限管理。

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

 12-2 资源配置管理

 12-3 角色权限管理

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

 12-5 权限拦截功能开发

第13章 网站开发

本章将制作用于学员使用的网站，学习BootStrap的网站模板的使用，可以让程序员即使不会美工也可以写出漂亮的网站。

 13-1 网站模块的搭建

 13-2 集成bootstrap官方模板

 13-3 首页开发-1

 13-4 首页开发-2

 13-5 课程列表页面开发

 13-6 分类筛选功能开发

 13-7 课程详情页面开发

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

 13-9 增加会员注册功能

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

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

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

 13-13 增加立即报名功能

第14章 项目优化

至此整个项目的主框架和主业务都开发完成了，这一章将对项目做一些优化，比如控台报表显示，spring boot多环境配置，缓存的使用等。

 14-1 项目初始化

 14-2 控台欢迎页开发

 14-3 前后端多环境配置

 14-4 前后端缓存的使用

第15章 课程总结

本章将带大家回顾总结课程重点难点，在课程问答区老师等着与你进一步交流，有问题欢迎大家到课程问答区提问。

 15-1 课程总结

 效果图：

数据库设计：

前端源码：

后端，多模块构建：

使用说明：

• admin
  控台管理，vue cli项目

• business
  核心业务模块，spring boot项目

• doc
  项目相关的文档，包含项目数据库初始化脚本

• eureka
  注册中心，spring boot项目

• file
  文件模块，spring boot项目

• gateway
  路由模块，spring boot项目

• generator
  代码生成器

• server
  公共jar模块，被business, file, system依赖

• system
  系统模块，spring boot项目

• web
  网站模块，vue cli项目

项目初始化

• 需要本地安装好idea, nodejs，jdk1.8, mysql5.7, navicat（数据库可视化工具）

• 将下载好的源码，用idea打开

• 刷新maven依赖

• 安装vue cli，参照课程4-1

npm install -g @vue/cli

• 下载node模块

初始化web模块
cd web
npm install

初始化admin模块
cd admin
npm install

• 新建数据库courseimooc，并courseimooc，密码courseimooc，参照课程3-1

• 数据库初始脚本在/doc/db/all.sql

项目启动

• 启动注册中心：EurekaApplication

• 启动路由模块：GatewayApplication

• 启动系统模块：SystemApplication

• 启动业务模块：BusinessApplication

• 启动文件模块：FileApplication

• 启动控台管理：admin\package.json

• 启动前端网站：web\package.json

页面访问

• 控台地址: http://localhost:8080/login
  初始用户名密码：test/test

• 控台地址: http://localhost:8081
  可以自己注册用户，短信验证码从后台日志看，或看sms表

资源配置

所有资源都在/doc/db/resource.json
需要在控台上将所有的资源配置进去，并在角色管理中配置权限 权限配置好后，需要重新登录

源码获取： +QQ 2027776292 (备注来源)