项目总结

一项目功能点

项目采用B2C模式有后台管理员系统和前台用户系统

1 项目后台管理系统功能

1. 1登陆功能

集成SpringSecurity框架

1.2 权限管理功能

菜单管理: 列表展示添加修改删除
角色管理 : 列表展示添加修改删除批量删除为角色分配菜单
用户管理 : 列表添加修改删除批量删除为用户分配角色

权限表的关系

有五张表分别是菜单表菜单角色表角色表用户表用户角色表

一个菜单可以对应多个角色一个角色可以对应多个菜单这两张表是多对多的关系所以角色和菜单表是这两张表的中间表来表示这种关系

一个用户对应多个角色一个角色对应多个用户这两张表也是多对多的关系所以角色和用户表是这两张表的中间表来表示这种关系

1.3 讲师管理模块

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

1.4 课程分类模块

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

1.5 课程管理

课程列表功能
课程发布功能

- 填写课程基本信息
  - 添加课程大纲
    课程大纲中有添加章节每一章节下面可以添加小节在添加小节中添加上传课程视频每一小节只能添加一个视频
- 课程信息确认,最终发布

1.6 统计分析模块

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

2 项目前台功能

2.1 首页数据显示

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

2.2 登陆注册退出功能

获取手机验证码进行注册
登陆登陆

- 普通登陆
  SSO单点登陆
  使用token实现
  登陆调用登陆接口,返回token字符串,把返回token字符串放到cookie里面,创建前端拦截器,进行判断,如果cookie里面包含token字符串,把token字符串放到header里面调用接口根据token获取用户信息,把用户信息放到cookie里面,进行显示
  - 第三方登陆
    使用微信进行登陆
    OAuth2 针对特定问题解决方案主要有两个问题

1. 1. 开放系统间授权
    1. 分布式访问

流程图

2.3 名师列表功能

名师页面分页展示所以名师点击名师可以进到名师详情页得到名师详细信息

2.4 课程列表功能

条件查询分页列表功能
课程详情页

- 课程信息的显示包含课程基本信息分类讲师课程大纲课程评论
  - 判断课程是否购买
- 课程视频的在线播放

2.5课程支付功能(微信支付)

生成课程订单
生成微信支付的二维码
微信最终支付
1. 如果课程是收费课程,点击立即购买,生成课程订单
2. 点击订单页面去支付,生成微信支付二维码
1. 使用微信扫描支付二维码实现支付
2. 支付之后,每隔三秒查询支付状态(是否支付成功),如果没有支付成功等待,如果支付成功支付,更新订单状态(已经支付状态),向支付记录表添加支付成功记录

二项目技术点

项目采用前后端分离开发

1 项目中前端技术

1.1 vue

基本语法
指令

- v-bind 单向绑定
  - v-model 双向绑定
- v-if 判断
  - v-for 循环
- v-html 把标签内容渲染为html

生命周期

- created()
  在页面渲染之前执行
  - mounted()
    在页面渲染之后执行

ES6规范

1.2 Element-ui

饿了么ui

1.3 nodejs

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

1.4 NPM

包管理工具,类似于maven

npm 命令

npm init 初始化

npm install 安装依赖

1.5 Babel

转码器 ,可以把ES6代码转换成ES5执行

1.6 前端模块化

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

问题:ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5后再执行

后台系统使用的是vue-admin-template

基于vue+Element-ui

前台系统使用的Nuxt

基于vue

服务端渲染技术

1.7 Echarts

图表工具

2 项目中后端技术

项目采用微服务架构

按照业务拆分成不同的模块每个模块都可以独立部署相互之间的关系通过远程调用来做到的

2.1 Spring Boot

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

- 包扫描机制
  默认扫描启动类当前包及其子包下
  设置扫描规则 @ComponentScan(basePackages = {"包路径"})
  - 配置类 @Configuration
- 配置文件类型有 yml yaml properties
  
  加载顺序 bootstrap application application-dev

2.2 SpringCloud

spring cloud 是很多框架总称是微服务一整套解决方案基于spring boot实现
相关组件

在项目中使用的是Nacos替代了Springcloud原生的一些组件
Nacos
1. 使用Nacos作为注册中心
2. 使用Nacos作为配置中心
Feign
1. 服务调用,一个微服务调用另一个服务实现远程调用
Hystrix熔断器
类似于日常生活中的保险丝当出现了问题保险丝会自动烧断,以保护电器,避免更大的损失
使用场景
一个服务的失败，可能导致整条服务链的服务都失败的状况，我们称之为服务雪崩。
服务熔断和服务降级就是解决这个问题的方式之一
服务熔断: 当下游的服务因为某种原因变得不可用或者响应过慢,上游服务为了保证自己整体服务的可用性,不再继续调用目标服务,
直接返回,快速释放资源,如果目标服务情况好转则恢复调用
服务降级:

