概要
本文旨在深入探讨如何开发一个能够稳定运行的在线学习网站。通过私有化的方式为企业或者学校能够搭建一套自己的在线学习平台,实现优质资源共享,有需要的社会团体如果需要搭建自己的在线学习网站,实现内部资源共享,只需要购买服务器,将该项目部署即可实现一套私有的学习平台。
技术概要
系统使用到的技术有:Vue、Axious、ElementUI、Nuxt等框架,后端采用SpringBoot、SpringCloudAlibaba、MyBatis-Plus等框架,并使用了Nginx、Nacos、Redis等中间件。在多个SpringBoot项目中通过OpenFein组件来调用其他项目中的Service,实现功能解耦。MyBatis-Plus则用于数据库操作,来存储数据,对于系统中的图片、视频等资源采用阿里云的OSS来进行存储。此外,使用Nacos充当微服务架构中的注册和配置中心,Redis来对一些热点数据进行二级缓存。
涉及到的微服务大概包含
系统功能
本系统实现的功能按照角色可以划分到后台管理系统和前台系统,后台管理系统应当实现课程管理,讲师管理,课程分类管理,数据统计四大功能,前台系统应当实现,用户登录注册,课程评价,以及课程查看,讲师查看,视频播放等五大功能。具体如下图所示:
数据库设计
通过对系统功能的分析设计如下几张表:用户表、课程表、课程描述表、视频表、课程分类表、统计数据表、课程评价表,章节表,讲师表
用户表
课程表
课程描述表
视频表
课程分类表
统计数据表
课程评价表
章节表
讲师表
系统界面实现
用户端界面展示
首页
包括热门课程,热门讲师(通过Redis统计观看次数,展示最热门的8门课程,和关注度最高的讲师,并将课程缓存到Redis中),用户在此界面可以通过点击的方式,来进入不同的功能
课程列表页
展示所有课程列表,可以通过课程类别分类进行课程筛选
课程详情页
在课程列表页点击对应的课程后进入,包括课程介绍,主讲讲师,课程大纲,课程评价
课程评价页
在课程详情页的下方可以看到所有的评价,并可以发布评论
视频播放页
在进入课程详情页后,点击立即观看进入视频播放页面,播放学习视频。
讲师列表页
在导航栏点击“名师”按钮,进入讲师列表页,展示全部讲师
讲师详情页
在讲师列表页点击相应的讲师后进入讲师详细信息页面
管理员端
讲师管理-所有讲师
展示所有讲师,提供了查询条件来进行筛选,可对讲师信息进行修改和删除讲师操作
讲师管理-添加讲师
按要求填写信息即可添加
课程分类列表
展示课程分类列表数据
课程分类添加
通过excel一次性添加列表数据
课程列表
展示所有课程,提供了查询方法,可对对应的课程信息进行更新或者删除课程
统计分析-生成数据
生成当日登录、注册、课程播放数、课程数的数据存储到数据库
统计分析-图表显示
可以将生成数据的数据以图表的形式展示出来,但是目前只对登录、注册、课程播放数、课程数进行了统计
技术细节
操作阿里云oss代码截图
package huangqi.education.cloud.feign;
import huangqi.education.cloud.feign.sentinel.AliyVideoClientSentinel;
import huangqi.education.utils.ReturnDataFormat;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.stereotype.Component;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestParam;
import java.util.ArrayList;
@Component
//@FeignClient(value = "vedio-module",fallback = AliyVideoClientSentinel.class)
@FeignClient(value = "vedio-module")
public interface AliyVideoClient {
/**
* 远程调用 @PathVariable必须加括号指定路径参数名称
* 远程调用aliy云端视频删除方法
*
* @param id
* @return
*/
@DeleteMapping("/api/videoModule/deleteVideo/{id}")
public ReturnDataFormat removeAliyunVideo(@PathVariable("id") String id);
@DeleteMapping("/api/videoModule/deleteAliyVideoBatch")
public ReturnDataFormat removeAliyunVideoBatch(@RequestParam("videoIdList") ArrayList <String> videoIdList);
}
小结
欢迎大家评论留言,需要源码或私有化部署的同学请私聊我(主页有联系方式)