【在线学习网站的设计与实现9300字（论文）】

在线学习网站的设计与实现摘要：现阶段我国线上教育行业方兴未艾，随着2020年新冠肺炎的爆发，以“互联网+”为背景的教育应用场景，将在线教育推上了主舞台，每个学生都在家通过网络学习，更让大家认识到在线教育的重要。为了使同学们更加有目的地进行学习，通过该校教师能够将教学资源传达到学习平台，基于SpringBoot的在线学习网站应运而生。这个在线学习网站系统使用SpringCloud框架构建微服务；以MyBatis-Plus构架为持久层；通过Nacos组件配置和管理微服务；前端使用Vue.js与Nuxt技术；中间有阿里云视频点播、Redis、阿里云OSS。此系统有效地实现了线上课程的管理，满足了用户的基本学习需求。关键词：微服务；Nacos；SpringBoot；SpringCloud；Redis目录TOC\o"1-3"\h\u18543第一章引言 11646第二章相关技术介绍 2289382.1SpringBoot 270692.2Vue.js 251492.3Redis缓存技术 223454第三章系统需求分析 4258693.1业务需求概述 441273.2功能需求分析 4172093.2.1未登录用户模块 4116903.2.2普通用户模块 6166523.2.3管理员模块 7135633.2.4功能模块说明 972643.3非功能性需求分析 1029769第四章系统设计 11315374.1系统总体架构 11204164.2功能模块设计 1158114.2.1功能模块图 11129704.2.2未登录用户模块 1241644.2.3普通用户模块 1459264.2.4管理员模块 15181384.3数据库设计 1816482第五章系统实现 23309285.1系统环境搭建 23255075.2主要功能模块实现 2374975.2.1未登录用户模块 2378505.2.2普通用户模块 27311055.2.3管理员用户模块 3220026第六章系统测试 37229776.1系统测试目标 37117196.1.1功能性测试目标 37212016.2.2性能测试目标 37126926.2测试工具和环境 37225546.3测试用例和结果 3822217第七章总结 415091参考文献 42第一章引言在线教育形式多样，在线教育平台日益丰富，比较出名的有腾讯课堂、万一课堂、新东方等，开发一个在线教育系统能够简化师资和生源的管理；在线教育能够录播或者回放，方便学生复习；在线教学可以使用多种场景、多种模式，让学习更加轻松有趣。这次我开发的这个基于Springboot的在线学习网站主要是面对大学生群体，综合了其他网站的一些特点，支持课程视频的点播，在首页中推出了热门课程与热门教师，以及相关学院的课程，用户可以根据指定教师选课或者选择指定学院的所有课程。管理员在后台管理系统中通过增删改查数据库来达到改变课程和教师。帮助大学生好好利用空闲时间，时刻学习，还能使管理变得更容易和便捷。第二章相关技术介绍论文这一部分主要阐述了系统设计与实现过程中需要用到的核心技术，前端使用Vue.js与Nuxt技术，后端采用SpringCloud微服务架构，系统采用关系型数据库MySQL，持久层用的是Mybatis-Plus，中间包括Redis、阿里云OSS、阿里云视频点播等技术。2.1SpringBootSpringBoot是轻量级企业开发应用框架，简化Spring应用的，使Spring在应用开发上的应用速度更快、效率更高[4]。SpringBoot在开发者与Spring框架之间起到中间层作用，旨在减少开发人员对于该框架的重视，能把更多精力花到业务代码上，在开发程中对相关的Spring功能简化配置引入或启动[5]。使用SpringBoot不用太关注XML的配置，并更加注重Spring的应用发展。SpringBoot的主要功能有以下几个方面：可利用Spring项目，在数秒的引导页面上建造项目更加方便向外输出RESTAPI、Web,WebSocket等多种形式服务安全策略集成简单明了支持关系数据库与非关系数据库两种支持Tomcat等运行期内嵌容器支持热启动，具有强大的开发包2.2Vue.jsVue.js是一套渐进式框架，用于搭建用户界面。Vue的核心库很容易学，并能够与已有项目或者其它库整合。Vue仅着眼于视图层，所用设计为自底向上递增开发。Vue主要特点如下：在有\t"/item/Vue.js/_blank"HTML，\t"/item/Vue.js/_blank"CSS，\t"/item/Vue.js/_blank"JavaScript的基础可以快速上手。它能够处理任意大小的应用程序、简单而小的内核和渐进式技术栈。40kbmin+gzip运行大小、省心的优化。2.3Redis缓存技术Redis作为高性能key-value数据库提供C#、PHP、C/C++、Java客户端，方便使用[7]。它支持很多value的存储类型，包括set、string、list、hash和zset。Redis主要特点如下：速度快。Redis通过C语言来实现。支持Set、Hash、Zset、String、List等多种数据结构。源码简单，约31000行C语言源代码。功能非常丰富。第三章系统需求分析对系统进行需求分析，是软件项目开发能否成功的根本。对要解决的问题进行详细分析，如果软件在实际中不能达到顾客的需求，那么项目就需要更改，耗时又耗力。所以在项目开发之前，一定要先弄清项目的需求，需要什么样的数据和取得怎样的成果。3.1业务需求概述在线视频教育系统由业务管理模块、Redis数据库模块、数据持久管理模块、前台管理模块、后台管理模块组成，如图3.1所示为系统的总体需求示意图。图3.1系统总体需求图3.2功能需求分析3.2.1未登录用户模块未登录用户模块用例图，如图3.2所示：图3.2未登录用户用例图未登录用户模块中的注册功能的用例说明如表3.3所示。表3.3未登录用户模块的注册功能用例说明用例名称用户注册功能主要参与者没有登录的用户用例说明主要实现了系统的注册功能的运行前置条件1.所述登录用户为所述系统的未登陆用户2.该用户一直没有注册基本事件流参与者动作系统响应1.进入主页后，单击“注册”2.弹出已注册页面。3.录入有关注册信息并执行注册操作。4.校验信息，保存到数据库。后置条件刷新首页特殊需求无发生频率低未登录用户模块登录功能用例见表3.4。表3.4未登录用户模块的登录功能用例说明用例名称用户登录功能主要参与者没有登录的用户用例说明主要实现了系统登录功能的运行前置条件1.所述登录用户为所述系统的未登陆用户2.该系统也没有用户登录基本事件流参与者动作系统响应1.进入首页，点击“登录”按钮2.弹出登录页面。3.录入用户的相关资料并执行登录操作。或者通过微信扫码登录。4.校验信息，保存在数据库中。后置条件刷新主页特殊需求无发生频率低未登录的用户右上角会显示注册登录，用户可使用手机号码注册或直接使用微信扫码登陆。未登录用户能浏览平台的课程及讲师，可以观看平台内免费的课程视频。3.2.2普通用户模块普通用户模块的用例图如图3.5图3.5普通用户用例图如表3.6所示为普通用户模块购买收费课程功能用例描述。表3.6普通用户模块的购买收费课程功能用例说明用例名称用户对收费课程的购买功能主要参与者一般用户用例说明主要实现了系统收费课程购买功能运行前置条件1.用户处于登录状态2.课程是要收费的基本事件流参与者的动作系统响应1.点击收费课程2.进入课程详情页3.点击“立即购买”按钮4.输入订单详情页5.单击“去支付”键6.弹出该支付二维码7.用手机扫码付款8.付款成功后回到课程详情页后置条件刷新课程详情页特殊需求无发生频率低普通用户模块中的小节小测功能的用例说明如表3.7所示。表3.7普通用户模块的小节小测功能用例说明用例名称用户小节小测功能主要参与者普通用户用例说明主要实现了系统中课程的小节小节功能运行前置条件1.用户处于登录状态基本事件流参与者动作系统响应1.单击课程2.走进课程详情页3.点击“测试”按钮4.弹出测试试题5.点击“提交”按钮6.弹出成绩后置条件刷新课程详情页特殊需求无发生频率低登录过的用户右上角会显示名字和头像，点击头像可以进入个人中心对个人信息进行修改。普通用户可以对课程评论，对于收费课程也可进行购买。普通用户在观看视频后可以进行课程小节小测，并且成绩会保存到个人中心。3.2.3管理员模块管理模块用例图，如图3.8所示：图3.8管理员用例图讲师添加功能的用例说明如表3.9所示。表3.9讲师信息添加功能用例说明用例名称讲师信息添加主要参与者系统管理员用例说明主要是为了实现讲师相关资料的增加操作前置条件1.登录的使用者为该系统的管理员使用者2.即将输入讲师为单位成员角色3.这位讲师一直没有输入基本事件流参与者动作系统响应1.进入讲师管理界面点击“用户添加”2.弹出了新的讲师页面。3.输入讲师信息，单击“保存”键。4.校验信息并保存在数据库中。后置条件刷新讲师的管理列表特殊需求无发生频率低如表下3.10所示为课程信息添加功能的用例说明。表3.10课程信息添加功能用例说明用例名称课程信息添加主要参与者系统管理员用例说明主要是实现了增加课程相关资料的操作前置条件1.登录的使用者为该系统的管理员使用者2.将要录入的课程是单位成员角色3.这门课一直没有输入基本事件流参与者动作系统响应1.在课程管理界面中，点击“课程添加”按钮2.弹出新增加课程的网页。3.输入课程信息，点击“保存”按钮。4.校验信息，保存到数据库。后置条件刷新课程管理列表特殊需求无发生频率低讲师管理模块是管理员对平台内的讲师进行管理，主要提供对讲师的名字、头衔、资质、简介及头像进行添加或更新，可以对讲师按条件查询。(2)课程管理模块是通过管理员对平台内相关课程资源进行维护和更新，提供的功能主要是增加、删除、更新、按条件进行查询。其中，新增功能时，编辑了与课程有关的资料、章节的资料、课程封面图片，及将章节小节视频上传至阿里云OSS中，每章节小节可加入小节小测，对每个小节视频观看后进行小节测试并得到分数。(3)课程分类管理是对学校的各个学院进行分类，并显示对应的学科。(4)轮播图管理，主要是针对首页轮播图做增删改查动作。(5)统计分析管理是对平台内学生课程播放、登录次数和学生注册进行统计分析。3.2.4功能模块说明在线学习网站包括三大模块。未登录用户模块涵盖了注册、登录、浏览讲师信息、浏览课程信息、观看免费课程等功能。未登陆用户右上角显示注册登陆情况，用户可以通过手机号、验证码进行注册，或者通过微信扫码直接登录。普通用户模块，在平台主页的右上角会显示名字和头像，点击头像可以进入个人中心修改个人信息。一般的用户都能就课程发表自己的意见，至于收费的课程还能买。看完视频之后，就能做课程小节的小测，并且成绩会保存到个人中心。管理员模块包含讲师管理、统计分析管理、轮播管理、课程管理、课程分类管理。在对课程、讲师的添加和更新时，图片和课程视频都是存储在阿里云，但地址会存储到Mysql数据库中。对首页轮播图进行配置和管理的功能称为轮播管理。统计分析管理是对平台内学生课程播放、登录次数和学生注册进行统计分析。为了让用户更好的使用在线学习网站，详细地阐述了每个模块的基本功能，详细功能具体见表3.11：表3.11 功能模块描述序号功能模块功能功能说明操作者1未登录用户模块登录/注册可注册手机号和验证码，也可直接微信扫码登陆。未登录用户2普通用户模块/未登录浏览讲师信息点击首页的讲师，显示所有讲师的信息，再次点击讲师头像显示讲师的详细信息。未登录/普通用户3未登录/普通用户模块浏览课程信息在首页点击热门课程，或点击课程显示所有课程的信息，再次点击某门课程显示课程的相关信息。未登录/普通用户4未登录/普通用户模块观看免费课程点击免费课程，进入课程详情页面，点击课程小节即可播放课程视频。未登录/普通用户5普通用户模块对个人信息进行修改点击头像进入个人信息，可以修改个人名称、手机号码、性别、年龄、简介、头像等信息。普通用户6普通用户模块购买课程单击收费课程，访问课程详细资料页，单击立即购买将跳过购买页面，点击决定付款，就跳过微信二维码。付款成功后将回到课程详情页面，就可以看收费课程视频了。普通用户7普通用户模块小节小测在每个课程的详情页面中，每个章节下面的小节都有小节小测，点击小节小测会弹出题目，答完题目，点击提交会显示成绩并保存到个人中心的成绩。普通用户8普通用户模块查看小节小测成绩单击头像，输入个人信息，单击成绩会显示历史小测答题成绩。普通用户9普通用户模块课程评论登录过的用户可以在每个课程详情页下方，对课程进行评论。普通用户10管理员模块讲师管理主要提供对讲师的名字、头衔、资质、简介及头像进行添加和更新，按条件查询。管理员11管理员模块课程管理对课程资源进行维护和更新，提供的功能主要是更新、按条件、增加、删除进行查询。管理员12管理员模块课程分类管理可以查看各个学院下面的课程分类。管理员13管理员模块轮播管理用以管理首页轮播图。管理员14管理员模块统计分析管理可以根据时间查看学生课程播放次数、登录次数和学生注册等情况进行统计。管理员3.3非功能性需求分析在线学习网站管理系统功能性要求中，对于功能要求做了描述。1.系统的标准性。系统遵循软件行业相关标准及教育服务与监管体系信息化建设项目相关标准与规范。2.系统的稳定性与可靠性。系统运行时，能够按照指定的时间完成顾客的要求与应答。3.该系统具有良好的可扩展性来适应日益增长的用户，业务变化和其他扩展需求。4.系统的高效性。由于性能上要满足大量数据处理，承担较大的并发性负载，为了让业务能够顺畅运行，请求响应时间不得大于20S。5.系统的易用性。系统的页面美观、简洁，方便满足用户上手操作。第四章系统设计4.1系统总体架构在线学习网站的总体结构主要由数据持久层、服务层、Gateway网关、Nacos注册中心和客户层等共五个层次组成，运用微服务的思想把系统分成功能专一同时互相独立的多个小型服务。系统开发的总体架构参见图4.1。图4.1系统技术架构图客户端：分后台系统和前台系统，供用户和系统互动。主要功能是接收用户的数据和从数据库获取数据。后台系统管理员能够对课程、讲师、首页轮播等进行管理的权限；在前台系统中，普通用户能浏览相关课程和讲师的详情信息，还可以买一些心仪的课来学。服务层：它包括订单服务、视频服务、评论服务以及其他功能专一而又相互独立的若干小服务，通过协同合作，实现系统各项业务功能。数据持久层：用于和服务层交互数据。4.2功能模块设计4.2.1功能模块图根据3个模块的联系，可归纳为功能模块图，参见图4.1：图4.1功能模块图4.2.2未登录用户模块注册登录功能模块用户未登录之前可以浏览平台内课程、讲师的信息，可以学习平台内免费的课程，但不能评论和购买收费课程，点击评论和购买会提示请先登录。如图4.2所示为用户注册登录的类图。图中由方法与属性两大部分组成，其中属性有：年龄、性别、用户密码、用户ID、手机号相关信息；方法部分有：用户注册、用户登录、获取用户信息、根据id获取用户信息。图4.2用户信息类图图4.3为注册功能的UML时序图。图4.3用户注册时序图登录功能的UML时序图，如图4.4所示。图4.4用户登录时序图4.2.3普通用户模块普通用户模块中，用户可以点击头像进行个人中心，通过微信支付购买收费的课程，可以在课程详情页下面进行评论，进行课程小节小测。课程购买功能模块课程购买功能类图见图4.5。图中由方法与属性两大部分组成，属性部分主要有：用户ID、课程ID、课程名称以及其他信息；方法部分有：创建订单、获取订单详情、创建微信订单接口。图4.5课程购买类图课程购买的UML时序图，如图4.6所示。图4.6课程购买时序图4.2.4管理员模块在后台管理员模块中，左侧功能区显示涵盖课程管理、轮播图管理、讲师管理、课程分类管理以及统计分析数据等功能模块。讲师管理功能模块讲师管理功能的类图参见图4.7。图中由属性与方法两大部分组成，属性部分有：讲师姓名、讲师简介、讲师ID和其他资料；方法部分有：修改、查询、添加、删除讲师信息。图4.7讲师管理类图图4.8为讲师添加的UML时序图。图4.8讲师添加时序图课程管理功能模块图4.9为课程管理功能的类图。图中由属性与方法两大部分组成，属性部分有：课程简介、课程ID、课程名称和其他资料；方方法部分有：增加课程信息、查询、删除和修改。图4.9课程管理类图图4.10为课程添加的UML时序图。图4.10课程添加时序图4.3数据库设计本系统中共包含9张表格，分别是：1.前台首页轮播图数据表、2.课程基本信息表、3.课程详情信息表、4.学院信息表、5.讲师表、6.系统用户表、7.统计信息表、8.课时信息表、9.课程章节表、10.小节小测表。数据表结构具体信息如下：(1)前台首页面轮播图数据表，如表1所示：(2)课程基本信息表，如表2所示：表2课程基本信息数据表编号字段名称类型大小是否为空备注1Idchar19否课程ID2Teacher_idchar19否课程讲师ID3Subject_idchar19否课程专业ID4Subject_parent_idchar19否课程专业父级ID5titlevarchar50否课程标题6pricedecimal10否课程售价7Lesson_numint10否总课时8covervarchar255否课程封面图片路径9Buy_countbigint10否销售数量10View_countbigint10否浏览数量11versionbigint20否乐观锁12statusvarchar10否课程状态13Is_deletedtinyint3是逻辑删除14Gmt_createdatetime0否创建时间15Gmt_modifieddatetime0否更新时间(3)课程详情信息表，如表3所示：(4)学院信息表，如表4所示：(5)授课教师表，如表5所示：(6)系统用户表，参见表6：(7)表7为统计信息表：(8)课时信息表，如表8所示：(9)课程章节表，如表9所示：表9课程章节表编号名称类型大小是否为空备注1idchar19否章节id2Course_idchar19否课程id3titlevarchar50否章节名称4sortint10否显示排序5Gmt_createdatetime0否创建时间6Gmt_modifieddatetime0否更新时间(10)小节小测表，如表8所示：第五章系统实现在本章中将介绍系统关键功能的实现效果图和相关代码图。对系统环境搭建进行了简单阐述。该系统主要的实现流程如下。5.1系统环境搭建本系统是一种分布式微服务，部署在多个服务器中进行操作，系统内的图像和视频资料保存在云端，并在Redis服务器上进行操作。研制所用硬件环境见表5.1。表5.1硬件环境配置硬件环境（网络、设备等）内存需要8G以上，推荐16GCPU核心数4开发使用的软件环境如表5.2所示。表5.2软件环境配置软件环境（设备、网络等）服务器操作系统Windows系统数据库MySQLWeb服务器Tomcat技术平台J2EE5.2主要功能模块实现5.2.1未登录用户模块(1)用户注册登录功能：用户注册功能接口实现如图5.1。用户登录功能接口实现如图5.2。与用户注册有关的编码见图5.3。用户登陆的有关代码见图5.4。图5.1用户注册界面截图图5.2用户登录界面截图图5.3用户注册的代码图图5.4用户注册的代码图(2)视频播放功能：该系统课程的有关信息，主要记载于数据库中课程表内，并将视频资源、图片资源上传至阿里云服务器，数据库表仅保存相应资源链接url信息，有要求的时候，服务器与专用视频服务器进行基于分布式响应的连接，下载缓存对应视频资源信息。视频播放功能的界面实现，如图5.5所示。视频播放功能功能接口实现见图5.6。视频播放功能相关编码见图5.7。图5.5视频播放功能界面截图图5.6视频播放功能界面截图图5.7视频播放的代码图5.2.2普通用户模块(1)购买课程功能：课程购买功能接口实现如图5.8。课程购买功能接口实现如图5.9。课程购买相关编码见图5.10。图5.8课程购买功能界面截图图5.9课程购买功能界面截图图5.10课程购买的代码图(2)小节测试功能：小节测试功能的界面实现，如图5.11所示。小节测试功能的界面实现，如图5.12所示。小节测试的相关代码，如图5.13所示。图5.11小节测试功能界面截图图5.12小节测试功能界面截图图5.13小节测试的代码图(3)课程评价功能：课程评论功能的界面实现，如图5.14所示。课程评论的相关代码，如图5.15所示。图5.14课程评论功能界面截图图5.15课程评论的代码图(4)小节测试成绩记录功能：小节测试成绩记录功能的界面实现，如图5.16所示。小节测试成绩记录的相关代码，如图5.17所示。图5.16小节测试成绩记录功能界面截图图5.17小节测试成绩记录的代码图5.2.3管理员用户模块(1)讲师管理功能：讲师信息查询功能的界面实现，如图5.18所示。讲师信息添加功能的界面实现，参见图5.19。图5.20为讲师信息的相关代码。图5.18用户信息查询界面截图图5.19讲师信息添加界面截图图5.20讲师信息的代码图(2)课程管理功能：课程信息查询功能接口实现见图5.21。课程信息添加功能接口实现如图5.22中。图5.23为课程信息的相关代码。图5.21课程信息查询界面截图图5.22课程信息添加界面截图图5.23课程信息的代码图(3)小节小测管理功能：图5.24为小节小测添加功能的界面实现。小节小测修改功能接口实现见图5.25。小节小测的相关代码，如图5.26所示。图5.24小节小测添加功能界面截图图5.25小节小测修改功能界面截图图5.26小节小测的代码图第六章系统测试该测试计划旨在为一个以Springboot为平台的在线学习网站系统提供服务，无论哪种系统，在研制完成后，直至正式推出前，都有许多五花八门的BUG。系统测试是为了尽可能地检测BUG，然后再正式投入使用，使系统运行更连续、更平稳。下面将描述本系统的测试工作。6.1系统测试目标6.1.1功能性测试目标对系统的主要功能进行逐步测试，结果详情如表6.1所示。表6.1功能性测试目标测试目标：确保了系统各项功能的正常发挥。测试范围：在线学习网站系统三大模块。测试技术：使用无效与有效数据重复实现每个事件流或者功能：1.在合适的响应时间登录系统。2.能管理和运行在线学习网站系统各大功能模块。3.各项业务规则运用得当。完成标准：系统中各个功能模块数据输出符合预期。测试方法：黑盒测试测试周期：根据功能模块的设计复杂度测试重点：“讲师管理模块”、“课程管理模块”、“注册登录模块”等模块功能优先级：“讲师管理模块”、“注册登录模块”、“课程管理模块”6.2.2性能测试目标系统的性能测试应达到的指标见表6.2。表6.2性能测试目标测试目标：正常预期工作量。测试范围：统计分析时间和操作响应时间。技术：通过模拟对系统的业务操作（课程管理、讲师管理）完成标准：台式机压力测试中系统平台其他程序运行正常平稳，经长期运行后可正常使用。测试重点和优先级：对系统受压性能进行了测试。6.2测试工具和环境对在线学习网站系统测试的环境如表6.3所示。6.3测试用例和结果1.用户登陆系统的测试结果及测试用例见表6.4。表6.4用户登录模块测试用例测试身份：普通用户；测试编号：Test1；测试目的：验证用户的登录功能步骤操作数据预期结果/详细要求测试结果1不要输入用户名或密码，请单击“登录”按钮密码：用户名：提示密码和用户名不能为空。通过2键入不正确用户名或者密码，单击“登陆”按钮密码：test用户名：test提示密码或者用户名不正确。通过3输入正确用户名及密码并单击“登录