- 当下游的服务因为某种原因响应过慢,下游服务主动停掉一些不太重要的业务,释放出服务资源,增加响应速度
  - 当下游的服务因为某种原因不可用的,上游主动调用本地的一些降级逻辑,避免卡顿,迅速返回给用户

Gateway网关
spring cloud之前的zuul网关,目前Gateway网关
版本的使用

2.3 Mybatis Plus

MybatisPlus就是对mybatis做增强
自动填充
乐观锁
逻辑删除
代码生成器

2.4 EasyExcel

阿里巴巴提供操作Excel工具,代码.................................++
....简洁,效率很高
效率高的原因easy excel对poi进行封装,采用sax方式解析
一行一行的读取excel 重写了poi对excel的解析降低内存消耗,不会出现内存溢出问题,在上层做了模型转换的封装,让使用者更加简单方便
项目应用在添加课程分类,读取excel数据

2.5 Spring security合实现权限管理

Spring security 框架组成: 认证和授权
Spring security 代码执行过程

2.6 Redis

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

2.7. Nginx

  1. 反向代理

  2. 请求转发,负载均衡,动静分离

2.8. OAuth2+JWT

OAuth2针对特定问题解决方案
JWT包含三部分
JWT令牌由三部分组成,每部分中间使用点( . ) 分隔,比如 : xxxx.yyyy.zzzz

Header
头部包括令牌的类型(既JWT ) 及使用的哈希算法 (如 HMAC SHA256或 RSA)
一个例子如下:
下边是Header部分的内容
{
"alg": "HS256",
"typ": "JWT"
}
将上边的内容使用Base64Url编码，得到一个字符串就是JWT令牌的第一部分。
- Payload
  第二部分是负载，内容也是一个json对象，它是存放有效信息的地方，它可以存放jwt提供的现成字段，比
  如：iss（签发者）,exp（过期时间戳）, sub（面向的用户）等，也可自定义字段。
  此部分不建议存放敏感信息，因为此部分可以解码还原原始内容。
  最后将第二部分负载使用Base64Url编码，得到一个字符串就是JWT令牌的第二部分。
  一个例子：

{ 

		"sub": "1234567890", 

		"name": "456", 

		"admin": true 

}

Signature
第三部分是签名，此部分用于防止jwt内容被篡改。
这个部分使用base64url将前两部分进行编码，编码后使用点（.）连接组成字符串，最后使用header中声明
签名算法进行签名。
一个例子：
HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)
base64UrlEncode(header)：jwt令牌的第一部分。
base64UrlEncode(payload)：jwt令牌的第二部分。
secret：签名所使用的密钥。

2.9.HttpClient

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

Cookie特点: 客户端技术,每次发送请求带着cookie值进行发送
Cookie有默认有效时长,默认关闭浏览器cookie默认不存在了,可以设置cookie有效时效

2.11 阿里云OSS

文件存储服务器
添加讲师时候上传讲师头像

2.12 阿里云视频播放

视频上传,删除,播放
整合阿里云视频播放器进行视频播放

2.13 阿里云短信服务

注册时候发送验证码

2.14 Git

使用码云做版本仓库

代码提交到远程Git仓库

2.15 Docker+Jenkins

手动打包运行
idea打包
docker加jenkins自动化构建

三开发中遇到项目问题

1.1 路由切换问题

对此路由跳转到同一个vue页面,页面中的created方法只会执行一次
解决方法使用vue监听

1.2 ES6模块化运行问题

1. Node.js不能直接运行ES6模块化代码,需要使用Babel把Es6代码转换到ES5代码执行SpringS

1.3 MybatisPlus生成19位id值

mp生成id值是19位,JavaScript处理的数据类型只能处理16位,所以实体类的id位string类型

1.4 跨域问题

访问协议 ip地址端口号 ,这三个如果有任何一个不一样,产生跨域
解决在Controller添加注解
通过网关解决

1.5 413问题

上传视频时候,因为Nginx有上传文件大小限制,如果超过Nginx大小,出现413
413错误: 请求体过大
在Nginx配置客户端大小
响应状态码: 413 403跨域 302重定向

1.6 maven不加载xml文件

