在线学习平台

说明：本项目目前人在开发阶段，目前开发的主要是功能模块实现，界面上并未完善。

本文主要针对我在项目中的完成功能介绍以及实现的方式方法，和一些在工作中遇到的棘手问题的解决。

一、在线学习平台后台搭建

总论：后台主要面向的是教师用户【里面包含一个管理员用户】，进行课程或者习题的创建，编辑等信息，目前习题主要有两种，后台可以编辑的是选择题型，编程题目前已经稳定了400道的java

和c语言。编程题仅仅可以用于被选择【采用勾选方式】。用户信息导入展示模块部分。接下来详细介绍各个部分。

1.1 权限部分

后台登录首页【路径保密】

后台登录页.png

下面是后台教师或管理员注册页面，有相应的授权码验证，只有授权码通过后才可以通过注册。

后台注册页.png

1.2 课程部分

后台登录后的课程首页，由于是自主测试阶段，课程是临时录入的，不是很全。教师可以创建自己的课程，并且可以删除之前创建好的课程。

登录首页.png

创建课程页面：

创建课程.png

尚待完善的课程首页：

课程首页.png

点击每一节后的具体内容【此内容包括两部分：课程部分和习题部分{主要是选择题和编程题}】

1.2.1 习题节点部分

习题节点内容.png

解释：页面采用的是easyui的最原始的框架。

最上方是导航栏，由首页、各门课程和最右侧的登录用户信息构成。

左侧是菜单选择栏位，是easyui的west部分。该部分的课程管理采用的是ztree树形组件，本来是打算使用layui的树，当时考虑到其节点个数的局限性，以及不能满足动态添加任意数量的节点，其后台实现起来也相对比较复杂。故最终采用的是ztree组件。点击左侧菜单下的任意节点，可以动态显示其节点下的内容。如上图所示，这是一个习题节点，右侧展示的是其对应的习题节点页面。主要由选择题和编程题构成。可以对其进行相应的CURD操作。

下图是添加选择题页面--（采用的是layui的parent.open（）方式）。四个选项和一个题目描述都采用的是ckeditor5的富文本编辑器【一个万能的加载公式，图片的超好用的编辑器】，关于编辑器的介绍在课程内容部分进行讲解。

添加选择题.png

添加选择题2.png

选择题的编辑页面【页面数据回显】

选择题编辑.png

编程题的添选功能，在保存已有的部分的基础上进行回显和新的添加，主要是对题库中的400多道编程题目进行勾选并加入习题节点。

编程题添选.png

关于本节选择题学生的最后作答情况[作答情况点击按钮实现]：

作答情况.png

本部分采用的是layui的表格组件。其中对于时间戳的处理上稍微注意，可能不是直接显示出数据库中的原有时间，需要进一步在js里做一步处理。使用layui.util.toDateString进行格式转换。

 ,{field:'submit_time', title: '最后提交时间', width:200,align:'center',style:'font-size: 12px;',templet: "<div>{{layui.util.toDateString(d.submit_time, 'yyyy-MM-dd HH:mm:ss')}}</div>",sort: true }

另外还有将此表导出为excel表：

学生行为Excel表导出.png

1.2.2 课程部分

其实在点击每个节点进行添加新的节点时，都由相应的节点类型选择（习题或者内容），下面说一下内容部分。

添加节点.png

课程内容.png

解释：可以对课程内容进行修改，这里的修改和添加都在一块了，只是在后台做了处理。调用不同的方法处理。

采用ckeditor编辑器。基本的word操作，图片视频，连接，公式都可以添加。

1.3 用户部分

用户信息导入可以采用excel格式文件进行导入。使用了org.apache.poi组件。

用户信息导入.png

1.3 高级功能--资源推荐部分

资源推荐.png

资源推荐部分做为一个栏目放在前台页面上，其中主要采用的是java

的爬虫框架webmagic，目前实现的是对csdn上相关资源的爬取，根据课程节点的关键字，借助csdn搜索功能进行爬取。主要捕捉的是栏目的文章浏览量，文章收藏量，发布时间，简单描述。这是本篇文章本身，另外还要抓取文章作者的相关信息：作者的原创文章数量，粉丝数量，获得赞数，评论量，作者所有文章的总收藏量。

csdn.png

获取到数据后，需要对数据进行筛选。构建一个排序模型，包括对数据进行基本的清洗，根据他们的相关属性进行

建模筛选。输出最优化的结果。