基于SpringBoot的青少年编程学习系统设计与实现

摘    要

本设计依据的是当下互联网+的趋势，再结合目前主流的开发技术与云服务的新式技术，提出互联网+“教育”的思路，对在线学习平台进行深入研究并研发，最终打造一个新式的、精定位的青少年编程学习新平台。该课题拥有可扩展、视频高清播放且链接加密播放等优势，从而给青少年和关心孩子的家长提供了一个质量高的课程在线学习平台。

该学习系统的开发采用当下主流的SpringBoot框架，为了便捷化同时采用了云服务商提供的云数据库服务、视频文件存储服务、短信接口服务来辅助完成。

当下，该系统完成的功能包括首页信息展示、视频课程加密播放、用户使用手机号获取验证码注册、在线下单购买课程、在线问答交流等功能。系统包括了用户和管理员两大模块，各自使用对应系统端，系统的前端页面设计实现使用了当下最新的Vue框架、Nuxt服务端技术用来渲染页面。页面呈现出来的视觉效果是可以符合现在互联网的最新审美要求的。

关键词：SpringBoot框架；在线学习；缓存；视频服务

第1章 绪论

1.1 研究背景及意义

最近几年，互联网+“教育”受国家相关部门比较重视。为了强调编程在教育里面的重要性，各个相关部门退出了一系列相关政策和措施。比如说在特长招生的范围内增加了编程，为此能发现社会上对青少年编程事业投资的力度逐步增加[1]。与此同时，随着投资消费的提高升级教育方式也在潜移默化发生变化，家长们更是对编程技能和兴趣也越来越重视和积极。目前发现，选择接受编程兴趣班的孩子与大人数量也在逐步上升、增多。

此项目是想要提供给喜欢编程的青少年群体一个资源全面、播放质量高的视频课程资源库，给没有条件在线下去兴趣班学习的青少年提供一些高质量的入门普及课程资源，提供给当下青少年一个可以更好且内容质量高的关于编程知识的学习启蒙平台，帮助提高他们的自我学习能力与综合素质，助力国家教育发展，帮助各个高校筛选出编程能力强、技术过硬的可发展培养的优秀人才。

1.2 国内外研究现状

编程作为现在互联网大环境下的重要技能之一。不管是国际产业界还是教育产业界，目前都是十分重视编程能力。当下编程技能已经慢慢在成为世界上各个国家在培养创新型人才的一项重点工作。以美英等发达国家为主的地方，对青少年的编程教育应放在了国家战略层面和计划里面，不管是学校教育体系是正规的还是校外的培训教育，目前的社会影响力都是相当广泛且颇为大[2]。在当下，也已经出现了非常多的在线学习编程的平台和系统，比如Scratch等等。且现在作为世界开放课程的创始者、先驱者的麻省理工学院的OCW项目，一直以来都在引领这目前世界上的开发课程大发展趋势，也是让全世界的学习者受益匪浅[3]。

当前，线上教育借助互联网技术、平台给想要学习的人群提供了很多资源、工具与途径，让学习课程的内容、过程等都发生了重要的改变[4]。为了在当下大家重视的领取获得红利，国内目前也出现了很多例如编程猫、少儿编程网的线上学习编程的系统。所有系统都是涵盖了编程视频课、编程过程中用到的工具、个人中心、在线购买课程等重要模块。将市面上有代表性的系统全部进行汇总、分析，发现这些系统都是把重点放在了趣味学习上，主要是用来培养大家的兴趣，体验类似乐高的图形化编程，实际上对于较难的部分大家还是没办法掌握[5]。除此之外，对于年级大点的已经掌握并且能上手的青少年来说，并未提供分门别类单独的课程，如果目标明确想要去学习，就会处于各类网站都进行过滤搜索发现都是零碎拼凑起来的课程。因此，直接将课程汇总成整块一整个系列会更受青少年群体喜欢，能帮助他们节省不少时间。

1.3 本人主要工作

本人主要工作内容体现在以下四大部分：

