基于SpringBoot的少儿编程在线教育网站设计与开发

基于SpringBoot的少儿编程在线教育网站设计与开发

摘 要

目前少儿编程网站的质量参差不齐，开发一个兼具视频学习与趣味游戏，能够专门为少儿服务的网站是很有必要的。
本项目主要使用的技术有后端框架SpringBoot与前端框架Vue，整体使用MVC架构。因为使用前后端分离开发，所以具有良好的扩展性与维护性。数据库使用的MySQL，使用ElementUI来快速开发与优化前端界面。本项目前台有公告信息，免费课程，付费课程，编程互动，个人信息等模块。后台有基本信息管理，课程管理，购买记录等模块。其中趣味编程模块主要使用JavaScript、CSS技术来实现，还引用了一些Blockly的编程界面。
同时，本项目使用协同过滤推荐算法来给用户进行课程推荐，算法的实现主要在数据库的视图中，后端只需要进行一系列查询操作即可，由于算法在数据库中实时计算，不需要改动后端代码，对于后续的开发与扩展非常便利。编程互动模块也具有很好的扩展性，趣味编程小游戏开发完成后可以将其配置到Tomcat中，从而很方便的整合到项目中。

第1章 引言

1.1 选题背景

1.国内外少儿编程教育现状
游戏化教学是教师使用游戏的方式来进行教育教学活动的一种教学方式，可以让少儿通过悠闲的游戏来学习，在游戏的过程中培育学生的学习兴趣，提高学生的学习效率。少儿编程正是针对6-18岁的青少年开展的可视化编程课程，主要是为了培养青少年的编程思维，这对于他们之后的理科学习有很大的帮助。少儿编程主要分为两类，一类是以培养青少年的编程兴趣为主的Sratch图形化编程，它因简洁有趣的图形化界面而具有十足的趣味性。另一类是基于 Python、C++等高级编程语言的计算机编程教学，目标往往是参加信息学奥赛等科技品牌赛事。在国家政策引领，地方政府推行，中小学教育实践以及企业与社会各界支持、推动下，我国的少儿编程教育正处于逐步发展的阶段。
国外少儿编程较国内开始的更早一些，目前比较流行的少儿编程开发语言有由美国国家科学基金会所资助开发的具有“图像化”特点的LOGO语言；由麻省理工开发的开源平台Scratch编程语言和在线社区；由以色列开发的具有通关模式和动画风格的CodeMonkey以及可以供学生动手设计、搭建模型，并通过图形化编程软件自主编程控制机器人完成各项任务的乐高机器人。
2.国内外少儿编程网站的现状
国内主流的少儿编程网站有少儿编程网，编程猫，腾讯扣叮，阿儿法营等。少儿编程网内容丰富，类似于一个大论坛，适合各个年龄段的孩子学习，但对初学者有点摸不到头脑，用得都是第三方的开发工具，适合高级用户。编程猫网上手容易，技术实力强，界面和内容丰富，但内容过于偏游戏化，且只能在编程猫网站制作，不提供独立部署。腾讯扣叮是国内少数自主开发编程平台的公司之一，编程操作体验非常好，有非常丰富的资源，内容也非常多，但平台不提供独立部署，用户扩展接口几乎没有。阿儿法营使用了Scratch的开源项目作为网站核心技术，所以可以通过下载和导入Scratch的很多官方资源来跟Scratch对接，是目前应用比较广的开发平台，但受到Scratch技术限制，无法进行超越Scratch技术范围的扩展。
国外目前主流的少儿编程网站有Scratchjr.org，Scratch.mit.edu，Code.org，Tynker等。ScratchJr是适合年龄段5-7岁的孩童学习的少儿编程，通过拖拽功能积木块就可以开发游戏和互动故事。Scratch相当于ScratchJr的优化版本，可以使用可视化的代码块进行自主的创建动画，创作游戏互动。Code.org也是最流行的编程学习网站之一，httCode.org提供制作网站和游戏方面的免费课程，课程内容包括使用HTML/CSS/JavaScript等技术制作网站、开发游戏等，同时也可以在Code.org上进行排列块拼图游戏，或者学习《我的世界》中的编程一小时，以及通过冰雪奇缘等游戏学习一些基本的编程知识。Tynker的少儿编程是以积木、游戏、可控机器人编程为主的浸入式优秀学习平台，可以通过讲授基础的编程知识，然后过渡到Python和JavaScript。
在技术方面，对于Web 系统开发，Spring系列的框架以及SpringMVC架构等技术已趋于成熟，应用较为广泛，并且配套的 Maven以及 Tomcat 等技术非常便捷。面向前端界面开发的Vue轻量化框架，以及其中负责Axios数据请求的插件应用非常广泛。
3.少儿编程国内外发展趋势
Scratch语言与编程猫的Kitten语言目前是国内少儿编程行业的通用语言，目前为止少儿编程行业市场规模约为30-40亿元，用户规模约1550万。未来随着宏观利好政策的不断出现，行业规模将在5年内达到300亿。少儿编程行业未来发展方向，主要集中在如何解决行业内共性问题：师资力量不足，部分课程内容同质化严重，平台不完善以及服务体系缺失上。伴随着素质教育、创客教育以及 STEAM 教育等新型教育模式的兴起，少儿编程教育在培养学生数字化学习能力、学习习惯以及综合信息素养等多个方面备受重视，表明了包括编程在内的信息技术在少儿教育中的比重越来越大。
以市场渗透率2%测算，当前少儿编程教育行业市场规模约为280亿元，CAGR保持在17%，到2025年市场规模有望突破500亿元。若政策加速推进编程教育学科化，市场渗透率达到10%，则千亿赛道可期。少儿编程行业在一二线城市用户较多，在三四线城市发展前景较好。教学质量将会成为少儿编程教育未来发展的重点，这两年宣传是少儿编程的发力点，宣传做上来之后，后期留住顾客的重点仍然是少儿编程教师的质量。所以说师资也是需要解决的重点问题。
日本计划分别于2020年到2022年期间把电脑程序设计纳入中小学义务教育课程和高校必修课程。法国、爱尔兰等15个欧盟国家在课程中纳入程序语言，其中12个国家将在高中、9个国家将在小学开始教授。2017年10月，全球知名开发人员技能评估平台HackerRank，就各国对青少年编程教育的重视程度和渗透率进行了分析，发布了《2017 开发者技能报告》。该报告指出，目前青少年编程教育渗透率最高的国家是美国（44.8%），远远超过排名第二的澳大利亚（10.3%）和排名第三的英国（9.3%），所以美国仍是少儿编程教育的重要战场。欧盟将编程纳入学校课程，是为了让所有学生具备在当今数字社会中锻炼问题解决能力、逻辑思维技能与设计能力，并在一定程度上应对欧洲缺乏IT 技能劳动力的问题。

