一种基于HTML5高职课程资源库系统的设计与实现

袁劲松

（广东职业技术学院 信息工程系，广东 佛山 528041）

0 引言

当前，移动互联网的飞速发展从根本上改变了学生的上网方式，传统的 PC端运行系统在越来越快的生活节奏之下的不便利性已愈演愈烈，学生利用闲散时间在手机端运行系统完成碎片化学习的趋势也越来越明显，因此，进行移动学习平台应用研究具有比较重要的现实意义。基于 HTML5的高职课程资源库系统作为一种面向高职院校师生的课程移动学习平台，旨在整合课程资源，帮助高职院校师生搭建一个共同移动学习服务平台，为学生提供移动学习的机会，让学生可以利用碎片化时间进行自主学习，从而显著提高学习效率。

1 HTML5技术简介

HTML5作为一种编写网页的标记语言已被各浏览器广泛支持，深受广大网络用户欢迎。HTML5允许程序通过Web浏览器运行，并且将视频等目前需要插件和其它平台才能使用的多媒体内容也纳入其中，这将使浏览器成为一种通用的平台，用户通过浏览器就能完成任务[1]。HTML5技术的应用使得Web形成了一个集音视频、图形图像、动画及计算机交互与一身的全新应用平台，优势非常明显，主要表现在以下几个方面[2]。

（1）提供了丰富的API。HTML5在HTML4设置的DOM接口的基础上，增加了更为丰富的API，针对更为复杂的用户需求提供了更为全面的接口支持。HTML5提供的 API主要包括网络通信、图形绘制应用、地理定位、离线存储、后台处理、文档编辑应用和历史记录管理等方面，能够满足用户的各种不同的需求。

（2）提供了新型多媒体方式。HTML5自带“audio”和“video”这两个重要标签，只需设置这两个标签，就可以实现在网页中顺畅播放任何音视频，不需要使用任何插件或第三方工具，极大地方便了用户。

（3）提供了最优化的存储方式。HTML5设计了一个存取速度快、安全性高的存储方式，把用户信息及缓存数据保存在用户端的浏览器中，建立本地存储数据库。完美地解决了早期版本中浏览器关闭后 Cookie被删除的问题，用户体验感再次被刷新了。

（4）提供了全新语义化标签。HTML5自带表单验证功能，开发人员编码时可以省去一些繁琐的工作，直接提升了工作效率。此外，使用语义化标签搭建的页面更容易被搜索引擎收录，有利于SEO优化。

2 系统设计

2.1 设计原则

（1）内容选取，简明实用。高职课程普遍具有偏重实践操作性，因此绝大部分高职课程经过多年沉淀，拥有了非常丰富的各种形式的课程资源，如果只是简单陈列在系统中就会显得杂乱无章，造成学习者难以有效查找的尴尬局面。因此，在系统设计时内容选取要注意简明实用性，尽可能将课程资源中最重要最适合学生自主学习的那一部分择取出来。

（2）系统功能，精巧简约。系统功能设计的基本原则是能够满足用户需求，方便用户使用。系统基本功能齐全、界面友好、设计合理有效的师生交互，页面精简流畅，适合高职院校学生随时随地方便地自主学习。

2.2 功能设计

系统主要应用于高职学生的自主学习，适合自主学习的课程资源主要包括微课、课件、课后作业等。系统功能结构如图1所示，该系统主要包含以下模块。

（1）用户管理：教师账号、学生账号、教学管理账号的创建、删除、修改、权限设置等。

图1 系统功能结构图Fig.1 System functional structure diagram

（2）通知公告：发于该课程教学的通知公告。（3）微课资源：微课视频的上传、删除、播放、数据统计等。

（4）教学课件：教学课件（包括 ppt、word文档等）的上传、删除、播放、数据统计等。

（5）在线作业：针对教学资源的在线作业，包括在线评分。

（6）互动平台：实现师生互动，采用留言的方式提问与解答。

3 系统实现

3.1 前端技术选型

（1）概述

前端程序使用html5+javascript实现，数据请求采用ajax技术在客户端发起，返回结果直接渲染到html5页面。在前端页面看到的课程视频，也是基于html5新特征实现的；而教学课件对应的 word/ppt/pdf显示则是文档转换后的svg。

（2）前端UI

