SpringBoot在线学习系统的开发

摘要：在线学习系统是以教学实践工作需要为背景，以提高教师教学效率，改革学生学习模式，推动科学化、信息化和规范化管理为目的而开发的软件系统。为了实现对学生学习管理工作的信息化和规范化，本文在分析高校在线学习系统的发展现状和趋势的基础上，针对目前学习和管理的主要内容和存在的主要问题，设计开发了基于SpringBoot的在线学习系统，为实现学校学习及管理工作的信息化和规范化提供一个方案。该系统具有以下特点：（1）使用SpringCloud微服务架构，nginx作为服务器，使本系统成为一个稳定性高、可用性高、技术兼容性强以及可扩展性高的系统。（2）使用ElasticSearch作为搜索引擎，帮助系统以极高的速度去处理大规模的数据。（3）使用RabbitMQ作为消息中间件，在视频处理、课程发布等功能中起到了流量削峰、微服务之间解耦的作用，进而提高系统整体的使用体验。

关键词：SpringBoot；在线学习；学习系统

引言

互联网以其丰富的信息和互动性，日益融入人们的生活，给学习环境和教学方法带来了重大变化。在线学习系统引起了很多人的兴趣，因为其不受时间和空间的限制，为学习者提供广泛的现代学习资源，允许学习者个性化学习、主动学习，从而满足他们的个人学习需求。传统的线下学习需要更多的时间和路程来学习，而在线学习系统的引入意味着人们不再局限于传统的线下学习，多媒体学习的好处是还可以鼓励人们主动从互联网上获取个人学习所需的信息，进行个性化学习[1]。

1. 在线学习系统的需求分析

1.1 课程管理模块功能多样化

以教学管理员或者系统管理员身份登录之后，即可进入课程管理模块。教学管理员只能查看、修改自己组织的课程信息，系统管理员可以查看、修改所有的课程信息。课程管理模块主要包括对课程信息更新，课程的上架、下架，课程信息修改之后对课程页面的预览，以及对视频文件的上传或查询。

1.2 课程学习模块开放共享

由于本系统的课程完全开源免费，所以无论是注册用户还是游客均可以进入课程页面浏览课程信息、单击课程目录章节进行视频学习。用户登录之后学习课程，可以将课程添加到自己的课程学习列表中。

1.3 搜索引擎模块实现关联

传统的使用搜索引擎的搜索功能在数据量达到一定程度之后，便会出现响应速度慢的情况，极大地影响了用户体验。本系统使用ElasticSearch搜索引擎实现课程搜索以及课程目录关联视频搜索功能，这样即使系统的课程、视频文件信息不断增加，也能保证系统课程以及课程目录关联视频信息检索的速度。

1.4 单点登录模块便捷访问

本系统在设计上是三端分离，即用户学习端、教学管理端、系统管理端分离。要求管理员用户登录三个系统时不需要重复数据用户名、密码，在登录一个系统之后，另外两个系统也可以直接访问。学生用户可以注册获得自己的账号及密码，而教学方和系统管理员用户注册的账号需要通过管理员的审核。

1.5 系統管理模块丰富权限

在系统学习端首页，用户看到的轮播图信息、课程分类信息以及热点课程需要系统后台进行动态配置。管理员进入系统管理模块后，管理员可以行使管理员权限，修改页面信息，对页面进行增加、删除和预览等操作。

2.  SpringBoot在线学习系统的可行性分析

2.1 技术可行性

在线学习系统采用微服务架构，集合Vue.js，Nuxt，elasticSearch等开发技术，由于笔者在实训、实习以及自我学习期间对这些技术加以学习并使用，因此能够将其应用到实际开发中。系统同时采用MVC三层架构设计思想，将模型、视图、控制器区分开来，既提高了代码的编写效率，又降低了系统的耦合性，提高了系统的可维护性[2]。总体来说，开发该系统技术是可行的。

2.2 操作可行性

在线学习系统具有简洁的用户界面，用户能够轻松地熟悉各功能模块并进行使用，通过简单的单击、搜索框的搜索便可以实现网页与后台数据的交互。同时教学管理员、系统管理员能够通过后台操作进行系统服务数据的更新与维护。总体来说，该系统具有操作简单、功能健全的特点，操作方面是合理可行的。

3. SpringBoot在线学习系统的总体设计

3.1 方案设计

目前一些在线学习系统因为使用了传统的SSM技术进行开发，没有使用主流的微服务架构、搜索引擎等技术，所以存在系统可扩展性差、可用性低等缺陷。为了解决这些问题，本系统采用以下方案：

