项目 谷粒学院Day20

Day 20（07.16）

项目功能

后台管理系统

9528端口为后台系统的前端

登录注册（spring security框架）

权限管理

1. 菜单管理：列表的添加、修改、删除

2. 角色管理：列表的添加、修改、删除，批量删除、为角色分配菜单

3. 用户管理：列表的添加、修改、删除，批量删除、为用户分配角色

4. 权限管理表和关系：至少需要5张表

   菜单表（包括可以操作的权限的表）、角色表、用户表、角色和菜单关系表，用户和角色关系表

讲师管理

1. 讲师列表条件查询分页、讲师添加、修改、删除

课程分类

1. 添加课程分类

   读取Excel数据，添加到数据库中

2. 课程分类列表显示

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

课程管理（重要）

1. 课程列表
2. 添加课程
   1. 添加课程基本信息
   2. 添加课程大纲（章节和小节）
   3. 课程信息确认，最终课程发布
3. 添加小节时，上传视频课程

统计分析

1. 生成统计数据
2. 统计数据图表显示

banner管理

订单列表

前台用户系统

3000为前台系统的前端

首页数据显示

1. 显示幻灯片，banner轮播图

   显示前两条最新的数据

2. 显示热门课程

   最新的8门课程，或者播放量最高的8门课程

3. 显示名师

   根据id/时间取前4名

注册

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

登录

实现流程

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

1. 普通登录

   SSO（单点登录）：使用的是token方式。还有

   另外两种方式：session广播、cookie+Redis

2. 微信扫码登录

   1. OAuth2

      是针对特定问题的解决方案：开放系统间授权、分布式访问

   2. 如何获取扫码人信息过程

      扫码之后微信接口返回code（临时票据），拿着code值请求微信固定地址，得到两个值access token（访问凭证）和openid(微信唯一标识)，拿着这两个值再去请求微信的一个固定地址，得到扫码人信息（昵称、头像等）

名师列表功能

显示讲师列表带分页

名师详情功能

名师基本信息

课程列表功能

1. 条件查询分页列表功能

课程详情页

1. 显示课程基本信息（包含课程基本信息、分类、讲师、课程大纲）

2. 课程是否需要购买

   免费课程，直接观看

   付费课程显示立即购买，支付后显示立即观看

课程视频的在线播放

课程微信支付

如果课程是收费过程，点击立即购买，生成一个订单，点击订单页面去支付，生成微信支付二维码，使用微信扫码支付，支付之后，每隔3秒查询支付状态，判断是否支付成功，支付成功之后，更新订单状态为已支付，向支付记录表添加支付成功记录

1. 生成课程订单
2. 生成微信支付二维码
3. 微信支付

项目技术

前后端分离开发

前端技术

vue

基本语法，相关指令

1. v-bind：单向绑定，简写为：
2. v-model：双向绑定
3. v-if
4. v-for
5. v-html：把标签内容做显示
6. v-on：绑定事件或者@加事件

生命周期

1. created（）：页面渲染之前执行
2. mounted（）：页面渲染之后执行

Es6

Element-ui

Node.js

JavaScript的一个环境，模拟出服务器效果，不需要浏览器就能运行js代码

Npm

包管理工具，类似maven（maven管理jar包），npm管理前端的一些包

常用命令

1. npm init
2. npm install 依赖名称

Babel

转码器，把es6转换为es5

前端模块化

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

常见问题：es6的模块化无法在node.js执行，需要用babel编辑成es5后再执行

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

基于vue+element-ui

前台系统使用的是 Nuxt

基于vue

服务端渲染技术

Echarts

图表工具，统计分析模块使用

后端技术

微服务架构

SpringBoot

本质就是spring，只是快速构建spring工程的工具

启动类

1. 包扫描机制：从外向内扫，可以通过@ComponentScan（“com.lujin”）来指定扫描路径

2. 可以创建配置类@Configuration来进行配置，不写在启动类中

3. 配置文件类型：properties和yml

4. 配置文件加载顺序

   bootstrap.properties

   application.properties

   application-dev.properties

SpringCloud

是很多框架的总称，使用这些框架能够实现微服务架构，基于springboot实现

包含的框架

项目中，使用阿里巴巴的nacos，替代了springcloud的一些组件

1. Nacos

   作为注册中心，配置中心

2. Feign

   服务调用：一个微服务调用另一个微服务，实现远程调用

   edu模块调用vod模块实现课程的视频播放，调用order模块查看课程是否购买

3. 熔断器

   容错处理

4. 网关GateWay

   springcloud之前用zuul网关，现在用GateWay网关

SpringCloud版本

MyBatisPlus

对mybatis的增强

1. 自动填充
2. 乐观锁
3. 逻辑删除
4. 代码生成器

EasyExcel

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

为什么效率高？