考虑到了前后台的原生差异性，在UI框架的选择上面，我们本着最合适的技术实现最合适功能的原则，前后台 UI用的并不是同一款。管理后台的UI框架是layUI，而用户前台的UI框架，则选用了weUI。

layUI是经典模块化前端框架，由职业前端倾情打造，面向全层次的前后端开发者，低门槛开箱即用的前端UI解决方案[3]。它采用模块规范编写，遵循原生HTML/CSS/JS的书写与组织形式，兼容当前正在使用的全部浏览器（IE6/7除外），可作为 PC端后台系统与前台界面的速成开发方案。此框架的核心目录如图2所示。

图2 layUI核心目录图Fig.2 layUI core catalog diagram

weUI是一套与微信原生视觉体验一致的基础样式库[4]，由微信官方设计团队为微信内网页和微信小程序量身设计，使得用户的使用感知更加统一。weUI最大的特点就是与微信界面深度兼容，让用户在微信里面打开我们的网页毫无违和感，平滑过渡，给使用者带来更友好的体验。同时，使用这款 UI框架进行开发也是很简单的，所有使用方式，官方都给出了调用例子，引入它也只需要两个文件而已。

3.2 后端技术选型

（1）概述

后端程序逻辑使用golang实现，选用golang，很大程度上看重了它发布简单的优点，因为有些机房的部分服务器比较老旧，如果发布流程太复杂，可能会导致程序部署失败；golang是一款现代化的全功能编程语言[5]，具有跨平台、运行效率高、开源免费、发布简单的优点；同时，golang还是编译型语言，即不需要源代码就能部署程序到线上服务器，有效保证了代码的安全性。

（2）后端框架

我们选用的后端 web框架是 beego，一个使用Golang的思维来帮助您构建并开发应用程序的开源框架，由国人开发，其中文文档丰富、中文社区活跃，开发时遇到的问题，都比较容易找到解决方案。beego内置了足够多的模块，包括：数据库ORM、日志操作、会话控制、配置解析、请求响应等，足以支撑市面上的大部分需求。采用了Golang原生的http包来处理请求，其并发效率可以应付大流量的 Web应用，属于目前高并发产品中的佼佼者。beego里面自带的bee工具能快速地生成应用的基础骨架[6]。

（3）MVC

程序架构模式使用的是MVC，这是一种很稳定的web后端实现方案，有效分离了业务代码和模型代码，同时也使得每个url对应的代码块组织的更合理。MVC，即Model/View/Controller三个单词的缩写，对应中文名称是模型、视图、控制器，这三个概念一般都是对应三个部分的代码，利于程序的抽象与封装、能有效进行业务和数据的分离。

用户发起请求，在浏览器输入地址，请求到达Controller，对参数进行过滤组装，然后调用Model，查询数据库，最后数据渲染到View，用户就可以看到了，整个流程如图3。

图3 MVC流转图Fig.3 MVC flow graph

下面进行分别介绍：

Model，模型，直接与数据库相关，一般一个表对应一个模型，这个概念刚提出不久的时候，数据库的读写操作都在这里；而现在，Model只用来定义表结构与表关系、字段类型及字段映射，更多的数据库读写操作会另外放到数据仓库相关的逻辑层代码里面。

View，视图，用来渲染页面，一般都是由模板语言写就，用户直接看到的效果就是由它呈现的。但是，近些年来，前后端分离的应用逐渐普及，View层也就淡出了历史舞台。

Controller，控制器，在稍微有一点规模的程序里面，它都不会担任太多业务逻辑的职责，反而更像一个交通管理员，或者中继站。请求来到这里，参数会进行校验与过滤；响应来到这里，返回值还可以进行分发与组装；它的职责就是沟通数据与请求还有响应。

（4）数据库

数据库使用的是MySQL，一款开源数据库，特别主流，几乎所有互联网公司或多或少都会使用到这款数据库。不管你使用什么语言来做程序开发，MySQL都是最好的数据库之一，它开源免费、简单易用、文档齐全、功能强大，最重要的是用户群强大，阿里腾讯百度、谷歌微软苹果，全都在用它。

3.3 依赖服务

除了上面提到了那些常规技术，我们还使用了一些依赖服务来处理 office文件。像 word/ppt/pdf这些文件，使用web浏览器是不能直接打开的。市面上大多数在线文档系统使用的策略都是把文档转为图片，在网页上面看到的是图片，比如道客巴巴、豆丁网、知网等。除此之外，百度文库是自研算法，解析了源文件之后使用html5渲染的；金山wps和微软onlineOffice提供的是收费服务，然而一般的企业很难有这样的技术储备。

