谷粒学院项目总结

谷粒学院项目总结

项目采用B2C模式，包含后台管理系统和前台用户系统

• 前端
  • 前台系统
  • 后台系统
• 后端
  • cancal_client - 数据同步
  • common - 公共
    • common_utils - 工具类
    • service_base - swagger和异常处理
    • service_security - 用户认证和授权
  • infrastructure - 网关
  • service - 业务
    • edu - 课程、讲师、章节、小节、登录、评价、视频管理
    • oss - 连接阿里云上传头像
    • vod - 上传视频
    • msm - 手机短信登录
    • order - 微信支付
    • ucenter - 微信登录
    • cms - 横幅
    • acl - 权限管理
    • sta - 统计人数

后台管理系统的功能

登录功能

SpringSecurity框架

权限功能

菜单管理：列表、增加、修改、删除

角色管理：列表、增删改查、为角色分配菜单

用户管理：列表、增删改查、批量删除、为用户分配角色

数据库：使用五张表单

菜单、角色、角色菜单、用户、用户角色

讲师管理

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

课程分类

添加课程

读取excel中的课程分类数据，添加到数据库中 - 使用EasyExcel

课程分类列表

使用树形结果实现课程分类列表

课程管理

课程列表-分页条件查询

添加课程

课程发布流程：

• 第一步填写课程基本信息

  

• 第二步添加课程大纲（章节和小节）

  

• 第三步课程信息确认，最终课程发布

  

**课程如何判断是否已经被发布了？**使用status字段

课程添加过程中，中途把课程停止添加，重新去添加新的课程，如何找到之前没有发布完成课程，继续进行发布？ 到课程列表中根据课程状态查询未发布的课程，点击课程右边超链接把课程继续发布完成

添加小节视频

利用阿里云的视频点播功能

统计分析

生成统计数据

生成统计数据表

前台用户系统

首页数据显示

幻灯片显示

热门课程显示

热门老师显示

注册功能

获取手机号进行注册 - 阿里云短信服务功能

登陆功能

普通登陆

SSO 单点登陆 - 使用JWT生成token字符串

JWT - 使用JWT生成token

登陆流程

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

微信扫码登陆

OAuth2

• 是针对特定问题解决方案
• 主要有两个问题：开放系统间授权，分布式访问

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

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

名师列表

名师详情

课程列表

课程详情

• 课程信息显示（包括讲师，基本信息，分类，课程大纲）

  

• 判断是否需要购买课程 - 用到了微信支付

课程视频在线播放

课程支付功能

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

微信支付实现流程：

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

前端技术点

前后端分离开发

Vue

• 基本语法
• 常见指令 ：
  • v-bind
  • v-model
  • v-if
  • v-for
  • v-html // 标签内容显示
• 绑定事件： v-on-click @click
• 生命周期：
  • created() 页面渲染之前
  • mounted()页面渲染之后
• ES6规范

Element-ui

node-js

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

NPM

包管理工具:类似后端Maven

npm命令:

• npm init
• npm install xxxx

Bable

转码器，可以把ES6转换为ES5

前端模块化

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

问题：es6的模块化无法在Node.js中执行，需要用到Bable进行转换

后台系统使用vue-admin-template

基于vue+Element-ui

前台系统使用Nuxt

基于Bue

服务器渲染技术

Echarts

图标工具

后端技术总结

项目采用微服务框架

把项目可以拆分多个独立的模块，每一个模块都可以独立运行，每一个模块都是独立部署的

SpringBoot

SpringBoot就是Spring,是快速构建Spring工程的脚手架

• 启动类，扫描机制
• 设置扫描规则
• 配置类
• 注解
• springBoot配置文件
  • properties
  • yml
• 配置文件的加载顺序:boostrap application application-dev

SpringCloud

是很多框架的总称，使用这些框架可以实现微服务的架构，基于springBoot实现

框架

• Nacos - 服务发现- Netfix Eureka
• 服务调用 - Netfix Feign
• 熔断器 - Hystrix
• 服务网关 - Spring Cloud GateWay
• 分配式配置 - Nacao - Spring Cloud Config
• 消息总线 - Nacos - Spring Cloud Bus