对POI进行了封装，采用SAX方式进行解析，SAX是一行一行读取，不会产生内存溢出问题

DOM是一次性拿数据

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

Spring Security

在项目中整合实现权限管理

SpringSecurity框架组成：认证和授权

登录认证过程

1. 登录输入用户名密码，查询数据库，查看登录用户权限列表
2. 把用户名和权限列表存到Redis中，以key：用户名，value：用户权限列表 形式存储。
3. 根据用户名返回token字符串
4. 把token放到cookie，并在header中放token值
5. 通过SpringSecurity从header中获取token，从token获取用户名，拿着用户名从Redis获取权限列表
6. 由SpringSecurity给当前用户赋予权限，可以进行相关操作

代码执行过程

1. 输入用户名和密码后，进入认证过滤器attemptAuthentication获取用户名和密码
2. 然后调用查询类UserDetailServiceImpl根据用户名查询用户信息和用户具有的权限，通过security对象返回，即认证成功
3. 认证成功后，调用认证过滤器的成功的方法successfulAuthentication，获取返回对象，根据对象里面用户名生成token，把用户名和权限信息放到Redis，返回生成token
4. 然后通过授权过滤器，调用UsernamePasswordAuthenticationToken方法，从header中获取token信息，根据token信息获取用户名称，根据用户名称从Redis查询数据，给用户授权

Redis

首页数据通过Redis进行缓存

Redis数据类型

string、set、list、哈希、有序set

什么样的数据适合用Redis做缓存

不经常修改、不太重要的数据

Nginx

反向代理服务器

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

OAuth2+JWT

OAuth2：针对特定问题的解决方案，即生成一个字符串，包含数据

JWT：制定规则生成token，包含三部分：header、主体部分、签名哈希

HttpClient

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

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

Cookie

1. 客户端技术，存到客户端或者浏览器中
2. 每次发送请求会带着cookie值发送
3. cookie有默认会话级别（默认有效时长）：关闭浏览器cookie默认不存在，但是可以设置cookie有效时长setMaxAge

微信登录

微信支付

阿里云OSS

文件存储服务器

应用：添加讲师时上传讲师头像

阿里云视频点播

1. 视频上传、删除、播放
2. 整合阿里云视频播放器进行视频播放
3. 使用视频播放凭证（因为地址可能加密，加密后不能直接通过地址播放，所以需要使用播放凭证来播放）

阿里云短信服务

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

Git

代码提交到远程Git仓库

Docker+Jenkins

1. 手动打包
2. IDEA打包
3. Jenkins自动化部署过程

存在问题

前端问题

路由切换问题

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

解决方案：使用vue监听

ES6模块化运行问题

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

但是Nodejs可以运行ES6代码，只是不能运行ES6模块化代码

后端问题

mp生成19位id值问题

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

解决办法：让实体类中id类型为string类型，然后自动填充时type=IDType.ID_WOEKER_STR

跨域问题

访问协议、IP地址、端口号，这三个任何一个不一样就会产生跨域

解决方案：在controller加注解@CrossOrigin或者通过网关解决，在网关中统一处理，添加一个配置类

但是两种方案不能同时使用

413问题

1. 上传视频时，因为Nginx有上传文件大小限制，如果超过Nginx大小，会出现413问题
2. 413错误：请求体过大
3. 解决方案：在Nginx配置客户端大小
4. 响应状态码：403跨域、302重定向

Maven加载问题

Maven加载项目时，默认不会加载src 的java文件夹里面的xml文件，只会加载java文件，而mapper中有xml文件

解决方案：直接将xml文件复制到target目录；或在pom文件中进行配置

面试可能问题

1. 课程如何判定是否已经发布？

   数据库表中有一个字段status，为1就正式发布了，在前台用户系统中可以看到

2. 课程添加过程中，中途停止课程添加，重新添加新的课程，如何找到之前没有发布完成的课程，继续发布？

   来到课程列表，上方有一个下拉框，是选择课程发布状态的，找到未发布，从中找到想继续发布的课程，然后每个课程后面都有编辑课程信息，编辑课程大纲等功能（超链接），可以从这里继续编辑想要发布的未发布的课程

3. 如何实现的单点登录？

   使用的token的方式

4. token如何生成的？

   使用JWT生成token字符串

   JWT有三部分组成：jwt头信息、有效载荷（包含主体信息、用户信息）、签名哈希（防伪标志）

项目描述

示例

在线教育系统，分为前台网站系统和后台运营平台，B2C模式。

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

后端的主要技术架构是：SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx

前端的架构是：Node.js + Vue.js +element-ui+NUXT+ECharts

其他涉及到的中间件包括Redis、阿里云OSS、阿里云视频点播

业务中使用了ECharts做图表展示，使用EasyExcel完成分类批量添加、注册分布式单点登录使用了JWT