第35卷 第5期 福 建 电 脑 Vol. 35 No.5 2019年5月 Journal of Fujian Computer May 2019 ——————————————— 本文得到江苏省高等学校自然科学研究重大项目（No.18KJA520010）与安徽省质量工程项目（No.2017kfk010）的资助。刘安（通信作者），男，1981年生，博士，副教授，主要研究领域为大数据和人工智能。E-mail: anliu@suda.edu.cn。郭良敏，女，1980年生，博士，副教授，主要研究领域为服务推荐、信息安全等。 课程在线学习平台的设计与实现 刘安1 郭良敏2 1 (苏州大学计算机科学与技术学院 江苏 苏州 215006) 2 (安徽师范大学计算机与信息学院 安徽 芜湖 241003) 摘 要 本文利用Element和Vue框架设计并开发了一个课程的在线学习平台。在平台中，学生用户可以查看课程信息、播放教学视频、在线完成练习、查看教师布置的作业以及留言讨论；教师用户在学生用户功能的基础上，具有发布各种资源的功能。该平台在支持ES6语法的浏览器下都可以正常访问。 关键词 在线学习；Vue框架 ；Element；课程平台 中图法分类号 TP31 DOI:10.16707/j.cnki.fjpc.2019.05.012 Design and Implementation of Online Learning Platform LIU An1, GUO Liangmin2 1 (School of Computer Science and Technology, Soochow University, Suzhou, China, 215006) 2 (School of Computer and Information, Anhui Normal University, Anhui, China, 241003) Abstract An online learning platform is designed and implemented by using Element and Vue frameworks. In the platform, students can view course information, play instructional videos, complete exercises online, view the homework assigned by teachers, and discuss and comment. Teachers have the ability to publish various resources on the basis of student functions. It can be accessed normally in modern browsers that support ES6 syntax. Keywords Python Course; Online Learning; Vue 1 引言 在线学习活动是指在网络环境支持下完成的、与达成学习目标有关的所有活动。它在网络环境下运行，是学生自主学习、教师在线安排学习活动的过程[1]。在线学习改变了传统的师生角色地位[2]，教师由教学控制者转变成了引导者、指导者，学生从被动接受知识变成了主动学习与规划。在线学习平台通过记录学生在线上参加的课程培训、考试竞赛、试题练习等情况，同时辅以一些基于数据的分析技术，实现对学生学习情况的全面掌握。 20世纪80年代以来，计算机和网络技术的发展促进了在线学习的发展应用[3]。各类成熟的在线学习平台出现，如LAMS、Moodle、Sakai等。此类平台虽然对知识进行了合理的组织，但是教师不能及时观察学生的学习情况并给出指导。因此，提出基于B/S的在线学习平台旨在解决此类问题[4]。 2 总体模块 本平台总体模块如图1所示。学生登录之后，可以播放视频、查看视频信息、习题练习、作业信息和发布留言。教师登录之后，在学生的功能之上能发布视频、发布习题、发布作业。 图1 总体模块 

