一、在线教育项目功能点(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目录
通过配置实现