(1) 用户注册成功并且登录此系统后方可浏览、查看上面的全部各种类型的学习资源，提供关键字搜索查询课程并学习，针对需求来思考业务逻辑流程、思考相关实体、数据库结构设计。

(2) 教学经验丰富的老师怎样将自己录制好的视频进行上传，选用什么技术存储视频，是否可以通过新式对象存储技术完成。

(3) 系统的后台管理，包括对课程信息管理设置，对系统首页banner轮播宣传图管理，对课程类型管理，对各类用户管理、文章等操作。

(4) 对外展示的首页包括宣传banner图、热门课程、讲师宣传介绍介绍。每个用户已进入系统都会关注访问首页，因此首页上的数据都是属于高频词访问数据，需要考虑怎么设计数据缓存，防止数据量大造成数据库被冲垮。

第2章 开发技术

2.1 SpringBoot

SpringBoot是当下企业级主流的一套全新后台框架，它是一个叫Pivotal的团队开发提供的。它出现目的就是为了帮助开发者简化初始搭建、简化Spring开发过程中繁琐的过程。本框架配置时用的是规定好的特定方式，方便开发人员，他们书写时就无需再定义样板化的配置[6]。

SpringBoot其实是一套基于Spring的但比它简洁的快速开发框架。SpringCloud微服务也是以SpringBoot为基础设施。也就是说，它里面有类似Maven整合全部Jar包的各类框架使用方式。SpringBoot的优势主要是：能构建独立的Spring应用、嵌入式的Web容器、固化的starter依赖、自动装配Spring模块或第三方库、产品就绪特性、避免或简化XML配置等方面特性。

2.2 Redis

Redis(Remote Dictionary Server)，是开源的使用ANSIC语言编写、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。

 Redis是一个key-value存储系统，和Memcached类似，它支持存储的value类型相对更多，包括字符串、链表、集合、对象等，这些数据类型都是原子性的[6]。

Redis支持主从同步，数据可以从主服务器向任意数量的从服务器同步，从服务器可以是关联其他从服务器的主服务器，这使得Redis可以执行单层树复制。由于完全实现了发布/订阅机制，使得从服务库在任何地方同步树时[7]，可订阅一个频道并接受主服务器完整的消息发布记录。同步对读取操作的可扩展性和数据的冗余很有帮助，在此基础上，Redis支持各种不同方式的排序。

2.3 MySQL

MySQL是一款安全高效、跨系统并与PHP、Java等主流编程语言紧密结合的数据库系统。该系统由瑞典的MySQL AB公司开发并支持。MySQL是目前较流行的一款开源关系型数据库，专门用来创建数据库管理系统。自发布至今，由于其体积小、速度快、总体拥有成本低，并且开放源码，已经被广泛地应用在Internet上的中小型网站中，它的运行模式主要是基于多线程，并且对C、C++、Java等编程语言都提供了相对应的编程接口[8]。

2.4 VUE

Vue框架是一套友好灵活、多途径且高性能的JavaScript的渐进式框架，可维护测试更强的代码。与其他重量级框架不同，Vue采用了自底向上增量开发的设计。Vue的核心库只关注视图层，也非常容易学习以及容易与其它库或已有项目整合，同时其完全有能力驱动采用单文件组件和该生态系统支持的库开发的复杂单页应用。

第3章 系统分析

3.1 可行性分析

3.1.1技术可行性

青少年编程系统选择了SpringBoot，Vue等企业级开发技术。后端开发的主要语言选择了Java语言，选用简洁快速开发的SpringBoot框架作为本系统的支撑点。前端页面开发依托于Vue框架，能简化页面开发、代码复用率高使用、自己对使用到的技术掌握也熟练。因此，从技术方面考虑是非常可行。

3.1.2经济可行性

本系统选用的技术都是开源、不收取任何技术费用，且系统仅用作毕业设计不作为商业使用，也不会产生附加费用。对于设备和硬件层面来说，电脑设备只需要可以安全开发环境就可以进行工作，不需要重新购买。因此，系统在开发过程中不会产生太多费用，经济上可行性也是可以满足。

