(在线教育)项目总结

一、在线教育项目功能点(B2C)

1.后台管理系统

1.登录功能(SpringSecurity框架)

2.权限管理功能

(1)菜单管理

列表、添加、修改、删除

(2)角色管理

* 列表、添加、修改、删除、批量删除

* 为角色分配菜单

(2)用户管理

*列表、添加、修改、删除、批量删除

* 为用户分配角色

3.讲师管理功能

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

4.课程分类模块

(1)添加课程分类

* 读取Excel里面课程分类数据、添加到数据库当中

(2)课程分类列表

* 用树形结构显示课程分类列表

5.课程管理模块

(1)课程列表功能

(2)添加课程

* 课程发布流程:

第一步      填写课程基本信息

第二步       添加课程大纲(章节和小节)

第三步       课程信息确认

最终课程发布

*** 课程如何判断是否已经被发布了?

使用  status ,刚开始未发布的时候status 状态为Draft,发布完以后 status的状态变为Normal

*** 课程添加过程中,中途把课程添加停止,重新去添加新的课程,如何找到之前没有发布完成课程,继续进行发布?

到课程列表中根据课程状态查询查询出未发布的课程,点击课程右边超链接把课程继续发布完成

(3) 添加小节的时候上传视频(使用了阿里云的视频点播功能)

6、统计分析模块

(1) 生成统计数据

(2) 统计数据图表显示

2.前台系统

1.首页数据显示

 (1)显示幻灯片功能

 (2)显示热门课程

 (3) 显示名师

 2.注册功能

 (1) 获取手机的验证码(整合了阿里云的短息服务)

 3.登录功能

  (1)普通登录

  * SSO(单点登录)

   第一种: session广播机制实现 实际上就是session的复制

   第二种: 使用cookie+redis实现

   1、在项目中任何一个模块进行登录,登录之后,把数据放到两个地方

    (1)redis: 在key: 生成唯一随机值(ip、用户id等等)      在Value: 存放用户数据

     (2) cookie: 把redis里面生成key值放到cookie里面

2、访问项目中其它模块,发送请求带着cookie进行发送,获取cookie值,拿着cookie做事情

 把cookie获取值,到redis中进行查询,根据key进行查询,如果查询到数据就是登录

  第三种: 使用token实现

  1、在项目某个模块进行登录、登录之后,按照规则生成字符串,把登录之后用户包含到生成字符串里面,把字符串返回

 (1) 可以把字符串通过cookie返回

 (2) 把字符串通过地址栏返回

*******  使用JWT生成字符串

JWT生成字符串包含3个部分

(1) jwt头部信息

(2) 有效载荷 包含主体信息(用户信息)

(3) 签名哈希 防伪标志

*****登录流程******

登录调用登录接口返回token字符串,把返回token字符串放到cookie里面,创建前端拦截器进行拦截进行判断,如果cookie里面包含token字符串,把token字符串放到header里面,调用接口根据token获取用户信息,把用户信息放到cookie里面,进行显示。

  (2) 微信扫码登录

OAuth2

是针特定问题解决方案

主要有两个问题:开放系统间授权,分布式访问

如何获取扫描人信息过程?

1.扫描之后,执行本地的callback方法,在callback获取两个值,在跳转时候传递过来

statc: 原样传递 

code: 类似于手机验证码,随机唯一的值

2.拿着第一步获取到code值,请求微信提供固定的地址,获取到有两个值

(1)access_token: 访问凭证

(2) openid: 每个微信唯一标识

3.拿着上一步获取到两个值access_token和openid,再去请求一个微信提供固定地址,最终可以获取到微信扫描人信息。(微信昵称、微信头像)

4.名师列表功能

5.名师详情功能

6.课程列表功能

  (1)条件查询分页列表功能

7.课程详情页

  (1)课程信息显示(包含课程基本信息,分类,讲师,课程大纲)

  (2)判断课程是否需要购买

8.课程视频在线播放

9.课程支付功能(微信支付)

(1)生成课程订单

(2)生成微信支付二维码

(3)微信最终支付

如果课程是收费课程,点击立即购买,生成课程订单

点击订单页面支付,生成微信支付二维码

使用微信扫描支付二维码实现支付

支付之后,每隔3秒查询支付状态(是否支付成功),如果没有支付成功等待,如果支付成功之后,更新订单状态(已经支付状态),向支付记录表添加支付成功记录。

