基于SpringBoot在线科普教育系统的设计与开发

基于SpringBoot在线科普教育系统的设计与开发

管超龙

中国联合网络通信有限公司济南软件研究院，山东省济南市，250100，

摘要：目前市场上在线教育种类繁多，类型主要分为职业技能、专业资格、升学等几大类，专门针对中小学生的科普教育却一直是个空白，但是中小学生各方面的认知正处于快速发展的阶段需要良好的教导才能树立正确的认知面，没有详细规范的在线科普教育网站。在线科普教育系统主要通过SpringBoot框架进行开发，本质上SpringBoot就是配置好的Spring，本系统前端运行在Node.js,本系统后端运行在Tomcat。在线科普教育系统的功能实现，能够为中小学生提供高质量的学习体验，但还是存在一定的不足，只是实现了系统必要功能，人性化的推荐服务不够完善，后期会考虑采取推荐算法提供更好的推荐服务。

关键词：在线科普教育；SpringBoot；SpringCloud；

引言：疫情反复的现在，线下教学面临的风险有很多，全国很多地区直接开启了线上教学模式，疫情风险区居民甚至足不出户，在家办公，对于中小学生而言此刻正是天性发散的时候，因此需要在遵循疫情防控的同时做好孩子天性的引导，于是作为一个计算机专业的学生，希望通过自己四年所学的知识编写一款在线科普教育系统，引导中小学生从网上认识世界的美好和奇妙，让他们的童年不只有王者荣耀还有诗和远方，让他们面对陌生的世界不再那么迷茫和忐忑而是充满探索的激情，科普视频带中小学生打开认识世界的大门。

一、基于SpringBoot在线科普教育系统的开发环境及平台

（一）开发框架

1、 SpringBoot框架

SpringBoot基于Spring4.0设计，进一步简化了Spring应用的整个搭建和开发过程。可以理解为SpringBoot是配置好Spring.xml等配置文件的Spring架构，只需要注解就可以实现对应配置功能，本系统是基于SpringBoot框架实现的各微服务模块的功能开发和整个微服务架构，所有依赖组件的配置和开发都是基于SpringBoot实现[2]。

2、SpringCloud框架

微服务架构是一种先进的架构模式,它将业务系统彻底组件化,服务化的思想是IT应用应对互联网思路,云端部署的最佳解决方案之一,而Spring Cloud对微服务架构提供了全面的技术支持,是实践微服务架构案例最优技术框架.基于Spring Cloud框架实现微服务架构的应用显著地提升了响应速度和持续集成能力,实现了开发,测试,部署运维的一体化.SpringCloud实际是很多框架总称。它利用Spring Boot简化了分布式系统基础设施的开发，可以用Spring Boot的开发风格做到一键启动和部署。最终给开发者留出了一套简单易懂、易部署和易维护的分布式系统开发工具包。开发者只需要通过Maven引入SpringCloud开发工具包就可以快速实现微服务架构。本项目使用阿里巴巴Nacos代替了SpringCloud中的Netflix和Config组件实现微服务注册功能。本系统的前端请求转发以及微服务之间的负载均衡和接口方法调用都是通过SpringCloud框架实现，后端每个微服务模块都有对应的本地端口从而模拟不同微服务地址，微服务模块通过Nacos注册唯一标识的微服务名并绑定对应端口号，Gateway将前端URL请求转发并且负载均衡到对应的后端微服务模块进行处理，Feign实现微服务之间Controller方法的调用而不需要导入对应微服务，遵循了高内聚，低耦合的代码开发标准。

3、Mybatis-Plus框架

Mybatis-Plus将使用Mybatis过程中那些常用且固定的简单CRUD套路进行进一步封装（BaseMapper，page等等）并且由于service也就是调用mapper进行服务的，所以自然mp也将service进行了封装，只需要传参（实体类）继承配置就可以使用。Mybatis-Plus提供的BaseMapper接口包含了常用且固定的简单CRUD，还提供了对应接口方法的SQL语句。 只需要简单配置传参，继承就可以进行单表操作[3]。Mybatis-Plus=Hibernate(优点)+Mybatis(优点)是本系统基础的增删改查功能都是通过Mybatis-Plus框架的代码生成器实现的，并且Mybatis-Plus提供的很多方便的API接口，开发过程中提供了很多便利。

（二）平台功能

1、微信登录/支付

微信登录和支付都是调用微信平台提供的开放API，实现对应服务。以下是微信登录实现过程：

(1)首先第三方应用需要通过微信开放平台的审核还有认证，确保用途合法，获取第三方专属ID和秘钥等信息。

(2)接下来就是访问微信平台固定地址（URL），根据微信认可的ID在平台端获取微信二维码（微信平台提供和显示二维码）。

(3)用户扫描二维码授权后平台会根据服务端访问URL的拼接参数确定接下来的服务（用户扫码授权后的信息处理也是微信平台提供）。