3.1.3操作可行性

该系统页面采用简洁、易懂的设计，操作简单方便，对于以前未使用过该系统的用户来说不需要专门学习就可以访问操作。从用户交互方面考虑，非常友好。因此，系统的操作可行性是满足的。

3.1.4法律可行性

系统在开发时使用的软件都是正版不是盗版，不存在侵犯集团、个人等的利益，更不会有任何违法行为，全部的功能都是基于法律、道德基础上完成。因此，在法律层面满足可行性。

3.2 需求分析

该编程学习系统的目标群体是青少年，对编程精通且教学经验丰富的讲师以及该系统后期的维护者。根据使用者的身份角色不同，把本系统进行功能需求的划分，每个角色拥有自己独有的功能。用例图见图3-1所示。

图3-2 需求用例图

3.2.1青少年用户功能性需求分析

青少年群体用户是我们系统的主要群体。该类用户的需求功能如下：首页课程推荐、讲师展示介绍、首页banner活动宣传中心，课程类表，我的个人中心，我的收藏关注，提问交流功能等。用户能在系统上对全部课程进行试看体验，若是体验结束喜欢可以下单购买该课程的观看权。

3.2.2讲师用户的功能性需求分析

讲师是系统上视频是课程的提供者，也是系统重要的用户，讲师会在线下把自己的课程录制完成进行调整剪辑上传至系统。但是，视频不是随意提交的，需要由维护人员在后台管理端审核完成后才能推送至学习系统上供青少年学习用户搜索查看学习。同时，系统给讲师预留了宣传介绍板块，提高自我在编程学习领域的影响力，让更多学生老师了解自己。

3.2.3维护人员的功能性需求分析

维护人员在系统管理里面承担了维护、审核、建设的责任。他们需要负责系统的内容展示，平台讲师信息管理、课程内容审核管理，课程标签分类、宣传轮播图更替、热门讲师、热门课程等信息的管理工作，让平台能以高质量的模式呈现给青少年学习用户群体。

第4章 系统总体设计

4.1系统功能设计

4.1.1主要功能模块设计

该系统包括用户端、后台管理端两大模块。用户端是给讲师用户、青少年学习用户使用的，两者各自有各自的使用模块。青少年学习用户能够在系统上试听视频课程并线上下单购买课程，能在上面查询购买历史订单，查找搜索适合自己的学习视频课。系统的后台管理系统是给管理维护人员使用，能管理讲师资料、学习课程资料、视频等信息。功能模块图见图4-1。

图4-1 功能模块图

4.1.2用户端模块设计

系统将用户端涉及的功能模块划分成下面的五个大功能：

(1) 首页。首页给用户展示热门课程、热门老师、热门宣传轮播图等，便于用户浏览查看网站的主体、主打信息。

(2) 课程展示中心。该功能是提供用户查看系统全部的课程信息，可按课程类型查找搜索，可按照发布时间、按照课程搜索热度等进行搜索排序展示。用户能够在系统上试听收费课程，学习免费课程章节，购买适合自己的课程。

(3) 个人中心。个人中心是给用户提供的修改个人信息、历史课程订单、正在学习课程列表查看的模块。在使用个人中心功能时，用户必须注册了账号登录成功才可以使用。游客状态下是不可以使用该功能的。

(4) 讲师展示。用户进入系统能够浏览查看各个讲师的信息、介绍，便于用户了解各类老师的专项技能和课程。然后，可以去选择自己适合的讲师、课程。

(5) 问答功能。用户可以进入咨询模块进行问答、提问，在页面上看到自己感兴趣的部分能对它进行提问、回答，完成后待页面刷新就能看到自己回复或者提问发布的。

(6) 文章展示功能。把热门的一些新闻或者文章展示给用户让其进行阅读，帮助用户了解当前最新的热点、趋势等。

4.1.3管理端模块设计

