在线教育实战项目 - 谷粒学院(SpringBoot+MP+Vue+ 阿里云 oss 存储)附源码

本贴最后更新于 887 天前,其中的信息可能已经时过境迁

一、项目概述

1. 什么是在线教育

1.1 基本概述

在线教育顾名思义,是以网络为介质的教学方式,通过网络,学员与教师即使相隔万里也可以开展教学活动;此外,借助网络课件,学员还可以随时随地进行学习,真正打破了时间和空间的限制,对于工作繁忙,学习时间不固定的职场人而言网络远程教育是最方便不过的学习方式。

1.2 发展潜力

所有人离不开教育:早期教育、课外辅导、少儿英语、职业教育、出国留学、商学院、移民服务……而在信息化爆发式发展的趋势下,在线教育越来越凸显出优势:

1)在线教育可以突破时间和空间的限制,提升了学习效率;

2)在线教育可以跨越因地域等方面造成的教育资源不平等分配,使教育资源共享化,降低了学习的门槛。

基于在线教育的特点和优势,网络学校受到越来越多人的认可,各类新兴的网校及相关网站也不断涌现。显然,这代表着网校已经逐渐走进大众的生活并成为一种学习的主流趋势。因此很多人开始选择在线教育,特别是白领一族和大学生们。仅 2012 年一年,中国在线教育市场份额已经达到 723 亿元,且在线教育用户呈规模性放大。

1.3 适用行业

具体来说在线培训学习系统可适合于:

1)政府:现今我们的政府也提倡学习型组织,不断变化的政策环境、不断出现的新事物对政府公务员提出了更高的要求,而且政府机构的网络资源较佳,“在线培训系统”对公务员学习新知识和提高素质有很大帮助,更关键的是政府机构是垂直管理体制,只要在一个领域中创建并维护一套知识库,就可以让整个领域共享这宝贵的知识财富。

2)学校:随着网络的兴起,各大中学校可通过建立网上学校,加强学校、老师、学生之间的相互交流沟通,提高教学质量,亦可建立公共教学资源库,建设精品课程,宣传学校的教育实力。

3)企业:企业的知识库体系通常是企业的核心竞争力,使用“在线教育培训系统”,企业能够创建自己的知识库体系,并允许企业内部员工随时随地学习和分享这些知识。不断提升的员工素质和不断积累的企业知识库是企业能够保持长久的竞争力的关键。对于大型企业,还可以为合作伙伴及客户创建远程学习平台,提升和考核合作伙伴的专业技能并降低服务和支持成本。

2. 项目商业模式

比较常用的商业模式

1.1B2C 模式 (商家到用户)

这种模式是自己制作大量自有版权的视频,放在自有平台上,让用户按月付费或者按年付费。这种模式简单,快速,只要专心录制大量视频即可快速发展,其曾因为 lynda 的天价融资而大热。但在中国由于版权保护意识不强,教育内容易于复制,有海量的免费资源的竞争对手众多等原因,难以取得像样的现金流。

代表网站:

lynda [https://www.lynda.com/

慕课网 https://www.imooc.com/

1.2B2B2C(商家到商家到用户)

平台链接第三方教育机构和用户,平台一般不直接提供课程内容,而是更多承担教育的互联网载体角色,为教学过程各个环节提供全方位支持和服务。

代表网站:

51cto http://edu.51cto.com/

腾讯课堂 https://ke.qq.com/

3. 工程模块

image.png

4. 系统模块

image.png

5. 技术简介

  • 后端技术架构:
    spingboot,springcloud,mybatisplus,spring security
    redis,mysql,maven,easyExcel,jwt,OAuth2
  • 前段技术架构:
    vue,element-ui,axios,node.js
  • 其他技术:
    阿里云 oss,阿里云视频点播服务,阿里云短信服务,微信支付和登录,docker,git,jenkins

SSO(单点登录):

image.png

SpringSecurity 的登录认证过程:

image.png

二、详细设计结构

image.png

image.png

三、后台管理

后台是基于 vue 和 element ui 实现的管理平台

image.png

image.png

添加讲师上传头像使用阿里云对象存储image.png

导入 excel 文件可生成课程分类

image.png

发布课程image.png

结合 Echars 生成后台图标数据

image.png

四、前台页面

首页轮播图显示

image.png

image.png

多条件查询课程显示

image.png

讲师详细介绍页面image.png

课程详细页面image.png

登录注册页

image.png

image.png

支持微信扫码登录

image.png

image.png

整合阿里云视频点播在线播放

image.png

课程订单支付页

image.png

image.png

image.png

五、项目中遇到部分问题

1.前后端分离项目中的跨域问题

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

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

2.分布式 id 生成器在前端无法处理,总是在后三位进行四舍五入。

分布式 id 生成器生成的 id 是 19 个字符的长度,前端 javascript 脚本对整数的处理能力只有 2 的 53 次方,也就是最多只能处理 16 个字符

解决的方案是把 id 在程序中设置成了字符串的性质

3.项目迁移到 Spring-Cloud 的时候,经过网关时,前端传递的 cookie 后端一只获取不了,看了 cloud 中 zuul 的源码,发现向下游传递数据的时候,zull 默认过滤了敏感信息,将 cookie 过滤掉了

解决的方案是在配置文件中将请求头的过滤清除掉,使 cookie 可以向下游传递

4.注册中心选择的原则:

Zookeeper:CP 设计,保证了一致性,集群搭建的时候,某个节点失效,则会进行选举行的 leader,或者半数以上节点不可用,则无法提供服务,因此可用性没法满足

Eureka:AP 原则,无主从节点,一个节点挂了,自动切换其他节点可以使用,去中心化

六、聊聊学习过程

用了差不多二十天,基本完成了项目,唯一不好的地方就是后面 Spring Security 而老师没有讲的很透彻,只是演示一下,因为老师讲的太详细了,由于课程时间太赶,导致后边的视频从权限管理开始崩盘,一笔带过,让人听的云里雾里,最后的项目部署也只是部署了一个 demo,而没有部署该项目.向着下一个项目出发

七、源码地址

后台源码: https://gitee.com/bokike/guli

前端源码:https://pan.baidu.com/s/1ZavUYD29KEF8BeOt6p8KVw

提取码:qsnx

参考网站:谷粒学苑 https://www.gulixueyuan.com

参考视频: https://www.bilibili.com/video/BV1dQ4y1A75e?from=search&seid=15006342491171639160

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...