谷粒学苑项目总结

谷粒学苑项目总结

一、项目描述

1.总体描述

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

前台用户系统包括课程、讲师、评论、支付、视频几大大部分，使用了微服务技术架构，前后端分离开发。

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

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

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

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

2.项目模块

前台： 首页数据显示、课程列表和详情、讲师列表和详情、课程支付、课程视频点播、微信支付、微信登录、手机验证码注册…

后台：权限管理、课程管理、讲师管理、banner 管理、课程分类管理、统计分析

一、项目功能

1.后台管理系统功能介绍

1. 登录功能 （SpringSecurity 框架）

2. 权限管理功能

   • 菜单管理： 列表显示，增加，删除，修改
   • 角色管理：增加，修改，删除，批量删除。为角色分配菜单
   • 用户管理：增加，修改，删除，批量删除。为用户分配角色

   权限管理模块数据库表的关系：

   

3. 讲师管理模块

   • 列表功能：带条件分页查询，修改，增加讲师

4. 课程分类模块

   • 增加课程分类：读取Excel里面的课程分类数据，保存到数据库中
   • 课程分类列表： 使用树形结构显示课程分类列表

5. 课程管理模块

   • 显示课程列表：编辑课程信息，编辑课程大纲，删除课程信息

   • 增加课程：

     • 编写课程基本信息：集成了富文本编辑器

     • 添加课程大纲

       • 小节中增加了 上传课程视频的功能

     • 课程确认，最终发布课程

       ** 怎样判断课程是否已经发布?

       数据库中的课程表中有一个 status 字段，Normal表示发布，Draft表示未发布
       

       ** 添加课程时，突然不想发布了，如何找到未发布的课程进行编辑呢？

       ​ 在课程列表页面，查询出未发布课程，点击编辑成课程信息进行编辑

6. 统计分析模块

   • 生成统计数据
   • 统计数据图表显示

7. CMS 管理

   • 显示banner 列表 ： 设置前台系统的banner显示
   • 增加banner

2.前台用户系统功能介绍

1. 首页数据显示

   • 幻灯片的播放
   • 显示热门课程
   • 显示讲师

2. 注册功能

   • 获取手机验证码：整合腾讯云的短信服务【需要有本人的微信公众号申请】

3. 登录功能

   • 普通登录

     • SSO【单点登录】

     ** 单点登录有几种方式？

     一般的单点登录方式有三种：

     一种是 session复制，简而言之就是将用户信息保存到session中，将session复制到每个微服务模块中。

     第二种：使用 cookie + redis 实现，将用户信息作为 redis 的value，使用唯一标识作为 key 保存到 redis 中，把 redis 的key 键保存到 cookie 中。每次请求都携带 cookie，根据 redis的 key 查询 redis

     第三种： token 方式实现，也是本项目使用的方式，首先 将查询出来的用户信息 生成一定规则的 token 字符串，将 token 字符串保存到 cookie 中。每次请求携带 cookie，后端中判断 是否有cookie。

     ** 该项目的 单点登录 如何实现的？

     首先在前台点击登录时，调用后端接口 使用 jwt 生成 token 字符串并返回，前端中将返回的 token 保存到 cookie 中，并创建请求拦截器，判断 cookie 中是否有 token，如果有 token 就把 token 存放到 请求头的 header 中，每次发送请求都会携带 token。

     后端接口根据 token 查询用户信息，在前台页面进行显示

     ** JWT 包含几部分？

     jwt 是生成 token 字符串的一种规则，主要包含三部分：

     第一部分：头信息，主要包含了加密类型和令牌的类型

     第二部分：有效载荷，主要包含了 用户信息，除此之外还有一些默认字段可以选择，例如：iss：发行人，exp：到期时间，sub：主题 等等

     第三部分：哈西签名，它是对以上俩部分数据的签名，根据指定算法生成哈希，确保数据不会被修改

   • 微信扫码登录、

     • OAuth2： 针对特定问题的解决方案【只是一种解决方案】
     • 主要解决了俩个问题：
       • 开放系统间授权
       • 分布式访问问题

     ** 如何获取扫描人的信息？

     首先在扫码之后，第三方应用会请求微信 OAuth2 授权登录，点击 ‘允许’ 之后会返回，会获取到 code【临时票据】、state【防止 csrf 攻击】 俩个数据；

     然后拿着 code，state 向微信平台 提供的地址发送请求，获取 access_token, openid 俩个数据

     最后拿着 access_token, openid俩个数据再次向微信平台发送请求，最终获取到扫描人的信息，。