(4)直接拉起第三方应用或者将用户信息凭证通过HttpClient技术封装转发给第三方接口的域名处理（redirect_url）。

(5)若是redirect则微信平台会返回一个code凭证，然后根据code凭证,ID和秘钥再次封装httpclient请求微信开放平台。

(6)返回的access_token和openid，然后根据返回的token和id再次HttpClient访问微信平台得到用户信息。

(7)最后可以将用户信息转为token字符串传递给前端进行显示。

2、 Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，让JavaScript 运行在服务端的开发平台[16]。

实际上Node.js就是优化Chrome V8引擎某些特殊API接口，使得V8在非浏览器环境下运行得更好的优化版Chrome V8引擎，专门用于运行JS以及基于JS的Vue（Vue框架，Nuxt框架）。

（1）Node.js在服务端运行后就像是自己在服务端搭建了一个浏览器，(模拟浏览器，向后端发送HttpClient请求）。

（2）前端代码就可以在自己的服务器的Node服务中编译运行了。

而外部浏览器则可以通过网址进行本地项目的访问。

（3）前端服务器：Node.js==后端服务器：Tomcat：将项目在对应平台（Node.js/Tomcat）运行起来。

Vue/Springboot项目都是在Node/Tomcat服务器上运行，然后通过localhost本地端口进行访问的。

（4）JavaScript运行环境，不需要浏览器直接运行js代码，模拟浏览器效果。

本系统的管理员后台还有用户前台都是运行在Node.js模拟的浏览器内核上。

二、基于SpringBoot在线科普教育系统的系统分析

（一）系统需求分析

本系统的主要分为用户前台和管理员后台两大块，具体需求如下所示：管理员后台：后台管理员是整个在线科普系统的核心模块，也是功能开发过程中最主要的部分，管理员通过后台对网站内容进行管理。管理员具有最高权限，可以管理系统讲师信息，管理课程分类信息，管理课程信息，管理广告信息，统计分析数据等等操作。

客户端功能包括：

●用户登录功能  登录分为微信扫码登录和手机号密码登录，用户可以采取不同的方式登录系统。

●用户注册功能  注册分为微信扫码注册和手机号验证码注册，用户都必须注册后才可以体验系统功能。

●用户功能模块  用户登录系统后可以修改自己的资料，头像上传，微信支付后观看视频，发表评论，查看讲师详情，查看视频列表，搜索视频等等功能。

该系统是Web项目，可以随时随地通过浏览器输入网址查看了解感兴趣的科普视频的网站，方便了用户使用和操作。

（二）可行性分析

当下，在线教育的发展进入了黄金期，针对中小学生科普的任务也迫在眉睫，目前双减的政策也让中小学生获得了充足的时间可以睁开眼看看世界的发展，认识世界才能改变世界。在线科普教育系统的出现正好可以满足中小学生天真烂漫的好奇心，让他们即便闲暇在家也可以通过视频形式认识外面的世界。

（三）经济可行性

随着科技和经济的发展，人民生活发生了翻天覆地的变化，网络进入了千家万户，手机和电脑家家必备，在线教育的普及具备了物质前提，当下疫情反复，响应政府号召，足不出户在家办公学习，防范疫情的同时也为了保证教育的持续进行，在线教育成为了现在学习的主流，于是针对中小学生的在线科普也成为了重点教育方向之一[4]。

三、基于SpringBoot在线科普教育系统的开发应用

（一）系统后端

Edu_parent是总项目名。

Common模块是通用微服务模块，包含全部微服务公用的基础功能类。

Infrastructure模块是网关中间件负责前端请求转发到对应的后端微服务功能模块。

Pom.xml文件是maven文件，包含对应模块下的全部所需依赖组件。

Service模块为微服务模块的总模块名，里面包含全部微服务功能模块：

Service_edu模块为科普教育模块，课程，讲师的管理功能

Service_cms模块为广告模块，轮播广告的增删改查功能

Service_msm模块为验证码模块，手机验证码生成以及发送功能

Service_order模块为订单模块，订单生成和微信支付功能

Service_oss模块为图片模块，头像，封面上传到阿里云功能

Service_statistics模块为统计分析模块，统计分析系统信息功能

Service_ucenter模块为用户模块，用户登录注册功能

Service_vod模块为视频模块，视频上传和视频增删改查功能后端工程源代码的结构。

（二）系统前端

管理员后台，vue-admin-template-master为Vue框架工程名。

源代码是src文件夹，主要代码文件夹如下：

utils文件夹为前端与后端实现http请求和数据交互的工具文件夹。

api文件夹为前端配置具体http请求参数的配置文件夹。

views文件夹为前端界面以及Js方法调用api层的功能文件夹。

主要代码文件的调用关系：views->api->utils。

管理员后台源代码文件结构。

用户前台，vue-front为Nuxt框架工程名。

主要代码文件夹如下：

utils文件夹为前端与后端实现http请求和数据交互的工具文件夹。

api文件夹为前端配置具体http请求参数的配置文件夹。

pages文件夹为前端界面以及Js方法调用api层的功能文件夹。

layouts文件夹为界面框架需要填充pages中的界面，包含界面上下的导航的框架文件夹。

主要代码文件的调用关系：layouts->pages->api->utils

用户前台源代码文件结构。

（三）系统实现

1、用户前台打开Web网站后，即来到了在线科普视频网站的首页界面，首页设计既要简洁又要美观，这样才符合中小学生的使用习惯。

首页内容包括顶部导航，轮播广告，热门视频推荐，名师大咖推荐，视频搜索等功能。

2、用户注册登录

本系统有两种注册方式：手机验证码注册，微信扫码注册；若用户想要使用该系统功能需要先注册再登录也可以直接微信扫码注册登录，手机验证码注册界面，微信扫码注册登录，可以通过手机微信直接扫码注册登录。

3、个人信息中心

用户可以点击界面右上角头像进入个人中心，更新修改个人信息。

4、科普视频展示

登录后就可以点击课程体验功能了，课程列表既细分大类又细分了具体类别，让中小学生可以点击筛选从而更好的选择自己感兴趣的课程，科普视频列表界面。

点击开始学习就会跳转到科普视频详情界面，详细解释课程主旨并且可以展示他人评论内容和主讲老师信息，可以让孩子们初步判断是否感兴趣，兴趣才是最好的老师，课程搜索让中小学生可以更好的查找选择自己感兴趣的课程，若是收费课程则需要先进行微信支付才会解锁课程大纲允许用户观看。类似微信登录配置参数然后访问对应的微信开放平台，最后微信平台根据提供的API参数配置对应功能的二维码。微信支付同样，平台提供对应金额的二维码，用户扫码支付后，具体资金转账在微信平台进行处理，服务端若想知道用户是否支付只能用订单号通过API查询用户支付信息。

5、讲师展示

点击名师后会跳转到讲师列表，讲师列表将全部讲师展示出来，让中小学生可以通过讲师介绍以及其主讲课程更好的选择自己感兴趣的讲师，讲师列表将全部讲师展示出来，让中小学生可以更好的选择自己感兴趣的讲师，点击讲师头像后可以进入导师详情界面会显示该导师相关信息以及主讲课程。

6、管理员功能

管理员首页可以看到左侧全部管理员功能展示，管理员可以通过后台进行讲师管理，课程分类和课程管理等等操作，以便为用户提供更好的服务，管理员可以通过后台对于讲师进行增删改查操作从而实现讲师管理功能。讲师管理列表中可以修改，删除和多重条件查找导师信息，从而实现管理员对于导师的管理。添加讲师功能，包含讲师基本信息还有讲师头像上传功能，头像上传到阿里云OSS保证了数据的稳定和安全。

7、课程分类管理

课程分类功能分为添加课程分类和展示课程分类，添加课程分类功能，根据excel模板类型，上传对应的excel文件，后端会逐行解析excel文件中数据然后添加到数据库从而实现添加课程分类功能，课程分类列表，既树形显示课程分类又提供了课程类别查询功能[5]。

课程管理分为添加课程和课程管理列表。添加课程分为三步，首先是填写课程基本信息包括课程标题，分类，讲师以及简介和课程图片等，接下来便是创建课程大纲章节和小节然后进行视频上传，视频上传到阿里云远程仓库从而实现视频的存储，最终管理员审核课程界面决定是否发布该课程，课程管理列表，分页展示全部课程，管理员可以对课程实现增删改查来进行课程管理。

结束语：随着我国科技和经济的发展，人民生活发生了翻天覆地的变化，网络进入了千家万户，手机和电脑家家必备，在线教育的普及具备了物质前提。当下疫情反复，响应政府号召，足不出户，防范疫情的同时也为了保证教育的持续进行，在线教育成为了现在学习的主流，于是针对中小学生的在线科普也成为了重点教育方向之一。在线科普教育系统的初衷便是让中小学生即便因为疫情受困在家，也可以在天性发散的年纪认识到外面世界的精彩。

参考文献：

[1]叶沛东,董宜祥.后疫情时代在线教育的现状及未来发展[J].办公自动化,2021,26(15):6-8.

[2]侯春笑,田爱丽.后疫情时代在线教育的公众关注与反思——基于知乎,微博平台话 语的扎根分析[J]. 电化教育研究, 2021, 42(6):7.

[3]曲茜美, 曾嘉灵, 尚俊杰. 疫情期间如何有效开展在线教学[J]. 教师教育论坛, 2020, 33(4):4.

[4]赵学作, 赵少农. Node.js的安装与调试[J]. 网络安全和信息化, 2019(3):2.

[5]陈岩. 轻量级响应式框架Vue.js应用分析[J]. 中国管理信息化, 2018, 21(3):3.