我们也是使用的策略是：先把 word/ppt转为pdf，再把 pdf转为 svg，在页面上看到的文档就是转换之后的svg，选用svg而不是png，是因为svg放大不失真。使用文档转图片的这个策略有一个优点，就是文档不怕被盗用。word/ppt转 pdf使用的是 libreoffice[7]，pdf转 svg使用的是 pdf2svg[8]，都是开源软件，全平台支持（windows/linux/mac）。

3.4 程序实现

（1）数据表

系统中所有的数据表如下：

1）课程表 course

2）课程单元表 unit

3）课件表 file

4）作业表 work

5）作业题表 exam

6）课程用户关系表 course_student

7）评论表 comment

8）课程通知记录表 log_notice

9）用户表 user

10）找回密码表 retrieve

11）统计表 stat

数据库ER图，如图4所示。

图4 数据库ER图Fig.4 Database ER diagram

（2）关键代码

登录验证，使用token来实现记住登录，token设置过期时间，能有效防止账号被盗，其核心逻辑如下：

// 权限校验

if !ok || c.UserId == 0 {

if token == "" {

// 跳转到登录页

c.Redirect("/admin/login", 302)

return

} else {

// 使用token自动登录

v, err ：= models.GetUserByToken(token)

if err != nil || v == nil || time.Now().After(v.TokenExpire) {

c.Redirect("/admin/login", 302)

return

}

v.Token = uuid.Must(uuid.NewV4()).String()

if err ：= models.UpdateUserById(v); err != nil {

c.Data["json"] = err.Error()

c.Response()

}

c.SetSession("uid", v.Id)

c.Ctx.SetCookie("token", v.Token, 604800)

}}

微课资源的视频播放使用的是 HTML5技术实现，不需要依赖flash，能更轻易的在手机端展示，核心代码如下：

// 视频播放器，容器代码

＜div id="dplayer">＜/div>

// 视频播放器，逻辑代码new DPlayer({

container： document.getElementById('dplayer'),

video： {

url： '{{.BaseUrl}}/static/upload/unit/{{.Unit.Id}}{{.Unit.ExtName}}',

}});

由于在网页上 office文档是不能直接访问的，故需要一些转换的过程，以下是 office转 pdf的核心代码：

// 把 word/ppt/excel转为 pdf

func OfficeToPDF(file string) (err error) {

// soffice --headless --invisible --convert-to pdf example.doc

file, _ = filepath.Abs(file)

args ：= []string{"--headless", "--invisible", "--convert- to", "pdf", file, "--outdir", filepath.Dir(file)}

var cmd *exec.Cmd

if runtime.GOOS == "windows" {

cmdLine ：= strings.Join(args, " ")

cmd = exec.Command("cmd.exe", "/c", "start soffice "+cmdLine)} else {

cmd = exec.Command("soffice", args...)

}

time.AfterFunc(30*time.Second, func() {if cmd.Process != nil {

cmd.Process.Kill()

}

})

err = cmd.Run()

return

}

（3）关键页面

管理后台页面，如图5、图6所示。

图5 后台课程列表图Fig.5 Backstage course list chart

图6 后台课程单元列表图Fig.6 Backstage course unit list diagram

登陆界面如图7所示；站点首页如图8所示，显示微课资源列表。

微课内容页示例如图9所示，可以观看视频教程、关注课程、评论课程等；课件正文页示例如图10所示，在页面上使用svg实现，并使用了懒加载技术，给用户更友好的体验。

图7 登录界面Fig.7 Login interface

图8 首页界面Fig.8 Home interface

图9 微课内容页示例Fig.9 Example of a content page for a micro lesson

图10 课件正文页示例Fig.10 Courseware text page example

4 结语

基于 HTML5的高职课程资源库系统从设计到研发历时近一年的时间，前期进行UI设计以及通过HTML5+CSS3实训前端页面，利用Golang+MySQL进行后台开发，数据库使用的是MySQL，将移动数据技术[9-13]应用到教学中，为学生提供了一个很好的自主学习的平台，让学生可以利用碎片化时间随时随地使用移动设备进行学习。当然，根据课程资源的丰富程度和学生的具体使用情况，本系统可以做进一步的研究，开发更多适用的功能。