【《在线少儿编程学习系统的设计与开发》8600字】

在线少儿编程学习系统的设计与开发摘要：随着学前教育越来越被重视，社会对人工智能领域的理解加深，人们逐渐认识到“编程”思维是非常重要的。国外少儿编程起步时间早，发展比较成熟，政策对其支持力度大，有充足资金支持。而国内的少儿编程教育起步相对较晚，国内许多相关机构普遍存在的问题是课程设置零散、不系统，没有进行持续的研究和开发，而且孩子会受到老师、地理位置、线下机构学费较贵等影响。该系统主要运用了B/S架构，在IntelliJIDEA平台下，运用Java技术和MySQL数据库来实现。主要实现了课程管理、教师管理、用户管理、评论管理、课程购买等功能。此系统将线下教学转为线上教学，线上教学将不受限于地理位置、学费较贵等因素的影响，改善了线下机构的缺点。关键词：编程学习系统MySQLJavaB/S目录TOC\o"1-3"\h\u前言 -635页前言随着我国的第二产业向第三产业过渡，未来的第三产业将会占据全球的主要经济地位，我国在国际上的竞争力就需要依仗科技、创新型人才去推动。这也就是为何现在国际上大力发展推广编程教育的国家都是发达国家以及发展中的大国。因此掌握编程的孩子在未来的职业规划和就业都会有更多的方向和选择。国内少儿程序编程教育起步比较晚，国内许多相关教育机构的共同问题是课程设置分散、不系统，没有进行持续的研究和开发，而且孩子会受到老师、地理位置、线下机构学费较贵等影响。在线少儿编程学习系统能够实现通过利用计算机技术和互联网技术，将线下教学转为线上教学，线上教学将不受限于地理位置、学费较贵等因素的影响，改善了线下机构的缺点。以上是对在线少儿编程学习系统的目的与意义分析，为解决上述问题，本文设计并且开发了一套少儿编程学习系统。在线少儿编程学习系统是李云时下流行的Java语言来设计开发一个多功能的在线教育平台，为广大的老师和同学提供一个学习交流的互联网平台，让每一个老师同时可以带领更多的学生去学习，也让每一位学生可以更好的利用互联网，通过互联网字有的搜索更多自己感兴趣的只是去学习，这将是非常有意义的。第1章绪论1.1系统实现目的随着编程教育越来越被重视，越来越多的家长都希望孩子从小接触并接受编程教育[1]。我国与国外的计算机普及教育相比，起步比较晚，在20世纪90年代刚刚形成一定的教育体系和模式。而对于少儿的计算机教育，更处于初级阶段，但是发展态势迅猛。近十年以来，日本、英国等发达国家将少儿编程引入到基本教育体系中来，并且在少儿编程教育方面成效显著。计算机教育是一门创造艺术，具有激发少儿的创造潜力、拓展思维、开动大脑等有点。目前我国少儿的计算机编程教育正处于探索阶段，少儿编程教育机构教学质量参差不齐，未能形成完善的教育体系[2]。本系统主要针对上述问题进行开发，利用当下流行互联网技术线上教学来对线下培训班的教育体系不完善、学费较贵、地理位置限制等问题进行开发。在线少儿编程学习系统让家长不必东奔西跑去了解机构课程，孩子在家就可以随时随地的想学就学，省去了线下高额的成本费用，学费也就相对来说更便宜。1.2系统要求1.2.1研究内容系统是基于IntelliJIDEA开发环境，使用Java编程语言，使用vue语言编写前端页面，采用MySQL数据库管理系统进行设计与实现，主要实现课程管理、教师管理、用户管理、课程购买、评论管理等功能。1.3系统开发工具及开发语言1.2.1IntelliJIDEA系统的开发环境是IntelliJIDEA,是一款JAVA编程软件，捷克IntelliJ公司研发推出。IntelliJIDEA给开发者提供了集成功能异常丰富的JAVA开发环境，不仅添加了对Records的完整代码洞察支持，JDK自动下载构建，还能够让开发者更快速的生成构造函数和组件，对代码进行分析检查等功能，对开发者来说，极大提高了代码编写效率，减轻了对代码查漏补缺的压力。该软件提供一站式服务，包括软件开发的环境、开发的过程、开发的维护和管理等等，能完美契合开发者的需求。在导航栏中加入了类和接口名称，能够让开发人员快速的找到相对应的代码进行修改或编写，非常的方便。在设计方面采用了人体工程学技术，让开发者们能够静下心来好好研究关于代码的问题，提供了各种方便的快捷键让你能够在各个窗口之间游走，遨游在代码的海洋中。[3]。1.3.2MySQLMySQL数据库，目前数于Oracle旗下的产品，一种关系型数据库，它可以让开发者用SQL语言的编写来进行数据的增删改查操作。MySQL是一个关系数据库管理系统。关系数据库通过将数据存储在不同的表中而不是将所有数据存放在一个大型的仓库中，提高了速度和灵活性。MySQL具有体积小巧、速度快速、成本低廉、代码开源等优点[4]。1.3.3JavaJava是最近流行的程序语言。Java语言有两个特点：强大和易用。作为面向对象编程语言的代表之一，Java语言很好地实现了面向对象理论。Java具有简单性、面向对象性、分布式、健壮性、安全性、平台无关性、可移植性、多线程等特点[5]。1.3.4SpringBootSpringBoot是简化Spring开发搭建过程的的一个新型框架，互联网快速发展，微服务现在也发展的非常火热，成为当今的一个热点技术。Spring框架可以做的工作，SpringBoot框架都可以实现，而且可以更容易的实现。SpringBoot在Spring的基础止简化了大量的XML配置文件，简化了使用的依赖管理。实现了自动化配置，极大提高了程序员的编程速度，简化了编程工作。1.3.5Mybatis-Plus简介Mybatis-Plus是Mybatis的一个强化版本的工具包，简化之前的增删改查工作，内置了多个插件，例如分页插件、拦截插件等。开发中的基本操作可以用一句代码来完成，给开发者节省了大量的时间。1.4论文组织结构以下是系统研究内容：在国家大力支持学习编程的背景下，分析并设计，研发出一套在线少儿编程学习系统。论文中的章节安排为：第1章绪论。简略的介绍了在线少儿编程学习系统实现的目的以及意义。第2章系统分析。在线教育系统的三种可行性、系统的需求分析、系统的数据流图分析以及系统的数据需求分析。第3章系统设计。进行在线少儿编程学习系统的设计功能，并挨个分析其功能和作用，之后根据系统的需求功能来进一步设计出在线少儿编程学习系统所需要的数据库表文件。第4章系统实现。将上一章节中设计好的在线少儿编程学习系统功能进行代码实现，放入在线少儿编程学习系统的核心代码及运行在线少儿编程学习系统的一部分功能实现截图。第5章系统测试。本次测试在线少儿编程学习系统使用了黑盒测试法，将在线教育网站系统的各个功能进行合理的功能测试，包括操作说明和测试功能的截图。第2章系统分析2.1系统可行性分析2.1.1经济可行性成本方面：运行在线少儿编程学习系统时不需要高配置的计算机，只要有一台操作系统为Windows10的计算机，本系统开发使用的开发工具为IntelliJIDEA，数据库使用MySQL，就足够完成在线少儿编程学习系统的设计与实现。效益方面：在线教育平台的设计初衷就是为了弥补国内线下编程教育的不完善和受地理位置限制等问题，有了这个系统，老师和学生之间可以不受地理位置的限制，而且还可以省下线下教育的一部分成本问题，也保证了学生有更多的选择，可随时随地想学就学。因此，在线少儿编程学习系统系统具备经济可行性[6]。2.1.2技术可行性软件方面，系统只需要一台可以运行的Windows10操作系统的计算机，下载并且安装IntelliJIDEA环境下编写代码，然后连接MySQL进行数据管理。人员方面，开发者需要具备比较高的代码编写能力以及系统整体实现能力。因此，在线少儿编程学习系统具备技术可行性。2.1.3操作可行性系统的界面简洁美观，功能齐全且明朗，简洁易操作。同时，系统就是为了方便学生可随时随地在线上进行编程学习。因此，在线少儿编程学习系统具备操作可行性[7]。2.2系统需求分析在线少儿编程学习系统有如下功能：课程推荐功能、课程学习功能、课程评论功能、课程上传功能以及教师申请功能。系统使用者为管理员、个人以及教师。功能需求分析按照三个角色区分：1．管理员的主要功能如下(1)管理员登录功能。(2)管理员个人信息修改功能。(3)管理员个人账户余额及交易记录查看功能。(4)管理员公共课程上传功能。(5)管理员所有课程修改及删除功能。(6)管理员对用户信息查看功能。(7)管理员对用户信息评论的管理功能。(8)管理员对用户申请教师权限的审批功能。2．学生用户的主要功能如下(1)学生用户登录及注册功能。(2)学生用户信息修改功能。(3)学生用户课程咨询功能。(4)学生用户课程学习功能。(5)学生用户课程评论功能。(6)学生用户课程购买功能。(7)学生用户申请教师权限功能。(8)学生用户对账户余额及消费记录查看功能。3．教师主要功能需求(1)教师登录及注册功能。(2)教师个人信息修改功能。(3)教师课程上传、修改及删除功能。(4)教师对账户余额及账户记录查看功能。2.3系统流程分析系统分析流程图是展示整个系统的一个流程，可以体现出系统的主要功能，是项目整体架构的一个直观体现。在线少儿编程学习网站系统的业务流程：学生个人用户通过注册账号可以登录到在线少儿编程学习系统，个人登陆后可以免费观看管理员上传的公共课程，也可以购买老师的付费课程，对于课程都可以进行评论，用户也可以申请老师权限来上传自己的视频进行盈利，需要经过管理员的审批通过后则自动开通教师权限。拥有教师权限后可上传和管理自己的课程，当有用户对课程进行购买时，教师可获得课时费的百分之七十，剩余的百分之三十为平台管理员的费用。系统分析流程图可以明确每个角色之间的关系和业务功能，是实现系统的一个重要环节。2.3.1系统管理业务流程图系统业务流程图，如图2.1所示。图2.1系统业务流程图2.3.2系统数据流程图1．顶层数据流程图描述管理员、个人和教师与系统之间的数据流出入。顶层数据流图，如图2.2所示。图2.2顶层数据流程图2．第一层数据流程图数据流图的第一层是其对顶层核心部分细化。数据流图第1层，如图2.3所示。图2.3第1层数据流程图3．第二层数据流图在第一层数据流图上进一步改善。(1)个人信息管理数据流图，如图2.4所示。图2.4个人信息管理的第二层数据流程图(2)权限管理数据流图，如图2.5所示。图2.5权限管理的第二层数据流程图(3)课程管理数据流图，如图2.6所示。图2.6课程管理的第二层数据流程图(4)评论管理数据流图，如图2.7所示。图2.7评论管理的第二层数据流程图(5)我的课程管理数据流图，如图2.8所示。图2.8我的课程管理的第二层数据流程图(6)钱包管理数据流图，如图2.9所示。图2.9钱包管理的第二层数据流程图2.4系统数据需求分析2.4.1系统各实体与属性1．个人属性，如图2.13所示。图2.13个人属性图2．教师属性，如图2.14所示。图2.14教师属性图3．管理员属性，如图2.15所示。图2.15新闻属性图4．课程属性，如图2.16所示。图2.16课程属性图6．评论属性，如图2.17所示。图2.17用户充值信息属性图2.4.2系统E-R图下面为系统E-R图，如图2.18所示。图2.18系统E-R图