系统管理端涉及的功能被拆分成下面五个模块：

(1) 课程管理。本模块是对课程信息进行发布、修改、删除、查询等基本操作。在本模块除了可以添加课程信息后，还可以增加课程介绍、课程大纲、小节信息，并且还能够为每个课程小节信息增加视频讲解。除此之外，还能够对课程分类进行设置、调整。

(2) 讲师管理。本模块可以增加新的讲师信息，完善讲师对外展示的介绍信息。与此同时，还能够修改讲师相关信息，删除不需要的相关信息。

(3) 首页内容管理。在首页内容管理页面对首页广告或者课程内容进行增改。提高需要推广的课程曝光量。

(4) 文章管理。本模块可以发布新的文章，可以对已发布的文章进行信息修改，也可以将不需要的文章删除掉。

(5) 分类管理。本模块能够发布课程类型，修改已经发布的课程类型，删除不必须的课程类型。

4.2 数据库设计

4.2.1 数据库概念设计

E-R图是对现实世界的模型关系进行描述，该系统涉及的主要实体管理员、讲师、课程、用户之间的关系模型建立好后可便于后期数据库的设计。E-R图如图4-2所示。

图4-2 系统总体E-R图

4.2.2数据库表设计

按照系统需要完成的功能设计，总共设计了11张数据表。下面将一一介绍各个表的结构。

(1) 管理员表如表4-1所示。

表4-1 管理员表

序号	字段名	注释	数据类型及长度	是否主键
1	id	表id	BIGINT(20)	是
2	adminname	管理员名字	VARCHAR(20)	否
3	pwd	密码	VARCHAR(32)	否
4	nick	昵称	VARCHAR(50)	否
5	touxiang	头像图片	VARCHAR(255)	否
6	qianming	签名	VARCHAR(100)	否
7	chuangjiantime	创建时间	DATETIME	否
8	gengxintime	更新时间	DATETIME	否

(2) 用户权限表如表4-2所示。

表4-2 用户权限表

序号	字段名	注释	数据类型及长度	是否主键
1	id	id编号	BIGINT(20)	是
2	pid	上级id	BIGINT(20)	否
3	name	权限名称	VARCHAR(20)	否
4	type	权限类型	TINYINT(4)	否
5	path	请求url	VARCHAR(100)	否
6	icon	权限图标	VARCHAR(100)	否
7	chuangjiantime	创建时间	DATETIME	否
8	gengxintime	更新时间	DATETIME	否

(3) 用户权限表如表4-3所示。

表4-3 角色表

序号	字段名	注释	数据类型及长度	是否主键
1	id	角色id	BIGINT(20)	是
2	jusename	名称	VARCHAR(20)	否
3	juesecode	编码	VARCHAR(20)	否
4	chuangjiantime	创建时间	DATETIME	否
5	gengxintime	更新时间	DATETIME	否

(4) 一级目录表如表4-4所示。

表4-4 一级目录表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键	BIGINT(20)	是
2	typename	类型名	VARCHAR(90)	否
3	flag	标志	INT(11)	否
4	paixu	顺序	INT(11)	否
5	chuangjiantime	创建时间	DATETIME	否
6	gengxintime	更新时间	DATETIME	否

(5) 二级目录表如表4-5所示。

表4-5 二级目录表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键id	BIGINT(20)	是
2	shangjiid	一级目录	BIGINT(20)	否
3	fenleiname	类型名称	VARCHAR(90)	否
4	flag	标志	INT(11)	否
5	paixu	顺序	INT(11)	否
6	chuangjiantime	创建时间	DATETIME	否
7	gengxintime	更新时间	DATETIME	否

(6) 课程章节表如表4-6所示。

表4-6 课程章节表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键	BIGINT(20)	是
2	biaoti	章节标题	VARCHAR(100)	否
3	kecheng	课程主键	BIGINT(20)	否
4	paixu	顺序字段	INT(11)	否

(7) 讲师表如表4-7所示。