1.2 选题意义

当前编程教育机构课程体系本身的不完善导致编程学习缺乏可持续性，导致学生难以深入学习。并且现有市场里的在线编程教育系统依然存在大量的优质学习资源没有被合理利用，缺乏对教育资源统一管理的平台，存在着课程缺少精细化分类和管理、推广不足、应用不到位、不利于学生学习的问题，而现有的学习资源也比较分散，并没有形成系统化的管理，尤其是在三四线城市的学生，他们由于地区偏远无法享受到良好师资的力量，甚至于线下也无法接受到相关社团，选修课的学习，无法满足学生学习的需求。同时也缺乏完善的推荐功能可以对用户进行个性化推荐。为了让学生真正体验到适合自己的课程以及享受到体系化的学习，并为边缘地区的学生提供名师的课程学习，开发了基于个性化推荐的少儿在线教育系统。
本系统在开发前参考了国内外少儿编程在线教育产品的优势，为本系统的开发奠定了设计方向，解决了编程教育网站中趣味性教学及实践性缺乏的问题，同时解决了用户在繁杂的课程体系中的精确推荐问题，在线教育系统体系中虽然课程量庞大，但只有解决课程分类不够明确，推荐不够精准等问题才可以在同类系统中保持自己的优势。

第2章 系统需求分析

2.1 可行性分析