xml文件放到resource目录下
通过配置实现
application.yml中添加xml的路径
pom.xml中添加加载xml文件

    <build>
        <resources>
            <resource>
                <directory>**/**.*</directory>
                <includes>
                    <include>**/*.xml</include>
                    <include>**/*.yml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
            </resource>
        </resources>
    </build>

四项目情况

1. 在线教育系统

分为前台网站系统,和后台运营平台,B2C模式

前台用户系统包括课程,讲师,问答,文章几大部分,使用了微服务技术架构,采用前后的分离开发

后端的主要技术架构是: Spring Boot + Spring Cloud + Mybatis-Plus+ HttpClient+ MySQL+Maven+EasyExcel+Nginx
前端的主要技术: Node.js + Vue.js+element-ui+NUXT +ECharts
涉及到第三方中间间: 阿里云短信服务阿里云OSS存储服务阿里云视频点播 Redis
业务中使用了Echarts做图表展示,使用EasyExcel完成分类批量添加,注册分布式单点登陆使用了JWT

功能描述系统分为前台用户系统和后台管理系统两部分

前台系统包括有: 首页课程名师问答文章
后台管理系统包括: 讲师管理课程分类管理课程管理统计分析 Banner管理订单管理权限管理等功能

2 这是项目还是产品

这是一个**产品**

1.0版本是单体应用: ssm
2.0版本加入了SpringCloud 并将一些关键业务和访问量比较大的部分分离了出去,目前独立出来的服务有教学服务,视频点播服务,用户服务,统计分析服务,网关服务

3. 测试要求

首页和视频详情页QPS单机要求2000+

经常用每秒查询率来衡量域名系统的服务器性能,就是QPS

QPS= 并发量/平均响应时间

4. 企业中的项目(产品)开发流程

一个中大型项目的开发流程

1、需求调研（产品经理）

2、需求评审（产品/设计/前端/后端/测试/运营）

3、立项（项目经理、品管）

4、UI设计

5、开发

架构、数据库设计、API文档、MOCK数据、开发、单元测试
前端
后端

6、前端后端联调

7、项目提测：黑盒白盒、压力测试（qps） loadrunner

8、bug修改

9、回归测试

10、运维和部署上线

11、灰度发布

12、全量发布

13、维护和运营

5.系统中都有那些角色?数据库是怎么设计的?

前台: 会员(学员)

后台: 系统管理员运营人员

后台分库每个微服务一个独立的数据库,使用了分布式id生成器

6 视频点播是怎么实现的

直接接入了阿里云的云视频点播,云平台上的功能包括视频上传,转码,加密,智能审核,监控统计

还包括视频播放功能,阿里云还提供了一个视频播放器

7 前后端联调经常遇到的问题

1、请求方式post、get

2、json、x-wwww-form-urlencoded混乱的错误

3、后台必要的参数，前端省略了

4、数据类型不匹配

5、空指针异常

6、分布式系统中分布式id生成器生成的id 长度过大（19个字符长度的整数），js无法解析（js只能解析16个长度：2的53次幂）

id策略改成 ID_WORKER_STR

8 前后端分离项目中的跨域问题是如何解决的

后端服务器配置 : 我们项目中是使用了网关来解决跨域问题 GateWay

也可以使用 nginx反向代理 httpClient @CrossOrigin

9 分布式系统的CAP原理

CAP定理

指的是一个分布式系统中, Consistency(一致性) Availability(可用性) Partition tolerance(分区容错性) 三者不可同时获得

一致性(C) : 在分布式系统中的所有数据备份 ,在同一个时刻是否同样的值(所有的节点在同一时间的数据完全一致,越多节点,数据同步越耗时
可用性(A) : 负载过大后,集群整体是否还能响应客户端的读写请求(服务一直可用,而且是正常响应时间)
分区容错性(P): 分区容错性,就是高可用性一个节点崩了,并不影响其他的节点(100个节点,挂了几个,不影响服务,越多机器越好)

CA满足的情况下,P不能满足的原因

数据同步(C)需要时间,也要正常的时间内响应(A) 那么机器的数量就要少,所以就P不满足

CP满足的情况下 ,A不能满足的原因

数据同步(C)需要时间,机器的数据也多(P),那么就不能在正常的响应时间内响应,所以A就不满足

AP满足的情况下,C不能满足的原因

机器的数量也多P,正常的时间内响应A,那么数据就不能及时同步到其他节点,所以C不能满足

注册中心选择的原则

结论：

分布式系统中P,肯定要满足，所以我们只能在一致性和可用性之间进行权衡

如果要求一致性，则选择zookeeper，如金融行业

如果要求可用性，则Eureka，如教育、电商系统

没有最好的选择，最好的选择是根据业务场景来进行架构设计

10 前端渲染和后端渲染有什么区别吗

前端渲染是返回json给前端,通过JavaScript将数据绑定到页面上

后端渲染是在服务器端将页面生成直接发送给服务端,有利于SEO的优化

谷粒学院笔记