表4-7 讲师表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键id	BIGINT(20)	是
2	jiangshiming	讲师名字	VARCHAR(90)	否
3	phone	手机号	CHAR(11)	否
4	pwd	手机号	VARCHAR(255)	否
5	touxiang	图像url	VARCHAR(255)	否
6	emails	邮箱	VARCHAR(255)	否
7	jieshao	介绍信息	VARCHAR(1024)	否

(8) 用户表如表4-8所示。

表4-8 用户表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键	BIGINT(20)	是
2	nick	用户昵称	VARCHAR(90)	否
3	phone	手机号	CHAR(20)	否
4	pwd	登录密码	VARCHAR(255)	否
5	jieshao	用户介绍信息	VARCHAR(255)	否
6	touxiang	头像照片	VARCHAR(1024)	否
7	emails	邮箱	VARCHAR(255)	否
8	flah	标志	INT(11)	否
9	chuangjiantime	创建时间	DATETIME	否

(9) 课程订单表如表4-9所示。

表4-9 课程订单表

序号	字段名	注释	数据类型及长度	是否主键
1	id	订单编号	BIGINT(20)	是
2	order_hao	订单号	VARCHAR(20)	否
3	kecheng_id	课程主键	BIGINT(20)	否
4	kecheng_title	课程名	VARCHAR(100)	否
5	kecheng_cover	首页封面	VARCHAR(255)	否
6	laoshi_name	讲师名称	VARCHAR(20)	否
7	huiyuan_id	青少年用户id	BIGINT(20)	否
8	nick	会员名	VARCHAR(50)	否
9	phone	手机号码	VARCHAR(11)	否
10	dingdan_fee	支付金额	DECIMAL(20,2)	否
11	zhifu_type	支付方式	TINYINT(4)	否
12	flag	订单变换状态	TINYINT(4)	否
13	chuangjiantime	创建时间	DATETIME	否

(10) 首页广告分类表如表4-10所示。

表4-10 首页广告分类表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键	INT(11)	是
2	leixingming	类型名	VARCHAR(100)	否
3	chuangjiantime	创建时间	DATETIME	否
4	gengxintime	更新时间	DATETIME	否

(11) 文件保存表如表4-11所示。

表4-11 文件保存表

序号	字段名	注释	数据类型及长度	是否主键
1	id	主键	BIGINT(20)	是
2	chuangjiantime	创建时间	DATETIME	否
3	wenjianname	文件名称	VARCHAR(255)	否
4	wenjianurl	文件路径	VARCHAR(255)	否
5	wenjiansize	大小	BIGINT(20)	否
6	wenjiantype	类型	INT(11)	否

第5章 系统实现

5.1用户端模块

5.1.1登录注册模块

用户在使用系统时，需要先注册账号再去登录，只有登录成功才可以更完整使用系统功能。注册账号时需输入昵称、手机号码等完成注册；在账号注册成功后，可以用账号和密码进行登录。

注册功能的核心代码如下所示：

public ReJson register(RegisterVo registerVo) {  

        User user = new User();  

        String nickname = registerVo.getNickname();  

        String code = registerVo.getCode();  

        String mobile = registerVo.getMobile();  

        String password = registerVo.getPassword();  

        if (StrUtil.isBlank(nickname) || StrUtil.isBlank(code)  

                || StrUtil.isBlank(mobile) || StrUtil.isBlank(password)) {

            return ReJson.getError("存在非空字段");  }  

        String redisCode = redisTemplate.opsForValue()  .get(Constant.REDIS_PHONE_KEY + ":"                     + mobile);  

        if (!code.equals(redisCode)) {  

            return ReJson.getError("验证码错误");  }  

        String encodeByMd5 = PassportEncodeUtil.encodeByMd5(password);  

        user.setNickname(nickname);  

        user.setMobile(mobile);  

        user.setAvatar(Constant.USER_AVATAR_URL);  

        user.setPassword(encodeByMd5);  

        try {  

            this.baseMapper.insert(user);  

        } catch (Exception e) {  

            log.error("register user occur error may be cause mobile repeat :[{}]", e.getMessage(), e); 

        return ReJson.getError("注册失败，可能该手机号已被注册");  

        return ReJson.getSuccess();  

        } 

}

