谷粒学苑项目总结

谷粒学苑项目总结

  • 谷粒学苑项目总结
    • 一、项目描述
      • 1.总体描述
      • 2.项目模块
    • 一、项目功能
      • 1.后台管理系统功能介绍
      • 2.前台用户系统功能介绍
    • 二、项目功能技术点介绍
      • 1.前端技术
      • 2.后端技术
    • 三、项目遇到的问题

一、项目描述

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. 权限管理功能

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

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

    谷粒学苑项目总结_第1张图片

  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 解决

你可能感兴趣的:(谷粒学苑项目,java,spring,spring,cloud,spring,boot)