第3章系统设计3.1系统总体模块设计系统分为前台以及后台，前台包括：系统首页、登录页面、注册页面、课程中心、教师中心、我的主页。后台包括：个人设置、用户信息、钱包管理、购买课程、课程管理、评论管理。前台模块：1．我的主页：修改个人信息、查看购买的课程、教师权限申请、我的钱包、我的消息、用户列表、视频管理、评论管理。后台模块：1．个人设置对个人信息进行修改。2．用户信息是对用户信息的查看。3．钱包管理包括账户余额和账户记录的查看。4．购买课程是对个人购买的课程进行查询。5．课程管理是对课程进行增删改查。6．评论管理是对个人用户对课程视频的评论进行增删改查。系统的功能结构图，如图3.1所示。图3.1系统功能结构图3.2系统各模块功能概述系统四个功能模块为：权限管理功能、个人信息修改、课程管理功能以及评论管理功能。3.2.1权限管理功能权限管理功能主要根据角色不同设置相应功能。1．管理员功能：个人用户权限的管理、个人用户信息的修改、课程管理、评论管理、钱包管理。2．个人功能：个人用户信息的修改、课程学习、课程购买、钱包管理、教师权限申请。3．教师功能：个人信息修改、课程管理、钱包管理。3.2.2个人信息管理 功能个人信息修改功能主要是对用户自己的信息修改，包括：用户名、密码、电话和邮箱。1．注册账户：用户初次访问需要注册个人信息才可以登录该系统。2．个人信息修改：用户在“我的主页”的“个人中心”修改个人信息。3．信息查询：管理员可以查看所有用户的信息。3.2.3课程管理功能课程管理功能主要用于课程的增删改查。1．课程上传：管理员和教师可以上课程。2．课程修改：管理员可以修改所有课程，教师只可以修改自己上传的课程。3．课程删除：管理员可以对所有的课程进行删除操作，教师只可以对自己上传的课程进行删除操作。4．课程购买：个人用户可以购买教师课程。3.2.4评论管理功能评论管理功能主要用于用户对课程的评论。课程评论：个人、教师及管理员都可以对课程进行评论。评论删除：管理员可以对课程不良评论进行删除。3.3数据库设计数据库汇总表，如表3.1所示。表3.2-表3.11是数据表细分表，如下所示。第4章系统实现4.1系统实现运行环境1．硬件环境计算机CPU为AMD10，运行内存4G，硬盘正常即可。2．软件环境计算机操作系统为Windows10，系统主要的开发环境为IntelliJIDEA2019.3.3及以上环境，连接MySQL作为数据存储。4.2详细设计与实现4.2.1用户注册用户输入自己信息完成注册，如图4.1所示。图4.1用户注册图核心代码如下：publicStringregisteredUser(Useruser){

inti=userService.addUser(user);

if(i!=0){

return"redirect:/login.jsp";

}

return"redirect:/underdog.jsp";

}4.2.2用户登录注册完成后，用户输入账号密码登录，如图4.2所示。图4.2用户登录图核心代码如下：publicStringverifyUser(HttpServletRequestreq,Stringname,Stringpwd,Modelmodel){

UsersysUser=userService.verifyUser(name,pwd);

if(sysUser!=null){

//获取用户身份

List<Map<String,Object>>maps=userService.queryUserRole(sysUser.getUserId());

Objectrole=null;

for(Map<String,Object>map:maps){

role=map.get("role_id");

}

HttpSessionsession=req.getSession();

session.setAttribute("userId",sysUser.getUserId());

session.setAttribute("username",name);

session.setAttribute("userRole",role);

return"index";

}

return"redirect:/underdog.jsp";

}4.2.3主页界面实现主页界面，如图4.3所示。图4.3主页界面图4.2.4购买课程界面教师课程界面，如图4.4所示。图4.4课程中心界面图4.2.5课程购买界面课程购买界面，如图4.5所示。图4.5课程购买图核心代码如下：publicStringpurchaseCourse(HttpServletRequestreq,@RequestParam(value="courseIds[]")String[]courseIds,Stringburse,Stringtext,Stringdate){

HttpSessionsession=req.getSession();

Stringid=session.getAttribute("userId").toString();

intuserId=Integer.parseInt(id);

doublei=Double.parseDouble(burse);

List<Map<String,Object>>userMoney=courseService.getUserMoney(userId);

doubleover=0.0;

for(Map<String,Object>map:userMoney){

Stringwal_over=map.get("wal_over").toString();

over=Double.parseDouble(wal_over);

}

if(over<i){

return"0";

}

doubleadmin=i*0.3;

doubleuser=i-admin;

Stringusername=session.getAttribute("username").toString();

Stringexplain=username+text+""+burse+"元";

doublemoney=over-i;

intn1=courseService.updataUserMoney(userId,money);

StringteaId=session.getAttribute("teacherId").toString();

intteacherId=Integer.parseInt(teaId);

List<Map<String,Object>>userMoney1=courseService.getUserMoney(teacherId);

doubleteacherOver=0.0;

for(Map<String,Object>map1:userMoney1){

Stringwal_over1=map1.get("wal_over").toString();

teacherOver=Double.parseDouble(wal_over1);

}

doubleteacherMoney=teacherOver+user;

intn2=courseService.updataUserMoney(teacherId,teacherMoney);

List<Map<String,Object>>userMoney2=courseService.getUserMoney(1);

doubleadminOver=0.0;

for(Map<String,Object>map2:userMoney2){

Stringwal_over2=map2.get("wal_over").toString();

adminOver=Double.parseDouble(wal_over2);

}

doubleadminMoney=adminOver+admin;

intn3=courseService.updataUserMoney(1,adminMoney);

for(Objecty:courseIds){

intcourseId=Integer.parseInt(y.toString());

intn4=courseService.addUserBuyCourse(userId,courseId);

}

intn5=courseService.addTran(date,userId,teacherId,explain);

intn6=courseService.addTran(date,1,1,explain);

return"1";

}4.2.6个人信息管理界面课程购买界面，如图4.6所示。图4.6个人信息管理图核心代码如下：$.ajax({

url:"mine/selectUser",//获取数据列

type:'GET',

success:function(data){

(data[0]);

document.getElementById("#manager_name").value=data[0].userName;

document.getElementById("#password").value=data[0].userPassword;

document.getElementById("#email").value=data[0].userEmail;

document.getElementById("#mobile").value=data[0].userPhone;

document.getElementById("modal_cus_name").value=data[0].userName;

document.getElementById("modal_bj_prd").value=data[0].userPassword;

document.getElementById("modal_up").value=data[0].userEmail;

document.getElementById("modal_mobile").value=data[0].userPhone;

}

});