注册实现效果如图5-1所示、登录实现效果如图5-2所示。

    

图5-1 用户注册界面

图5-2 用户登录界面

5.1.2首页

系统首页包括了banner轮播图、推荐课程、讲师介绍、文章推荐四大模块。四个模块相辅相成突出系统的主题，首页上的每个部分推荐的都是热门信息，目的就是希望吸引用户，让用户喜欢本系统多进行点击，同时能够完成系统宣传。

首页核心代码模块如下所示：

public List<AdvertisementIndexVo> listIndexVo(Long typeId) {

List<AdvertisementIndexVo> list = (List) redisTemplate.opsForValue()

.get(Constant.CODE_SEEDING_INDEX + ":" + Constant.KEY_AD_LIST);

if (list == null) {

list = this.list(new QueryWrapper<Advertisement>()

      .eq("type_id", typeId)

       .orderByAsc("sort")).stream().map(a -> {

AdvertisementIndexVo indexVo = new AdvertisementIndexVo();

BeanUtils.copyProperties(a, indexVo);

return indexVo;

})

.collect(Collectors.toList());

log.info("not has cache, try to quire new result:[{}]", list);

redisTemplate.opsForValue().set(

Constant.CODE_SEEDING_INDEX + ":" + Constant.KEY_AD_LIST,

list,

Duration.ofMinutes(1)

);}

return list;

}

首页的banner轮播和课程推荐效果如图5-3、首页的讲师及文章推荐效果如图5-4所示。

图5-3 系统首页课程效果

 

图5-4 系统首页界面

5.1.3课程模块

课程模块是展示全部课程信息列表，用户能在该模块输入搜索关键字搜索自己想要找的课程，可以按销量、价格等属性把课程进行排序，目的都是为了快速寻找自己需要的课程。

具体实现代码如下：

public ReJson getCoursesByCategory(CourseSearchVo2 searchVo2) {  

         QueryWrapper<Course> wrapper = new QueryWrapper<>();  

wrapper.eq(searchVo2.getCategoryId() != null, "category_id", searchVo2.getCategoryId());

          wrapper.eq("status", 1);  

         if (searchVo2.getSortBy().equals("time")) {  

             wrapper.orderByDesc("create_time");  

         }  

if (searchVo2.getSortBy().equals("countBuy")) {  

             wrapper.orderByDesc("count_buy");  

       }  

  if (searchVo2.getSortBy().equals("price")) {  

             wrapper.orderByAsc("price");  }

         List<Course> list = this.baseMapper.selectList(wrapper);  

         return ReJson.getSuccess(list);  

}

课程模块列表实现效果如图5-5、课程详情界面如图5-6所示。

图5-5 课程列表实现效果

 

图5-6 课程详情实现效果

5.1.4讲师模块

讲师模块展示了系统里面录入的讲师信息，在该模块能够看到讲师照片并能点击进去看其他介绍信息，还可看到讲师的全部讲授课程。

讲师功能的核心实现代码如下：

List<Lecturer> lecturers = iLecturerService.list(  

                 new QueryWrapper<Lecturer>()  

                         .orderByAsc("sort")  );  

return ReJson.getSuccess(lecturers); 

) ;

讲师列表实现效果如下图5-7、讲师详情页面实现效果如图5-8所示。

图 5-7 讲师列表实现效果

 

图5-8 讲师详情实现效果

5.1.5文章模块

文章模块展示的是后台录入的全部文章信息，按照对文章评论的数量信息进行排序推荐。

文章功能模块代码实现如下：

public ReJson page(@PathVariable Long currentPage, @PathVariable Long pageSize) {

Page<Article> page = iArticleService.page(

new Page<Article>(currentPage, pageSize),

new QueryWrapper<Article>().orderByDesc("create_time")  );

return ReJson.getSuccess(page);

}