从经济可行性来看，如果开发系统的成本高于系统带来的收益则表明亏损了，对于是否投资该系统的开发就要慎重考虑。而系统的开发成本要低于其收益则证明该系统的开发没有问题，可以带来盈利。此少儿编程教育系统的课程由管理员进行审核后才会进行上传与发布，在质量上严格把关，并且有了编程小游戏的吸引，顾客对于该系统的付费课程一定会更感兴趣，进而刺激顾客进行购买。同时从长远来看，课程的反复利用以及编程小游戏的易扩展性对于系统后续开发来说可以节约大量时间与成本。
从技术可行性来看，是指在一定的时间内是否能完成软件的开发，软件的质量是否满足实际的要求，如果均符合要求，那么就可以通过技术可行性分析。此少儿编程教育系统前端使用了Vue框架，后端使用了SpringBoot框架，编程小游戏的开发主要运用了JavaScript和CSS技术，推荐过程的实现使用了协同过滤推荐算法，以上技术均是非常成熟且流行的技术，所以本系统所使用的技术完全可以胜任系统开发的需要。
从操作可行性来看，操作可行性是指此系统是否满足正常用户的需求，是否符合大众默认的使用习惯，对于初学者是否友好，大部分用户可以快速上手使用，此少儿编程教育系统的界面非常简洁，各个功能的使用也符合大众的习惯，可以通过操作可行性分析。
从社会可行性来看，从国内研究的报告中显示在三四线城市少儿编程教育网站的普及度还不够，市面上有的网站存在推荐的课程比较杂乱或趣味性不足等问题，本网站对这些方面的问题下功夫，所以本系统在社会可行性分析方面也是没有问题的。

2.2 功能性需求分析

本少儿编程教育系统有普通用户和管理员两类用户，本系统的目的是为了通过趣味性的小游戏以及审核过的视频进行教学，使少儿们懂得基本的编程原理并增加他们对于编程的兴趣。接下来将会分为用户、课程、课程推荐、系统管理员四个方面进行功能性需求分析。
系统前台的主要功能有课程的点赞收藏和学习以及在网页上进行打字练习、趣味拼图等在线编程小游戏，系统的后台主要功能有对于新增用户、新增课程和购买课程的统计图和对于前台新闻资讯、课程、讲师、用户等信息的管理。
系统的具体功能如图所示。

2.2.1 用户功能性需求分析

用户功能性需求是指通过用户的角度来分析系统所具有的实际功能。本系统中用户将拥有以下功能：
1.注册登录
用户输入基本信息后进行注册账号。注册成功后，输入账号密码实现登录操作。
2.公告新闻
用户可以浏览最新的公告信息以及新闻资讯并且具有评论的功能。
3.趣味编程游戏
趣味编程游戏包括打字练习，编程练习，代码转换等游戏。
4.个人中心功能
头像上传、修改密码、查看收藏视频、查看购买课程等功能。
用户功能性需求分析用例图如图所示。

2.2.2 课程功能性需求分析

课程功能性需求是指通过用户操作课程时所具有的功能，本系统中用户对于课程的操作将会有以下功能：
1.课程分类
课程分为免费课程与付费课程。免费课程可以直接观看学习，付费课程需要购买课程后需等待管理员给用户发送定制视频学习。
2.课程搜索与筛选
用户可以直接在搜索框搜索自己感兴趣的视频，也可以在将课程按照发布时间，课程类型等方式进行排序。
3.课程资源学习
用户可以看到课程的详细介绍信息，在登陆后可以实现点赞、收藏、评论等功能，并且可以进行视频的观看学习。
4.课程推荐
基于协同过滤推荐算法实现的课程推荐模块将会根据用户的喜好以及课程的受欢迎程度来进行相关的课程推荐。
课程功能性需求分析用例图如图所示。

2.2.3 课程推荐功能性需求分析

基于协同过滤算法实现的课程推荐功能是本系统的核心功能之一。本系统使用协同过滤算法中的基于用户的协同过滤，即根据用户的行为分析用户的兴趣，从而在用户群中找到和指定用户相似的用户，再综合根据用户的购买收藏等内容以及商品的受欢迎程度等综合信息来形成系统对于指定用户对此视频的喜好程度的预测。
推荐过程为首先实现对于同一视频用户间的对应关系,计算余弦相似度，之后进行视频评价的合计，再计算用户相关矩阵，从而得出用户对每个视频的喜好程度，最后为用户推荐几个视频。

2.2.4 管理员功能性需求分析

系统管理员可以对公告信息、新闻资讯、轮播图、普通用户、课程、讲师等信息进行增删查改操作。系统管理员功能性需求分析用例图如图所示。