4. 讲师列表功能

5. 讲师详情功能

6. 课程列表功能

   • 条件查询分页列表功能

7. 课程详情功能

   • 课程信息显示（包含课程基本信息，分类，讲师，课程大纲）
   • 判断课程是否需要购买

8. 课程视频在线播放

9. 课程支付功能（微信支付）

   • 生成课程订单
   • 生成微信二维码
   • 支付

   课程支付流程:

   点击 ‘立即购买’ 会跳转到订单页面，生成本课程的订单，点击订单页面的 ‘去支付’ 会生成微信二维码。在微信二维码界面 每隔 3s 会查询支付状态（status字段）。超过 30s 未支付跳转回课程页面。

   完成支付向数据库中增加支付记录，并修改支付状态。返回课程页面。

二、项目功能技术点介绍

1.前端技术

在线教育系统为前后端分离开发。

前端使用到的技术：

• vue
  • 基本语法
  • 常见的指令：v-bind、v-model、v-for、v-if、v-html
  • 生命周期：created【页面渲染之前执行】、mounted【页面渲染之后】
• Element-UI
• node.js
  • JavaScript 的运行环境，不需要浏览器直接运行代码。相当于jdk
• NPM
  • 包管理工具，类似于maven
• Babel
  • 转码器，可以把 ES6 代码转换成 ES5代码
• 前端模块化
  • 通过一个页面或者一个 js 文件，调用另外一个js 文件里面的方法
• ECharts 图表工具
• 后台管理系统使用：vue-admin-template 【基于 VUe + Element-ui】
• 前台系统使用 NUXT

2.后端技术

后端基于微服务架构

• SpringBoot
• SpringCloud
• MyBatisPlus
• EasyExcel
  • 阿里巴巴提供操作 Excel 工具，代码简介，效率很高。
  • EasyExcel 对 poi 进行封装，采用 SAX 方式解析【逐行解析】
• SpringSecurity
• Oauth2 + Jwt
• HttpClient
  • 不需要浏览器 发送请求，返回响应。

中间件：

• Redis
  • 首页数据由于访问量大，并且不需要修改，存放在 redis 中
• Nginx
• 阿里云OSS
  • 上传头像
• 阿里云Vod视频点播
  • 上传课程视频
• 微信登录
• 微信支付
• 腾讯云短信服务
  • 注册发送验证码

三、项目遇到的问题

1. 路由切换问题
   • 多次路由跳转到同一个 vue 页面，页面中的 created 只会调用一次
   • 使用 watch 监听路由变化
2. ES6 模块化运行问题
   • Node.js 不能直接运行 ES6 模块化的代码，使用 babel 将 ES6 模块化代码转成 ES5代码
3. mp 生成 19 位 id 值
   • mp 生成 的 id 是 19位的，而JavaScript 只能处理 16位，因此需要将 id 设置成 String 类型
4. 跨域问题
   • 一个地址访问另外一个地址，协议、IP地址、端口号不一致就会报跨域问题
5. 413问题：请求体过大
   • 上传文件大小Nginx有默认的限制，需要在Nginx中配置客户端大小
6. maven加载问题
   • maven 不会加载 src.java 里面的 xml 类型文件，只会加载 .java 文件
     位 id 值
   • mp 生成 的 id 是 19位的，而JavaScript 只能处理 16位，因此需要将 id 设置成 String 类型
7. 跨域问题
   • 一个地址访问另外一个地址，协议、IP地址、端口号不一致就会报跨域问题
8. 413问题：请求体过大
   • 上传文件大小Nginx有默认的限制，需要在Nginx中配置客户端大小
9. maven加载问题
   • maven 不会加载 src.java 里面的 xml 类型文件，只会加载 .java 文件
   • 通过配置 pom 和 application 解决