文章模块实现效果如图5-9所示。

图 5-9 文章界面实现效果图

5.1.6问答模块

问答模块是给用户提供的一个交流模块，在这里可以提问题，也可以发布自己的想法，别的用户也可以回复自己的问题并提出自己的问题。帮助大家解决各自的问题信息，除此之外也可以设置热门推荐，把大家关注的问题或者话题推送热门让更多用户一起参与讨论。

问答功能核心代码如下：

public ReJson answer(@RequestBody Answer answer) {  

     answer.setId(null);  

     answer.setCreateTime(LocalDateTime.now()

);  

     Question question = iQuestionService.getById(answer.getQuestionId());  

     question.setCntAnswer(question.getCntAnswer() + 1);  

     iQuestionService.updateById(question);  

     iAnswerService.save(answer);  

      return ReJson.getSuccess();  

}  

问答模块实现效果如图5-10所示。

图5-10 问答功能实现效果界面

5.2 后台管理端模块

5.2.1讲师管理

讲师管理是为用户端服务的，发布新的讲师介绍信息，或者修改用户端讲师的介绍信息。

讲师管理实现的核心代码如下所示：

public ReJson pageBySearch(LecturerSearchVo lecturerSearchVo, 

Long currentPage, Long pageSize) {  

        Page<Lecturer> page = new Page<>(currentPage, pageSize);  

        QueryWrapper<Lecturer> wrapper = new QueryWrapper<>();  

        // 查询条件  

        if (lecturerSearchVo != null) {  

            wrapper.likeRight(  

                    StringUtils.isNotBlank(lecturerSearchVo.getName())  

                    , "name",  

                    lecturerSearchVo.getName()  

            );  

            wrapper.likeRight(  

                    StringUtils.isNotBlank(lecturerSearchVo.getMobile()), 

                    "mobile",  

                    lecturerSearchVo.getMobile()  

            );  

            Integer status = lecturerSearchVo.getStatus();  

            if (status != null) {  

                wrapper.eq(status == 1, "status", 1);  

                wrapper.eq(status == 0, "status", 0);  

            }  

            wrapper.ge(startTime != null, "create_time", startTime);  

            wrapper.le(endTime != null, "create_time", endTime);  

        }  

        this.page(page, wrapper);  

        MyPage<LecturerListVo> myPage = new MyPage<>();  

        myPage.setRecords(page.getRecords().stream()  

                .map(Lecturer::toListVo)  

                .collect(Collectors.toList()));  

        return ReJson.getSuccess(myPage);  

}  

讲师管理具体实现效果如图5-11所示。

图5-11 讲师列表实现效果

5.2.2类型管理

类型管理是为课程进行服务的，用类型将课程信息进行分类。本模块管理了一级分类和二级分类，可以单一录入也可批量进行导入操作。

类型管理实现的核心代码如下：

public ReJson importCategoryByExcel(MultipartFile file) {  

  CateGoryExcelListener listener = new CateGoryExcelListener(iCategory1Service, iCategory2Service);  

   try {  

        EasyExcel.read(file.getInputStream(), CategoryExcelDto.class, listener).sheet().doRead();

  } catch (Exception e) {  

          log.error("importCategoryByExcel has error: [{}]", e.getMessage(), e);  

          return ReJson.getError("文件有错误");  

     }  

        return ReJson.getSuccess();  

}  

类型实现效果如图5-12所示。

图5-12 课程分类展示页面

5.2.3课程管理

课程管理是系统的核心功能，它是维护用户端看到的课程信息的维护，能够发布新上架的课程信息，还能够对发布了的信息进行调整修改。

具体功能实现核心代码如下所示：