2.3 非功能性需求分析

非功能性需求分析包括安全性、可扩展性、可移植性、易用性等方面的要求。
1.安全性
安全性是指是否考虑到了可能的风险，其中有保密性：不同的人群应具有不同的操作权限，拥有权限少的人群不能去操作权限外的数据。
2.可扩展性
可扩展性是指系统在之后的开发中若需要增加或修改某些功能应该是方便快捷的，不需要改动原有的大量代码从而实现高效的扩展。
3.可移植性
在开发过程中可移植性是很重要的。具有优秀的可移植性的软件可以适应不同环境，在部署等方面非常快捷有效，而想要达到优秀的可移植性的标准是使用正确且适合的开发工具。
4.易用性
在用户的角度看，在系统的使用中是否满足大众默认的使用习惯，画面是否简洁美观，使用体验感是否良好。在开发者的角度看，是否节省成本但快速的开发是很重要的。应尽可能参考用户的意见才能设计出具有良好的易用性的产品。

第3章 系统设计

3.1系统技术架构设计

此少儿编程教育系统使用的是B/S架构，其中包括数据访问层、业务逻辑层和表示层三层架构，三层设计的优势为高内聚低耦合。具体架构图如图所示。

3.2系统基础功能详细设计

3.2.1 登录注册

本系统分为普通用户和管理员，可以分别在前台和后台登录，其中管理员只能由超级管理员添加。普通用户忘记密码可以在登录界面输入账号、邮箱等信息找回密码。管理员在后台登录后可以看到统计的信息，其中包括新增的免费、付费课程以及新增用户等。

3.2.2 公告信息与新闻资讯

普通用户登录后可以看到首页的轮播图、公告信息与新闻资讯模块。系统管理员可以在后台对上述内容进行添加、修改、删除操作，将想要展示的内容放到轮播图中吸引用户点击。

3.2.3 课程模块

课程包括免费课程和付费课程，在导航栏中分别占据一个模块，用户均可以对视频进行点赞、收藏、评论和回复等操作，付费课程则需要购买课程后并等待管理员发送至个人空间进行观看，管理员可以根据订单在后台给用户发送付费定制课程，同时管理员可以在后台管理免费课程与付费课程，为了方便实现推荐功能，故先在课程类型管理中添加课程类型，在去课程管理中添加对应类型的视频。

3.2.4 用户管理

管理员可以通过改变用户的审核状态实现对异常用户封禁的操作，并且管理员可以实现对讲师的增加，删除以及对讲师介绍进行撰写并发布到前台对应的讲师模块，其中设置了讲师的类别，可以便于用户在前台筛选出自己感兴趣的讲师。

3.2.5 编程互动

对于少儿来说编程小游戏的吸引力远大于视频，所以编程模块中具有打字游戏，编程游戏等趣味游戏，可以帮助少儿在视频之余更加有效的理解编程的概念并锻炼其编程思维。管理员通过在后台将编程小游戏的简介、类型、跳转地址等设置完成后，并将编写好的小游戏配置到Tomcat服务器后，用户可以在前台直接跳转到对应的游戏界面，在网页上体验编程小游戏。

3.2.6 个人空间

用户可以在个人空间上传自己的头像、修改个人信息、修改密码。同时可以在个人收藏界面查看已收藏的课程，在个人中心查看已购买的课程并选择支付方式进行支付，在支付完成并等待管理员上传制作好的定制视频后，就可以在个人中心界面进行视频的观看学习。

3.3 页面UI设计

用户登录后首先看到的是系统的首页，一个界面的美观程度对于用户的第一印象很重要，尤其是少儿对于图像的感官更加敏感。公告信息和部分课程是以轮播图的形式展示出来，吸引用户点击跳转。新闻资讯是显示观看量最高的前四个，免费课程和付费课程根据协同过滤推荐算法的计算结果来分别为用户推荐四个视频。
主页面的UI设计图如图所示。

3.4 数据库存储模块设计

3.3.1 概念结构设计

本系统使用了MySQL数据库进行数据存储，其中包括课程、用户、公告、讲师等数据信息。本次设计概念模型使用E-R图如图所示。

3.3.2 逻辑结构设计