2019年 福 建 电 脑 47 2.1 登录/注册模块 包括注册、登录、记录三个功能。注册是用户首次进入网站需要的重要功能之一，只要用户依次输入用户名和密码，并确认密码信息就可以完成注册。登录是用户发布留言、做在线习题的前提，用户只需按要求输入用户名、密码就可进入登录状态。若用户忘记密码，但是之前账户已经绑定了邮箱，则此时可通过邮箱更改密码，若没有绑定邮箱，则需通过联系管理员进行密码的更改。记录功能是当用户处于登录状态时会记录用户的浏览记录。 前端采用Vue框架，路由模块由vue-router负责[5]，状态管理由vuex负责，网络请求模块由axios负责，视图组件由Element提供。登录模块的详细流程如图2所示。 图2 登录/注册流程 当用户输入信息后，利用axios发起一个GET请求，查询是否存在该用户。若存在，校验密码是否正确，通过校验后返回ok状态码，并将该用户的基础信息包括头像、昵称、email、sessionToken等发送给客户端。此时，在客户端可以执行缓存操作，利用localStorage将用户信息保存在本地，并且将sessionToken写入到axios头部，以确保以后每次发起HTTP请求都携带用户凭证[6]。一般而言，只要用户没有中途更改密码，sessionToken 都是一直有效的，若修改了密码则需要重新登录。若用户登录失败，一般有三个选择，分别是继续尝试、点击忘记密码和注册账号。若用户之前并没有绑定邮箱，则点击忘记密码是没有效果的。 2.2 信息展示模块 主要包括轮播图展示、视频信息展示、作业信息展示。轮播图展示用于展示图片，起美化网站、吸引用户的作用。视频信息展示包含两个子模块，一个是概要展示模块，展示视频的标题和简要介绍；另一个是详细展示模块，展示一些详细信息。作业信息展示也包含两个子模块，一个是概要信息展示模块，主要是习题的标题和简介；另一个是详细信息展示模块，主要展示习题的题目、选项、答案等。 信息展示模块的主要功能是从后端获取数据，然后在页面上将数据渲染出来。从优化性能的角度上，需要将每次HTTP请求后的结果缓存在本地。有了缓存，当页面再加载时就可以先在缓存中查询数据，若缓存中存在数据，则可以直接使用，这样可以在一定程度上减少HTTP请求，提升页面加载速度。具体流程如图3所示。 图3 信息展示流程 2.3 视频播放模块 主要有播放、暂停、快进、音量控制、全屏播放等功能，其中播放还包含缓冲功能。进入视频播放模块之前需要拿到视频信息的id，该id可通过路由传递，然后根据此id发起GET请求，拿到数据后将课程简介、课程概要、讲师等文本数据渲染到指定位置，然后开始处理视频播放模块，可分为以下几步： (1) 实例化video媒体播放器，由于vue的生命周期限制，可在页面挂载阶段初始化。 (2) 将获取到的视频连接赋予video播放器。 (3) 开始缓存下载视频，并且在可播放的时候显示播放按钮。 (4) 在播放阶段持续缓存视频直至加载完毕。 2.4 习题模块 提供题目和选项供用户选择，当用户点击提交答案时以弹窗形式提示用户做错了几道题目，并且可供用户查询正确答案和答案解析。 在用户进入习题页面时取得该习题的唯一标志id，并根据此id发起GET请求，然后将题目以JSON数组的形式渲染到页面[7]，每个选项以一个单选框的形式呈现出来。当用户做完所有习题点击提交按钮时，由系统校验每一道题目的答案，然后将错误数目统计出来并且以可视化的形式展示给用户。接下来用户可以做两件事：第一是可以核对自己的答案，第二是查看正确答案的解析。在用户点击提交按钮的同时，发送一条POST请求，将当前用户、当前页面url以及用户的活动发送到后端。 

