尚硅谷在线教育

在线教育项目采用B2C商业模块，使用微服务架构，项目采用前后端分离开发。

B2C：商家到用户，这种模式是自己制作大量自有版权的视频，放在自有平台上，让用户按月付费或者按年付费。 这种模式简单，快速，只要专心录制大量视频即可快速发展，其曾因为 lynda 的天价融资而 大热。但在中国由于版权保护意识不强，教育内容易于复制，有海量的免费资源的竞争对手众多等原因，难以取得像样的现金流

在线教育项目分为前台系统和后台系统：
前台系统：首页数据显示、课程列表和详情、课程支付、课程视频播放、微信登录、微信支付
后台系统包含：权限管理、课程管理、统计分析、课程分类管理等等

前端技术包含：vue、element-ui、nuxt等
后端技术包含：SpringBoot、SpringCloud、EasyExcel等
第三方技术：阿里云OSS、视频点播、短信服务等等

后台系统管理功能
登录功能（SpringSecurity）
权限管理模块：

菜单管理：列表、添加、修改删除
角色管理：列表、添加、修改、删除、批量删除
用户管理：列表、添加、修改、删除、批量删除

讲师管理模块：

条件查询分页列表、添加、修改、删除

课程分类模块:

添加课程分类
* 读取Excel里面课程分类数据，添加到数据库中
课程分类列表
* 使用树形结构显示课程分类列表

课程管理模块：

课程列表功能
添加课程：第一步填写课程基本信息，第二步添加课程大纲（章节和小节），第三步课程信息确认，最终课程发布。

使用status字段判断课程是否已经被发布。
可以到课程列表中根据课程状态查询未发布的课程，点击课程右边超链接继续进行发布

添加小节上传课程视频到阿里云，保存视频id到数据库

统计分析模块

生成统计数据
统计数据图表显示

项目前台用户系统功能
首页数据显示

显示幻灯片功能
显示热门课程
显示名师

注册功能：

阿里云短信服务，获取手机验证码

登录功能

普通登录和退出
SSO单点登录：
使用token实现：使用JWT生成的token字符串

登录实现流程：
登录调用登录接口返回token字符串，把返回token字符串放到cookie里面，创建前端拦截器进行判断，如果cookie里面包含token字符串，把token字符串放到header里面。调用接口根据token获取用户信息，把用户信息放到cookie里面，进行显示。
微信扫描登录：
OAuth2
是针对特定问题解决方案
主要有两个问题：开放系统间授权，分布式访问

微信扫描之后微信接口返回code（临时票据），拿着code值请求微信固定地址，得到两个值：access_token（访问凭证）和openid（微信唯一标识）,你拿着这两个值再去请求微信固定的地址，得到微信扫描人信息（比如昵称，头像等等）

名师列表功能

查询

名师详情功能

查询

课程列表功能

条件查询分页列表

课程详情页

课程信息显示（包含课程基本信息，分类，讲师，课程大纲）
判断课程是否需要购买

课程视频在线播放

判断支付状态
视频点播播放器

课程支付功能（微信支付）

生成课程订单
生成微信支付二维码
微信最终支付

微信支付实现流程：
* 如果课程是收费课程，点击立即购买，生成课程订单
* 点击订单页面去支付，生成微信支付二维码
* 使用微信扫描支付二维码实现支付
* 支付之后，每隔3秒查询支付状态（是否支付成功），如果没有支付成功等待，如果支付成功之后，更新订单状态（已经支付状态），向支付记录表添加支付成功记录

在线教育项目技术点（前端）
vue

* 基本语法
* 常见指令 ： v-bind单向绑定  v-model双向绑定  v-if  v-for
* 绑定事件：    @click
* 生命周期：created() 页面渲染之前     mounted()页面渲染之后
* ES6规范

element-ui

做页面效果，如列表、弹窗等

nodejs

是JavaScript运行环境，不需要浏览器直接运行js代码，模拟服务器效果

NPM

包管理工具，管理js依赖
npm命令： npm init初始化      npm install  依赖名称

babel

转码器，可以吧ES6代码转换成ES5代码

前端模块化

* 通过一个页面或者一个js文件，调用另外一个js文件里面的方法
* ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再执行

后台系统使用vue-admin-template

基于vue+Element-ui

前台系统使用Nuxt

基于vue
服务器渲染技术

在线教育项目技术点（后端技术）
项目采用微服务架构

按照功能分为多个模块，每个模块都能独立运行，独立部署

SpringBoot

SpringBoot本质是就是Spring，只是快速构建Spring工程工具

启动类包扫描机制：扫描所在包的子包的内容
设置扫描规则 @ComponentScan("包路径")

SpringBoot配置文件
配置文件类型：properties
配置文件加载顺序：bootstrap     application    application-dev

SpringCloud

是很多框架总称，使用这些框架实现微服务架构，基于SpringBoot实现
服务发现：Nacos
熔断器：Netfix Hystrix
服务网关：Spring Cloud GateWay

MybatisPlus

（1）MyBatisPlus就是对MyBatis做增强
（2）自动填充
（3）乐观锁
（4）逻辑删除
（5）代码生成器

EasyExcel

阿里巴巴提供操作excel工具，代码简洁，效率很高
EasyExcel对poi进行封装，采用SAX方式解析
项目应用在添加课程分类，读取excel数据

Spring Security

在项目整合框架实现权限管理功能
SpringSecurity框架组成：认证和授权
SpringSecurity登录认证过程

redis

首页数据通过Redis进行缓存
Redis数据类型
使用Redis作为缓存，不太重要或者不经常改变数据适合放到Redis作为缓存 

Nginx

反向代理服务器
请求转发，负载均衡，动静分离

OAuth2+JWT

OAuth2针对特定问题解决方案
JWT包含三部分

HttpClient

发送请求返回响应的工具，不需要浏览器完成请求和响应的过程
应用场景：微信登录获取扫描人信息，微信支付查询支付状态

Cookie

Cookie特点：
* 客户端技术
* 每次发送请求带着cookie值进行发送
* cookie有默认会话级别，关闭浏览器cookie默认不存在了
* 可以设置cookie有效时长  setMaxAge

阿里云

阿里云OSS
（1）文件存储服务器
（2）添加讲师时候上传讲师头像

阿里云视频点播
（1）视频上传、删除、播放
（2）整合阿里云视频播放器进行视频播放
* 使用视频播放凭证

阿里云短信服务
注册时候，发送手机验证码

总结在线教育项目问题
1、前端问题-路由切换问题
（1）多次路由跳转到同一个vue页面，页面中created方法只会执行一次
（2）解决方案：使用vue监听

2、前端问题-ES6模块化运行问题
（1）Nodejs不能直接运行ES6模块化代码，需要使用Babel把ES6模块化代码转换ES5代码 执行

3、mp生成19位id值
（1）mp生成id值是19位，JavaScript处理数字类型值时候，只会处理到16位

4、跨域问题
（1）访问协议，ip地址，端口号，这三个如果有任何一个不一样，产生跨域
（2）跨域解决：

• 在Controller添加注解
• 通过网关解决

5、413问题
（1）上传视频时候，因为Nginx有上传文件大小限制，如果超过Nginx大小，出现413
（2）413错误：请求体过大
（3）在Nginx配置客户端大小
（4）响应状态码：413 403 302

6、Maven加载问题
（1）maven加载项目时候，默认不会加载src-java文件夹里面xml类型文件的
（2）解决方案：

• 直接复制xml文件到target目录
• 通过配置实现