少儿编程教育系统的数据库可以抽象为21张表，分别为登陆访问时长表、文章表、文章分类表、用户权限管理表、收藏表、评论表、免费课程表、用户点击表、讲师信息表、新增用户表、公告表、付费课程表、点赞表、编程互动表、购买记录表、轮播图表、系统用户表、类型管理表、文件上传表、用户账户表、用户组表。下面展示部分关键表。
登陆访问时长表记录用户访问浏览器时的Token值，默认最大的访问时长为两小时，登陆访问时长表格式如表所示。

收藏表记录各用户收藏的内容，其中有标题、封面、收藏人等信息，收藏表字段格式如表所示。

评论表除了记录评论的内容也记录在哪个页面进行评论的，还有用户回复其他用户的内容以及用户的基本信息，评论表字段格式如表所示。

免费课程表需要记录上传的视频、封面图片、课程名称、点赞数和点击数等信息，免费课程表字段格式如表所示。

付费课程表与免费课程表类似，唯一的区别是不需要记录视频，视频由管理员发送至用户的个人中心，付费课程表字段格式如表所示。

点赞量是课程推荐的重要信息来源，所以需要保存点赞人、点赞状态等信息，点赞表及其字段格式如表所示。

编程互动表记录了跳转链接、标题名称、封面图片等信息，编程互动表字段格式如表所示。

购买记录表会记录购买人的ID，并且会记录其备注、电话和课程的基本信息，购买记录表字段格式如表所示。

系统用户表会记录普通用户的基本信息，其中还有审核状态，可以决定用户是否可以正常使用其字段格式如表所示。

由于课程推荐的需要，要把相似的课程归类为同一类型的视频，类型管理表其字段格式如表所示。

文件上传表记录了视频上传到的路径，方便系统访问时找到其位置，其字段格式如表所示。

用户账户表记录了用户的所有基本信息，其中密码是md5加密后的密码，用户账户表字段格式如表所示。

第4章 系统实现

第5章 系统测试

5.1 系统功能性测试

在对系统进行功能测试时无需关注代码实现过程，更多的应该从用户的角度出发，测试功能是否能够正常使用，使用效果是否满足预期。
系统前台是用户所直接使用的界面，前台的功能测试结果如表所示。

系统后台是管理员直接操作的，直接影响到前台的展示效果，系统后台功能测试结果表现良好，测试结果如表所示。

课程推荐是本系统的核心功能之一，测试结果如表所示。

5.2系统安全性测试

防止用户恶意从评论框内输入违规内容，即SQL注入问题，系统使用了Mybatis管理数据库解决了此问题。同时为了防止用户知道系统后台的URL地址后，通过地址栏直接跳转到系统后台的内容从而跳过了登录界面，为了解决此问题，系统使用了拦截器来拦截，同时也会利用Token来判断用户的身份。

结论

本系统通过系统需求分期、系统设计、系统最终实现等一系列软件工程的开发步骤，对于当前少儿编程教育的不足之处进行了分析，使用成熟的框架开发了较为完善的少儿编程在线教育网站。
论文首先介绍了少儿编程的国内外现状与发展趋势，之后通过功能性需求分析和非功能性需求分析分别解析了系统的功能和安全性问题，随后对系统的数据库进行了设计，同时也对系统用户、管理员拥有的功能做出了用例图，使得其功能更加清晰的展示出来。有了上述的分析与准备工作，在确定了所使用的技术与开发工具后，就正式进入开发阶段，在高内聚低耦合的思想基础上对各功能进行模块化分类与开发，分别实现了注册登录、点赞收藏与评论、购买课程、课程推荐基本信息增删查改管理、编程小游戏在线使用等一系列模块的开发。最后进行了测试，系统很好的通过了测试，满足了最初的预期。
尽管本系统达到了开始的预期，但系统应随着实际运行中的社会环境而做出进步，所以系统的功能还需要进一步的扩展。
课程的播放功能有待进一步完善，可以添加一些弹幕效果来增加用户观看视频的体验，课程推荐是基于用户进行推荐的，后续可以进一步增加基于视频内容进行推荐的算法。考虑到用户基于移动端的使用量非常庞大，之后将此系统应该扩充到移动端，增加受众群体与用户体验。随着用户使用量的增加应该将项目部署到Hadoop平台并使用Redis缓存，进一步优化其性能。