使用阿里巴巴的Nacos代替某些组件

使用nacos作为注册中心和配置中心，持久化到数据库中

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

熔断器：容错处理，一个服务调用另一个服务，另一个服务挂掉了，需要使用熔断器

网关：跨域和拦截

MybatisPlus

（1）MyBatisPlus就是对MyBatis做增强

（2）自动填充

（3）乐观锁

• 乐观锁实现方式：

  • 取出记录时，获取当前version
  • 更新时，带上这个version
  • 执行更新时， set version = newVersion where version = oldVersion
  • 如果version不对，就更新失败

（4）逻辑删除 - 数据库上并没有被删除

（5）代码生成器

EasyExcel

课程分类管理

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

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

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

SpringSecurity

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

（2）SpringSecurity框架组成：认证和授权

（3）SpringSecurity登录认证过程

（4）执行过程

Redis

• 首页数据通过redis进行缓存
• redis数据类型：字符串、set、list、hash、有序set
• 使用redis进行缓存，不同重要的数据和需要经常改变的数据放入redis中

Nginx

（1）反向代理服务器

（2）请求转发（修改配置文件），负载均衡，动静分离

OAuth2+JWT

（1）OAuth2针对特定问题解决方案

• 开放系统授权
• 分布式访问问题

（2）JWT包含三部分

HttpClient

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

Cookie

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

微信登录

微信支付

阿里云OSS

（1）文件存储服务器

（2）添加讲师时候上传讲师头像

阿里云视频点播

（1）视频上传、删除、播放

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

* 使用视频播放凭证 - 播放加密的视频和不加密的视频

阿里云短信服务

注册时，发送手机验证码

GIT

提交到远程Git库

Docker+Jenkins

（1）手动打包运行

（2）idea打包

（3）jenkins自动化部署过程

项目中问题总结

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添加注解
• 通过网关解决
• 修改nginx里面的配置

5、413问题

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

（2）413错误：请求体过大

（3）在Nginx配置客户端大小

（4）响应状态码：413 403 302

6、Maven加载问题

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

（2）解决方案：

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

7、短信模块申请

使用测试，绑定一个固定的手机号

8、微信二维码生产

修改配置文件 
server.port=8160
微信开放平台 appid
wx.open.app_id=wxed9954c01bb89b47
微信开放平台 appsecret
wx.open.app_secret=a7482517235173ddb4083788de60b90e
微信开放平台 重定向url
wx.open.redirect_url=http://localhost:8160/api/ucenter/wx/callback

项目描述

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

• 前台用户系统包括课程、讲师、问答、文章几大大部分，使用了微服务技术架构，前后端分离开发。
• 后端的主要技术架构是：SpringBoot + SpringCloud + MyBatis-Plus + HttpClient + MySQL + Maven+EasyExcel+ nginx
• 前端的架构是：Node.js + Vue.js +element-ui+NUXT+ECharts
• 其他涉及到的中间件包括Redis、阿里云OSS、阿里云视频点播
• 业务中使用了ECharts做图表展示，使用EasyExcel完成分类批量添加、注册分布式单点登录使用了JWT
• 项目前后端分离开发，后端采用SpringCloud微服务架构，持久层用的是MyBatis-Plus，微服务分库设计，使用Swagger生成接口文档
• 接入了阿里云视频点播、阿里云OSS。
• 系统分为前台用户系统和后台管理系统两部分。
• 前台用户系统包括：首页、课程、名师、问答、文章。
• 后台管理系统包括：讲师管理、课程分类管理、课程管理、统计分析、Banner管理、订单管理、权限管理等功能。

面试问题

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

前台：会员（学员）

后台：系统管理员、运营人员

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

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

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

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

后端服务器配置：我们的项目中是通过Spring注解解决跨域的 @CrossOrigin

也可以使用nginx反向代理、httpClient、网关

类管理、课程管理、统计分析、Banner管理、订单管理、权限管理等功能。