48 刘安等：课程在线学习平台的设计与实现 第5期 2.5 留言模块 主要有发布评论和展示评论的功能。发布评论用户必须处于登录状态。留言模块和评论模块相差不大，主要是留言模块比评论模块多了一个主题字段和描述字段。因此可将评论模块封装成一个组件，该组件的主要工作步骤如下： (1) 传入一个id。 (2) 根据id进行关系查询。 (3) 查询数据成功，有数据则展示出来。 (4) 检测用户输入。 (5) 点击发布评论按钮则发起POST请求，将数据发送到后端。 (6) 将新增的评论插入到已有的评论中。 (7) 重复执行步骤(4)。 2.6 历史记录模块 历史记录展示在用户中心页面，是对用户浏览网站过程中操作的一些关键节点进行记录，比如在观看视频、发布留言、做完习题时。记录过程是自动执行的，比如当用户做完习题点击提交时，在记录完用户成绩后直接发起POST请求，将数据同步到服务器，不过该请求可能成功也可能失败，但是这一过程和结果对用户来说始终是不可见的。 2.7 其他模块 为了便于开发，需要将实现过程中一些通用的模块提取出来，这些模块主要包含缓存系统、全局弹窗、网络请求等。 缓存系统用于缓存信息模块中的数据，由于发起一次AJAX过于昂贵，所以善用缓存系统可以很大的提升整个系统的性能[8]。另外，信息展示模块的数据很多都是分页的，就要求该缓存模块可以跨页检测数据，其主要实现手段还是在传入key的同时将page和limit传进来，便于判断缓存中是否存在足够多的数据，以此为标准判断某一页的数据是否存在。缓存系统的具体流程如图4所示。 全局弹窗的作用是给予用户一个反馈效果，例如当用户登录成功后，弹出一个成功提示框；当用户在没有登录的状态下提交评论，就弹出一个警告框等。当用户执行一个操作之后，就应该给用户一个反馈。 图4 缓存系统 在调用该组件时，应该传入type和content两个参数，type代表状态，如success、failed等，content代表提示内容（弹窗的工作流程如图5所示）。 图5 弹窗模块工作示意图 网络请求模块的作用是为客户端提供GET和POST功能。该模块建立于axios框架之上，并且在此之外新增了很多方法，比如登录、登出、注册、更新用户信息等。由于系统中的很多数据都是与用户绑定的，因此必须在发送GET和POST的同时将用户的sessionToken携带在请求里，否则服务器端将无法返回数据。此外，登录和注册与GET和POST又有明显的区别，会涉及到密码安全，因此在网络层单独封装了登录和注册方法。 3 数据库设计 平台主要分三种用户：学生用户、教师用户、管理员用户。学生用户的权限主要是浏览各个页面、发表留言和发表评论。教师用户的权限主要是发表课程信息、发表作业信息、发表习题信息以及所有学生用户的权限，管理员用户的权限还包含了增删用户，增删所有数据信息。 用户基本信息的表结构如下[9]： 用户{id，用户名，头像，密码，邮件，邮件是

2019年 福 建 电 脑 49 否通过验证，手机号，手机号是否通过验证，是否为教师，登录凭证}。 sessionToken是用户注册和登录时自动生成的，代表用户的唯一标志，该值会随着用户发起的网络请求发送到后端，并且由后端判断该用户的权限。email字段的用途是方便用户找回密码。isTeacher字段用于判断该用户是否为教师，教师拥有更高的权限。password字段没有get权限，甚至连管理员都无法查看该字段，而且setPassword()方法的调用也是有限制的，必须是绑定了邮箱的用户申请更改，然后后端根据sessionToken发给用户一条专属链接，用户通过该链接才可以更改。 信息展示模块包含的信息比较杂，所以分别建了几个表，其表结构如下： 课程信息概要{id，标题，图片地址，是否为实践视频}。 习题信息概要{id，标题，详细描述}。 作业信息{id，标题，详细描述，发布者}。 课程详细信息和习题的详细信息如下： 课程详细信息{id，标题，详细描述，概要介绍，作者，视频地址，所属课程id}。 习题详细信息{id，选项A答案，选项B答案，选项C答案，选项D答案，正确选项，答案解析，所属习题id}。 在CourseDetail类和Subjects类中都保存着一个Pointer对象，该对象保存着其所属对象的引用。表中的一些set接口一般都是在生成实例的时候调用，其他情况下后端没有提供任何入口，这样的话如果数据需要变动只可以由管理员一人操作。为了便于统计，在系统中需要引入一个记录用户浏览足迹的功能，主要记录的字段是用户、浏览内容标题以及链接。记录信息的表结构如下所示： 历史记录{id，描述信息，目标url地址，所属用户id}。 4 平台实现 基于上述各模块的细节描述，本小节给出平台整体的实现流程，如图6。 （1）安装nodejs环境后安装vue-cli，然后利用vue-cli创建一个基础的Vue框架，开启一个node服务器，监听8080端口。 （2）使用yarn安装项目开发时依赖的基础库：UI库Element，网络请求模块axios，操作dom使用的jquery，播放视频需要的chimee-player，js工具库underscore等。 （3）使用LeanCloud创建数据库和表，并且通过接口为前端提供数据[10]。 （4）基于平台的详细设计实现各个模块。 图6 平台流程图 5 结束语 以Vue框架为主，Element、vue-router、axios等第三方库为辅，设计和实现了基于B/S的在线学习平台，有助于学生在线巩固课程知识点。 参 考 文 献 [1] 胡晓玲, 吉永兵, 徐子涵. 我国在线学习活动设计研究现状综述——基于知识图谱的可视化分析. 高等理科教育, 2017(5):25-32 [2] 王卫华, 王长杰. 探讨项目教学中师生角色的重新定位. 武汉职业技术学院学报, 2015(4):42-45 [3] 元帅.在线学习行为分析评价及其应用研究[硕士学位论文]. 华中师范大学, 武汉,2011 [4] 吴大刚, 肖荣荣. C/S结构与B/S结构的信息系统比较分析. 情报科学, 2003, 21(3):313-315 [5] 麦冬, 陈涛, 梁宗湾. 轻量级响应式框架Vue.js应用分析. 信息与电脑(理论版), 2017(7):58-59 [6] 邱小果. 编程实现基于Cookie验证的HTTP请求的发送. 微型机与应用, 2003, 22(7):35-37 [7] Ben Ali I, Basly M, Ben Jemaa S, et al. JSON Web Token (JWT) Profile for OAuth 2.0 Client Authentication and Authorization Grants. British Journal of Urology, 2015, 54(6):641–644 [8] 李祺. 基于AJAX的网络教学系统设计与实现. 山西经济管理干部学院学报, 2011, 19(2):95-96 [9] 白清源, 张千里. 动态数据库表结构和动态报表. 福州大学学报(自然科学版), 2000, 28(3):59-63 [10] 许清媛, 刘韦声. 基于爬虫和LeanCloud数据存储的双语阅读平台设计. 电子设计工程, 2018, 26(2):35-38