（1） 在线学习系统采用SpringBoot微服务架构，实现系统对多种编程语言的兼容以及系统功能服务添加的易操作性，保证系统各微服务之间彼此独立，一个服务的终止不影响其他服务的运行，实现系统的高可用性。

（2） 针对课程检索功能上的不足，本系统采用ElasticSearch搜索引擎设计课程检索功能，进而实现在庞大数据量的情况下，课程搜索服务仍然可以高效工作。

（3）考虑到系统可扩展性，系统采用Maven父子依赖架构，将公用的模型类、Service服务、工具类分别进行封装，在其需要被使用到的微服务中进行引用。

（4）系统对外暴露的接口进行单独封装，以保证后续对接口的增删改不需要频繁地改动系统业务源码，系统使用swagger技术对接口进行文档描述，以保证前后端分离情况下的系统开发效率。此外，系统对异常进行统一拦截、抛出，以此给用户更好的使用体验。

如图1所示，系统的设计流程主要包括：系统需求分析、数据库分析、微服务框架搭建、前端Vue客户端开发、后台功能开发和前后端集成测试等。

3.2 功能设计

基于SpringBoot模式的在线学习系统是针对学生、校方、企业以及管理者而设计的系统，因此，该系统的角色分为学生、教学管理员和系统管理员。学生用户作为普通用户，应该具有登录注册、搜索课程、浏览课程信息、观看课程视频等功能。教学管理员作为特殊用户可以发布课程信息、修改课程信息、上传视频文件。而管理员作为管理用户，可以修改首页轮播图的配置、课程分类、热点课程、网站页面等信息[3]。因此，他们的功能模块如图2所示，也各不相同。

（1）学生端：用户输入正确的密码后，登录成功，随即可以单击页面上的课程进行预览和学习，在操作正确并单击开始学习后，相关保存在数据库中。

（2）教学管理端：教学方在输入正确的账号密码后，进入到教学系统的管理界面，在该模块中，可以查看、修改课程信息、发布课程信息、上传视频文件，进行课程章节的更新。

（3）系统管理端：管理员在输入正确的账号密码后，进入到该系统的管理界面，在该模块中，可以查看、修改页面信息，包括轮播图的配置信息、热点课程、课程分类信息。整个系统的功能结构图如图2所示。

4. SpringBoot在线学习系统的详细设计

系统的页面主要包括主页面、课程信息页面、课程搜索页面以及课程视频播放页面。主页面采用Nginx的SSI页面包含技术，实现页面的拆分以及重组。课程信息以及课程视频播放页面使用freemarker技术实现数据的动态填充。课程搜索页面采用Vue.js将页面进行组件化开发、课程信息为从后台获取的数据，并采用nuxt.js技术将页面进行静态化以便网络抓取。

4.1 SpringBoot在线学习系统的页面设计

4.1.1 主页面设计

在线学习系统页面使用SSI技术进行设计，系统通过Nginx的SSI技术，类似于JSP中的静态include技术，将页面分成一块一块的，最后进行合并渲染成HTML页面返回给客户端或用户。

4.1.2 课程信息页面设计

课程信息页面由主页或搜索页面的课程图片单击操作进入。课程信息静态页面的生成步骤为：首先远程请求课程管理服务获取数据模型信息，然后从GridFS中获取存储的课程详细页面的freemarker模板，接着将数据模型信息和freemarker模板进行结合生成一个HTML静态页面保存到GridFS中，最后将该HTML页面下载到web服务器中。

4.1.3 课程搜索页面设计

课程搜索页面基于Vue框架，以组件形式拼装页面，课程信息从ElasticSearch索引库中获取，分类信息从MySQL数据库中获取，然后通过nuxt.js技术将页面数据进行静态化，以便网络蜘蛛抓取页面中的关键字。Nuxt.js的服务端渲染工作流程为：用户发送请求到Node.js服务器，然后Nuxt.js将后台获取到的数据与Vue页面进行整合，最后将HTML页面返回给用户。

4.2 SpringBoot在线学习系统的注册登录设计

游客可以通过注册功能注册为用户之后，在个人中心查看自己的学习课程。系统为用户端、教学管理端、系统管理端三端分离，使用单点登录之后，管理员只需要输入一次用户名和密码即可进行三端的访问。

4.2.1 用户注册设计与实现