二、在线教育项目技术点

使用了前后端分离开发

1.前端技术

(1)vue

基本语法

常见指令  v-bind  v-model  v-if   v-for  v-html

绑定事件  v-on-click  @click

生命周期  created() 页面渲染之前   mounted() 页面渲染之后

ES6规范

(2)Element-ui

(3)node.js

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

(4)npm  

包管理工具,类似于Maven

npm命令: npm init          npm install 依赖名称     

(5) babel

转码器,把es6代码转换成es5代码

(6)前端模块化

通过一个页面或者一个js文件,调用另外一个js文件里面的方法

问题:es6的模块化代码无法在Node.js中执行,需要调用Babel编辑成es5后在执行

(7)后台系统使用 vue-admin-template

基于Vue+Element-ui

(8) 前台系统使用 Nuxt

基于Vue

服务端渲染技术

(9)Echarts

图表工具

2.后端技术

(1)项目采用微服务架构

(2)SpringBoot

 SpringBoot  本质就是Spring,只是快速构建Spring 工程脚手架

细节:

启动类包扫描机制

设置扫描规则@ComponentScan("包路径")

SpringBoot配置文件

配置文件类型:properties和yml

配置文件加载顺序: bootstrap application  application-dev

(3)SpringCloud

是很多框架的总称,使用这些框架实现微服务架构,基于SpringBoot实现

组成的框架有哪些

项目中使用阿里巴巴的Nacos,替代SpringCloud一些组件

使用Nacos作为注册中心

使用Nacos作为配置中心

使用Feign服务调用,一个微服务去调用另一个微服务,实现远程调用

熔断器

SpringCloud之前zuul网关，目前Gateway网关

(4)MyBatisPlus

 MyBatisPlus就是对MyBatis做增强

自动填充

乐观锁

逻辑删除

代码生成器

(5)EasyExcel

阿里巴巴提供操作excel工具，代码简洁，效率很高

EasyExcel对poi进行封装，采用SAX方式解析

项目应用在添加课程分类，读取excel数据

(6)Spring Security

在项目整合框架实现权限管理功能

Spring Security框架组成:认证和授权

SpringSecurity登录认证过程

 SpringSecurity代码执行过程

 

(7)Redis

首页数据通过Redis进行缓存

Redis数据类型

不太重要的或者是不经常改变的数据适合放在Redis作为缓存

(8)Nginx

反向代理服务器

请求转发、负载均衡、动静分离

(9)OAuth2+JWT

(10)HttpClient

发送请求返回响应的工具，不需要浏览器完成请求和响应的过程

应用场景：微信登录获取扫描人信息，微信支付查询支付状态

(11)Cookie

客户端技术

每次发送请求带着cookie值进行发送

cookie有默认会话级别，关闭浏览器cookie默认不存在了

但是可以设置cookie有效时长  setMaxAge

(12)微信登录

(13)微信支付

(14)阿里云OSS

文件存储服务器

添加讲师时候上传讲师头像

(15)阿里云视频点播

视频上传、删除、播放

整合阿里云视频播放器进行视频播放

* 使用视频播放凭证

(16)阿里云短信服务

注册时候，发送手机验证码

(17)Git

代码提交到远程Git仓库

(18)Docker+Jenkins

手动打包运行

idea打包

jenkins自动化部署过程

三、在线教育项目问题

1.多次路由跳转到同一个vue页面，页面中created方法只会执行一次

多次路由跳转到同一个vue页面，页面中created方法只会执行一次

解决方案：使用vue监听

2.前端问题-ES6模块化运行问题

Nodejs不能直接运行ES6模块化代码，需要使用Babel把ES6模块化代码转换ES5代码 执行

3.mp生成19位id值

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

4.跨域问题

访问协议，ip地址，端口号，这三个如果有任何一个不一样，产生跨域

跨域解决：

* 在Controller添加注解

* 通过网关解决

5.413问题

上传视频时候，因为Nginx有上传文件大小限制，如果超过Nginx大小，出现413

413错误：请求体过大

在Nginx配置客户端大小

响应状态码：413  403  302

6.Maven加载问题

maven加载项目时候，默认不会加载src-java文件夹里面xml类型文件的

 直接复制xml文件到target目录

通过配置实现