public ReJson pageBySearch(Long currentPage, Long pageSize, CourseSearchVo searchVo) {  

    Page<Course> page = new Page<>(currentPage, pageSize);  

    page.setOrders(Collections.singletonList(new OrderItem("sort", true)));  

    this.baseMapper.selectPage(page,  

            new QueryWrapper<Course>().like(StringUtils.isNotBlank(searchVo.getCourseName()), 

                            "course_name", searchVo.getCourseName()  

                    )  .eq(searchVo.getLecturerId() != null,  

                            "lecturer_id", searchVo.getLecturerId()  

                    )  .eq(searchVo.getCategoryId() != null,  

                            "category_id", searchVo.getCategoryId())  );  

    List<CourseVo> courseVos = page.getRecords().stream().map(a -> {  

        CourseVo vo = new CourseVo();  

        vo.setId(a.getId());  

        vo.setCourseName(a.getCourseName());  

        vo.setCourseCover(a.getCourseCover());  

        vo.setCountBuy(a.getCountBuy());  

        vo.setStatus(a.getStatus());  

        vo.setSort(a.getSort());  

        vo.setPrice(a.getPrice());  

        toCourseVo(a, vo);  

        return vo;  

    }).collect(Collectors.toList());  

    Page<CourseVo> courseVoPage = new Page<>(currentPage, pageSize);  

    courseVoPage.setTotal(page.getTotal()).setRecords(courseVos);  

    return ReJson.getSuccess(courseVoPage);  

} 

课程列表实现效果如图5-13所示。

图 5-13 课程列表实现效果

5.2.4 banner轮播图管理

Banner轮播图管理是为了能方便更替首页轮播图。此模块提供了轮播图的发布、修改、删除等基本操作。

具体实现代码如下所示：

public Page<AdvertisementVo> pageByType(Long current, Long size, Long typeId) {  

        Page<Advertisement> advertisementPage = new Page<>(  

                current,  

                size  

        );  

        advertisementPage.setOrders(Collections.singletonList(new OrderItem("sort", true)));  

        this.page(  

                advertisementPage,  

                new QueryWrapper<Advertisement>()  

                        .eq(typeId != null, "type_id", typeId)  

        );  

        List<Advertisement> records = advertisementPage.getRecords();  

        List<AdvertisementVo> voList = records.stream().map((a) -> {  

            String typeTitle = advertisementTypeMapper.selectById(a.getTypeId())

.getTitle();  

            AdvertisementVo vo = new AdvertisementVo();  

            vo.setTypeTitle(typeTitle);  

            BeanUtils.copyProperties(a, vo);  

            return vo;  

        }).collect(Collectors.toList());  

        Page<AdvertisementVo> voPage = new Page<>(advertisementPage.getCurrent(),

                advertisementPage.getSize(),  

                advertisementPage.getTotal());  

        voPage.setRecords(voList);  

        return voPage;  

}  

banner轮播图实现效果如图5-14所示。

图 5-14 banner轮播图管理实现效果

5.2.5文章管理

文章管理提供了发布、查看、删除等功能。在本模块发布的信息能够实时显示在系统的文章列表里供用户查看。

实现效果如图5-15所示。

图 5-15 文章列表实现效果

结  论

本次论文主要对青少年的在线学习系统的研究背景与意义、国内外研究现状、开发技术、系统分析、系统的总体设计等展开了详细阐述。该系统采用Springboot框架、vue框架、mysql数据库等技术开发完成，在开发过程中采用了mybatis的逆向工程技术，生成了实体类、操作数据库的mapper和对应xml文件，简单的单表操作语句全部生成，不需要再次重新写快发速度快速提高。

在系统的前期需求分析到现在开发完成用了2个月多的时间，在开发的这段时间里面，锻炼了自己的实际动手能力，发现学习的理论知识和实践能力还是有很大区别，也让自己更深刻了解了有些理论知识，并且发现自己的编号能力也提高不少。现在，虽说毕业设计和毕业论文已经全部接近尾声，但是系统的完善开发工作将不会止步于此，在以后有时间的情况下还会把里面不完善的功能优化，提高业务流程和系统的切合度，争取能够投入使用。

想要完整版本的可以点赞私聊加关注私聊作者获取