注册的用户身份只能为学生，注册信息包括userName（用户账号）、password（密码）、birthday（出生日期）和userpic（头像）等。学生输入注册信息后，客户端首先判断表单检验是否通过、然后从服务端获取数据判断用户是否已经存在，接着执行头像图片上传到图片服务器操作，并将图片所在服务器中的地址返回给前端，前端将全部注册信息添加到请求中发送给服务端，服务端会自动将用户密码进行加密，并以密文形式将密码存储到数据库中。

4.2.2 单点登录设计与实现

本项目包含多个子项目，例如个人学习平台、教学后台、系统管理后台等。项目采用单点登录的方案，保证用户只需要输入一次用户名和密码即可访问多个子项目。项目采用Spring Security和Oauth2技术解决用户登录子系统需要多次认证的问题，其将用户令牌存储在Redis中，作为实现单点功能的基础。用户信息以采用非对称加密算法的JWT令牌的形式进行存储，使Keytool工具生成认证系统所需的私钥证书，使用openssl导出公钥信息。

4.3 SpringBoot在线学习系统的ElasticSearch搜索引擎设计

ElasticSearch把数据库中的数据通过logstash加载到索引库中，以达到高效的检索效率，ElasticSearch 通过集群化操作，保证索引库的高可用状态。通过访问 GET/_cluster/health来查看ElasticSearch的集群健康状况。

4.3.1 logstash的设计

系统使用Logstash将数据库中的数据读取到ES中，读取时ES索引对象的mapping模板文件。本系统的模板文件包括课程详细信息模板、课程视频信息模板。

4.3.2 課程基本信息检索设计

课程基本信息的检索通过单击课程分类或关键字输入发送Http请求到服务端，接着服务端在ES索引库中将满足条件的课程信息反馈到前端中。

4.3.3 课程视频播放地址检索设计

课程媒资信息的检索通过获取页面路由中的课程id和课程章节id，然后根据课程id和章节id从ES索引库中获取到媒资文件的播放地址，并将视频播放地址与课程章节进行关联。

4.4 SpringBoot在线学习系统的系统管理设计

系统管理设计包括对首页轮播图等采用SSI技术包含的页面信息修改以及对整个系统页面的管理。

4.4.1 首页轮播图的设计

首页轮播采用Nginx的SSI页面包含技术，在主页面中通过使用<！-- #include virtual=”/include/index_banner.html”>引入轮播图页面。页面的修改逻辑与课程页面预览逻辑相同。

4.4.2 页面管理设计

管理员打开系统管理页面后看到的是系统的全部页面列表，在系统管理页面，管理员可以对系统页面进行预览、编辑、新增、删除等操作，可以通过站点名称以及页面别名查询页面信息。

4.5 SpringBoot在线学习系统的数据交互设计

系统的文件上传包括图片文件上传和视频文件上传，其中图片文件上传到FastDFS分布式服务器中，视频文件经过转码、分片放到nginx服务器中。图片服务器采用分布式文件系统FastDFS服务器，其以中小文件为载体，同时平台配合nginx，两者作为图片服务器提供对应的在线服务，客户端使用API读写文件，基本解决了大容量存储的问题，并且这套高性能的文件服务器可以提供文件上传、下载等操作。

结语

本文基于Intellij IDEA、WebStorm等开发工具和SpringCloud微服务、ElasticSearch搜索引擎、Nginx负载均衡、RabbitMQ消息中间件和Oauth2等技术，开发了一套在线学习系统。其主要功能包括单点登录、视频转码切片与断点续传、文件上传、课程学习、页面管理和课程管理等。该系统是一个可用性高、高内聚低耦合、可扩展性高的微服务架构系统。首先，对于用户个人中心页面的功能补充，用户可以查看课程的学习进度，下一阶段学习时自动加载到视频上次播放的位置。其次，对于系统管理功能的补充，增加系统管理员对人员权限的设定。再者，在课程学习系统中，可以扩展课程评价功能、课程模拟测试功能以及对课程章节介绍内容的显示。

参考文献：

[1]付志文，吴东醒，贺超波.可视化在高校在线教学系统数据挖掘中的应用研究[J].现代计算机，2022，（11）：112-116.

[2]张俊.基于Java的公务员备考微信小程序[J].电脑知识与技术：学术版，2022，（4）：112-114.

[3]陶铭，谢仁平.基于SpringBoot的在线教育系统研发及应用实践[J].软件导刊，2022，（7）：170-174.

作者简介：王琪，硕士，讲师，主要研究方向：计算机应用。

基金项目：江苏省现代教育技术研究2022年度立项课题——高职院校数字媒体专业图像处理课程的混合教学模式研究（编号：2022-R-100016）。