$("#sava-edit-btn").on("click",function(){

data=get();

$.ajax({

url:"mine/upddataUser",

data:data,

success:function(data){

alert("修改成功！")

location.reload();

},

error:function(){

alert("修改失败！")

}

});

});

$("#sava-edit-btn").css("disply","none");

$('#myModal').on('hidden.bs.modal',function(){

document.getElementById("contentForm").reset();

});4.2.7教师中心界面课程购买界面，如图4.7所示。图4.7教师中心图核心代码如下：functionselectTeacher(){

varname=$('input[name=Search]').val();

$.ajax({

url:'course/getTeacherByName',

type:'get',

data:{teacherName:name},

success:function(data){

console.log('data'+data);

vm.sites=[];

for(letindexindata){

vm.sites.push(data[index]);

};

//vm.$forceUpdate();

console.log('item'+vm.sites);

},

error:function(data){

console.log(data);

}

})

}第5章系统测试对系统实现的功能进行一次测试，测试本系统的健壮性和最终的测试结果是否何理，通过测试结果来找出系统中不合理的功能，在系统上线之前解决相应的错误问题。在系统上线前进行功能的合理测试可以更好的完善系统的开发，为后期的管理运维系统创造出一个良好的环境基础。5.1测试环境系统在IDEA的开发环境下进行调试，数据库服务器为MySQL5.7。对系统的各个功能的测试是为了找出系统开发中存在的一些隐蔽的问题，对错误的问题进行一些必要的修改和测试，测试系统时使用的环境尽量要和系统上线时使用的环境相似或者一致，这样可以使系统的测试结果更具有真实性。测试系统是在我们的项目中不能减少的一个重要环节。5.2测试方法本在线教育系统使用黑盒测试法进行了每个功能的测试。主要是针对系统的各个功能进行一些合理的测试，检查系统中的每一项功能设计是否已经满足了项目前期设计中的所有需求。如果每一次测试都可以获得项目前期设计的需求结果，那么就可以说明该系统功能的需求是可以被满足的，也将证明了该功能是已经实现了的。5.3测试用例5.3.1登录测试使用测试用户登录在线少儿编程学习系统，账号“李白”和密码“111111”，如图5.1所示。图5.1输入用户账号和密码登录成功则跳转至主页，如图5.2所示。图5.2用户登录成功如果用户名或者密码是错误的话，则会弹出“验证失败，请点击此处重新输入用户密码”的页面，如图5.3所示。图5.3用户登录失败5.3.2购买课程功能测试个人在教师中心浏览课程，点击“购买课程”即可进入购买课程功能，如图5.4所示。图5.4购买课程图点击“立即购买”即可购买课程，弹出“购买成功”窗口则购买课程成功，如图5.5所示。图5.5购买课程成功图点击“立即购买”即可购买课程，弹出“购买失败”窗口则购买课程失败，如图5.6所示。图5.6购买课程成功图购买完成，在“我的主页”中的“我的课程”中查看购买课程，如图5.7所示。图5.7我的课程中购买的课程图在“我的主页”中的“我的钱包”中查看交易记录，如图5.8所示。图5.8交易记录图5.3.3教师权限申请功能测试用户申请教师权限，输入需要的材料，个人简历输入“我的个人简历”和教育经历输入“我的教育经历”，点击“提交”，提交后需要管理员审批，如图5.9所示。图5.9用户申请教师权限图点击提交后弹出页面显示提交成功，如图5.10所示。图5.10用户申请教师权限成功图管理员审批通过，如图5.11所示。图5.11管理员审批图5.3.4账号管理功能测试新注册一个账号，账号输入“周瑜”及密码输入“111111”如图5.12所示。图5.12注册账号图在登录页面点击“注册”的蓝色按钮，出现注册的页面，需要个人用户填写完整的个人信息，其中如果输入的确认密码、邮箱和手机格式为空或者错误，就会出现红色提醒语句，如图5.13所示。图5.13注册账号以及格式错误图管理员就可以看的新增的用户信息，如图5.14所示。图5.14管理员会员管理视角图5.3.5修改课程功能测试管理员可以修改课程，修改价格为“999”，点击“保存”，如图5.15所示。图5.15修改课程图修改课程成功，弹出页面，如图5.16所示。图5.16修改课程成功图查看修改是否成功，如图5.17所示。图5.17修改成功图5.3.6个人信息修改功能测试用户在“我的主页”中“个人中心”点击修改按钮，将手机号改成“12345678912”，点击提交按钮，如图5.18所示。图5.18修改个人信息图显示会员信息页面，点击“保存设置”，点击后弹出页面，表示操作成功，如图5.19、5.20所示。图5.19修改成功图图5.20修改失败图查看是否修改成功，如图5.21所示。图5.21个人信息修改成功图5.3.7评论管理功能测试用户可以对课程进行评论，输入“我学习到了很多东西”，如图5.22所示。图5.22评论课程图查看是否评论成功，如图5.23所示。图5.23写评论图管理员删除“周瑜”的“我学习到了很多东西”评论，如图5.24、5.25所示。图5.24删除评论图图5.25删除成功图5.4测试结果本系统的使用了黑盒测试法进行测试系统的各个功能的结果，不过在任老师的指导下和各位同学的热心帮助下，系统中一场的错误问题全部得到了解决。尽管最终开发完成的系统中大部分的基本功能都通过了测试，但是依然还有一些系统功能存在一些缺陷和不足之处，开发者之后还要不断的去学习开发技术，来使后台运维管理系统成为一个更加完善更加优秀的在线