袁勁松

（廣東職業(yè)技術(shù)學(xué)院 信息工程系，廣東 佛山 528041）

0 引言

當(dāng)前，移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展從根本上改變了學(xué)生的上網(wǎng)方式，傳統(tǒng)的 PC端運(yùn)行系統(tǒng)在越來(lái)越快的生活節(jié)奏之下的不便利性已愈演愈烈，學(xué)生利用閑散時(shí)間在手機(jī)端運(yùn)行系統(tǒng)完成碎片化學(xué)習(xí)的趨勢(shì)也越來(lái)越明顯，因此，進(jìn)行移動(dòng)學(xué)習(xí)平臺(tái)應(yīng)用研究具有比較重要的現(xiàn)實(shí)意義?；?HTML5的高職課程資源庫(kù)系統(tǒng)作為一種面向高職院校師生的課程移動(dòng)學(xué)習(xí)平臺(tái)，旨在整合課程資源，幫助高職院校師生搭建一個(gè)共同移動(dòng)學(xué)習(xí)服務(wù)平臺(tái)，為學(xué)生提供移動(dòng)學(xué)習(xí)的機(jī)會(huì)，讓學(xué)生可以利用碎片化時(shí)間進(jìn)行自主學(xué)習(xí)，從而顯著提高學(xué)習(xí)效率。

1 HTML5技術(shù)簡(jiǎn)介

HTML5作為一種編寫(xiě)網(wǎng)頁(yè)的標(biāo)記語(yǔ)言已被各瀏覽器廣泛支持，深受廣大網(wǎng)絡(luò)用戶(hù)歡迎。HTML5允許程序通過(guò)Web瀏覽器運(yùn)行，并且將視頻等目前需要插件和其它平臺(tái)才能使用的多媒體內(nèi)容也納入其中，這將使瀏覽器成為一種通用的平臺(tái)，用戶(hù)通過(guò)瀏覽器就能完成任務(wù)[1]。HTML5技術(shù)的應(yīng)用使得Web形成了一個(gè)集音視頻、圖形圖像、動(dòng)畫(huà)及計(jì)算機(jī)交互與一身的全新應(yīng)用平臺(tái)，優(yōu)勢(shì)非常明顯，主要表現(xiàn)在以下幾個(gè)方面[2]。

（1）提供了豐富的API。HTML5在HTML4設(shè)置的DOM接口的基礎(chǔ)上，增加了更為豐富的API，針對(duì)更為復(fù)雜的用戶(hù)需求提供了更為全面的接口支持。HTML5提供的 API主要包括網(wǎng)絡(luò)通信、圖形繪制應(yīng)用、地理定位、離線(xiàn)存儲(chǔ)、后臺(tái)處理、文檔編輯應(yīng)用和歷史記錄管理等方面，能夠滿(mǎn)足用戶(hù)的各種不同的需求。

（2）提供了新型多媒體方式。HTML5自帶“audio”和“video”這兩個(gè)重要標(biāo)簽，只需設(shè)置這兩個(gè)標(biāo)簽，就可以實(shí)現(xiàn)在網(wǎng)頁(yè)中順暢播放任何音視頻，不需要使用任何插件或第三方工具，極大地方便了用戶(hù)。

（3）提供了最優(yōu)化的存儲(chǔ)方式。HTML5設(shè)計(jì)了一個(gè)存取速度快、安全性高的存儲(chǔ)方式，把用戶(hù)信息及緩存數(shù)據(jù)保存在用戶(hù)端的瀏覽器中，建立本地存儲(chǔ)數(shù)據(jù)庫(kù)。完美地解決了早期版本中瀏覽器關(guān)閉后 Cookie被刪除的問(wèn)題，用戶(hù)體驗(yàn)感再次被刷新了。

（4）提供了全新語(yǔ)義化標(biāo)簽。HTML5自帶表單驗(yàn)證功能，開(kāi)發(fā)人員編碼時(shí)可以省去一些繁瑣的工作，直接提升了工作效率。此外，使用語(yǔ)義化標(biāo)簽搭建的頁(yè)面更容易被搜索引擎收錄，有利于SEO優(yōu)化。

2 系統(tǒng)設(shè)計(jì)

2.1 設(shè)計(jì)原則

（1）內(nèi)容選取，簡(jiǎn)明實(shí)用。高職課程普遍具有偏重實(shí)踐操作性，因此絕大部分高職課程經(jīng)過(guò)多年沉淀，擁有了非常豐富的各種形式的課程資源，如果只是簡(jiǎn)單陳列在系統(tǒng)中就會(huì)顯得雜亂無(wú)章，造成學(xué)習(xí)者難以有效查找的尷尬局面。因此，在系統(tǒng)設(shè)計(jì)時(shí)內(nèi)容選取要注意簡(jiǎn)明實(shí)用性，盡可能將課程資源中最重要最適合學(xué)生自主學(xué)習(xí)的那一部分擇取出來(lái)。

（2）系統(tǒng)功能，精巧簡(jiǎn)約。系統(tǒng)功能設(shè)計(jì)的基本原則是能夠滿(mǎn)足用戶(hù)需求，方便用戶(hù)使用。系統(tǒng)基本功能齊全、界面友好、設(shè)計(jì)合理有效的師生交互，頁(yè)面精簡(jiǎn)流暢，適合高職院校學(xué)生隨時(shí)隨地方便地自主學(xué)習(xí)。

2.2 功能設(shè)計(jì)

系統(tǒng)主要應(yīng)用于高職學(xué)生的自主學(xué)習(xí)，適合自主學(xué)習(xí)的課程資源主要包括微課、課件、課后作業(yè)等。系統(tǒng)功能結(jié)構(gòu)如圖1所示，該系統(tǒng)主要包含以下模塊。

（1）用戶(hù)管理：教師賬號(hào)、學(xué)生賬號(hào)、教學(xué)管理賬號(hào)的創(chuàng)建、刪除、修改、權(quán)限設(shè)置等。

圖1 系統(tǒng)功能結(jié)構(gòu)圖Fig.1 System functional structure diagram

（2）通知公告：發(fā)于該課程教學(xué)的通知公告。（3）微課資源：微課視頻的上傳、刪除、播放、數(shù)據(jù)統(tǒng)計(jì)等。

（4）教學(xué)課件：教學(xué)課件（包括 ppt、word文檔等）的上傳、刪除、播放、數(shù)據(jù)統(tǒng)計(jì)等。

（5）在線(xiàn)作業(yè)：針對(duì)教學(xué)資源的在線(xiàn)作業(yè)，包括在線(xiàn)評(píng)分。

（6）互動(dòng)平臺(tái)：實(shí)現(xiàn)師生互動(dòng)，采用留言的方式提問(wèn)與解答。

3 系統(tǒng)實(shí)現(xiàn)

3.1 前端技術(shù)選型

（1）概述

前端程序使用html5+javascript實(shí)現(xiàn)，數(shù)據(jù)請(qǐng)求采用ajax技術(shù)在客戶(hù)端發(fā)起，返回結(jié)果直接渲染到html5頁(yè)面。在前端頁(yè)面看到的課程視頻，也是基于html5新特征實(shí)現(xiàn)的；而教學(xué)課件對(duì)應(yīng)的 word/ppt/pdf顯示則是文檔轉(zhuǎn)換后的svg。

（2）前端UI

考慮到了前后臺(tái)的原生差異性，在UI框架的選擇上面，我們本著最合適的技術(shù)實(shí)現(xiàn)最合適功能的原則，前后臺(tái) UI用的并不是同一款。管理后臺(tái)的UI框架是layUI，而用戶(hù)前臺(tái)的UI框架，則選用了weUI。

layUI是經(jīng)典模塊化前端框架，由職業(yè)前端傾情打造，面向全層次的前后端開(kāi)發(fā)者，低門(mén)檻開(kāi)箱即用的前端UI解決方案[3]。它采用模塊規(guī)范編寫(xiě)，遵循原生HTML/CSS/JS的書(shū)寫(xiě)與組織形式，兼容當(dāng)前正在使用的全部瀏覽器（IE6/7除外），可作為 PC端后臺(tái)系統(tǒng)與前臺(tái)界面的速成開(kāi)發(fā)方案。此框架的核心目錄如圖2所示。

圖2 layUI核心目錄圖Fig.2 layUI core catalog diagram

weUI是一套與微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)[4]，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，使得用戶(hù)的使用感知更加統(tǒng)一。weUI最大的特點(diǎn)就是與微信界面深度兼容，讓用戶(hù)在微信里面打開(kāi)我們的網(wǎng)頁(yè)毫無(wú)違和感，平滑過(guò)渡，給使用者帶來(lái)更友好的體驗(yàn)。同時(shí)，使用這款 UI框架進(jìn)行開(kāi)發(fā)也是很簡(jiǎn)單的，所有使用方式，官方都給出了調(diào)用例子，引入它也只需要兩個(gè)文件而已。

3.2 后端技術(shù)選型

（1）概述

后端程序邏輯使用golang實(shí)現(xiàn)，選用golang，很大程度上看重了它發(fā)布簡(jiǎn)單的優(yōu)點(diǎn)，因?yàn)橛行C(jī)房的部分服務(wù)器比較老舊，如果發(fā)布流程太復(fù)雜，可能會(huì)導(dǎo)致程序部署失??；golang是一款現(xiàn)代化的全功能編程語(yǔ)言[5]，具有跨平臺(tái)、運(yùn)行效率高、開(kāi)源免費(fèi)、發(fā)布簡(jiǎn)單的優(yōu)點(diǎn)；同時(shí)，golang還是編譯型語(yǔ)言，即不需要源代碼就能部署程序到線(xiàn)上服務(wù)器，有效保證了代碼的安全性。

（2）后端框架

我們選用的后端 web框架是 beego，一個(gè)使用Golang的思維來(lái)幫助您構(gòu)建并開(kāi)發(fā)應(yīng)用程序的開(kāi)源框架，由國(guó)人開(kāi)發(fā)，其中文文檔豐富、中文社區(qū)活躍，開(kāi)發(fā)時(shí)遇到的問(wèn)題，都比較容易找到解決方案。beego內(nèi)置了足夠多的模塊，包括：數(shù)據(jù)庫(kù)ORM、日志操作、會(huì)話(huà)控制、配置解析、請(qǐng)求響應(yīng)等，足以支撐市面上的大部分需求。采用了Golang原生的http包來(lái)處理請(qǐng)求，其并發(fā)效率可以應(yīng)付大流量的 Web應(yīng)用，屬于目前高并發(fā)產(chǎn)品中的佼佼者。beego里面自帶的bee工具能快速地生成應(yīng)用的基礎(chǔ)骨架[6]。

（3）MVC

程序架構(gòu)模式使用的是MVC，這是一種很穩(wěn)定的web后端實(shí)現(xiàn)方案，有效分離了業(yè)務(wù)代碼和模型代碼，同時(shí)也使得每個(gè)url對(duì)應(yīng)的代碼塊組織的更合理。MVC，即Model/View/Controller三個(gè)單詞的縮寫(xiě)，對(duì)應(yīng)中文名稱(chēng)是模型、視圖、控制器，這三個(gè)概念一般都是對(duì)應(yīng)三個(gè)部分的代碼，利于程序的抽象與封裝、能有效進(jìn)行業(yè)務(wù)和數(shù)據(jù)的分離。

用戶(hù)發(fā)起請(qǐng)求，在瀏覽器輸入地址，請(qǐng)求到達(dá)Controller，對(duì)參數(shù)進(jìn)行過(guò)濾組裝，然后調(diào)用Model，查詢(xún)數(shù)據(jù)庫(kù)，最后數(shù)據(jù)渲染到View，用戶(hù)就可以看到了，整個(gè)流程如圖3。

圖3 MVC流轉(zhuǎn)圖Fig.3 MVC flow graph

下面進(jìn)行分別介紹：

Model，模型，直接與數(shù)據(jù)庫(kù)相關(guān)，一般一個(gè)表對(duì)應(yīng)一個(gè)模型，這個(gè)概念剛提出不久的時(shí)候，數(shù)據(jù)庫(kù)的讀寫(xiě)操作都在這里；而現(xiàn)在，Model只用來(lái)定義表結(jié)構(gòu)與表關(guān)系、字段類(lèi)型及字段映射，更多的數(shù)據(jù)庫(kù)讀寫(xiě)操作會(huì)另外放到數(shù)據(jù)倉(cāng)庫(kù)相關(guān)的邏輯層代碼里面。

View，視圖，用來(lái)渲染頁(yè)面，一般都是由模板語(yǔ)言寫(xiě)就，用戶(hù)直接看到的效果就是由它呈現(xiàn)的。但是，近些年來(lái)，前后端分離的應(yīng)用逐漸普及，View層也就淡出了歷史舞臺(tái)。

Controller，控制器，在稍微有一點(diǎn)規(guī)模的程序里面，它都不會(huì)擔(dān)任太多業(yè)務(wù)邏輯的職責(zé)，反而更像一個(gè)交通管理員，或者中繼站。請(qǐng)求來(lái)到這里，參數(shù)會(huì)進(jìn)行校驗(yàn)與過(guò)濾；響應(yīng)來(lái)到這里，返回值還可以進(jìn)行分發(fā)與組裝；它的職責(zé)就是溝通數(shù)據(jù)與請(qǐng)求還有響應(yīng)。

（4）數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)使用的是MySQL，一款開(kāi)源數(shù)據(jù)庫(kù)，特別主流，幾乎所有互聯(lián)網(wǎng)公司或多或少都會(huì)使用到這款數(shù)據(jù)庫(kù)。不管你使用什么語(yǔ)言來(lái)做程序開(kāi)發(fā)，MySQL都是最好的數(shù)據(jù)庫(kù)之一，它開(kāi)源免費(fèi)、簡(jiǎn)單易用、文檔齊全、功能強(qiáng)大，最重要的是用戶(hù)群強(qiáng)大，阿里騰訊百度、谷歌微軟蘋(píng)果，全都在用它。

3.3 依賴(lài)服務(wù)

除了上面提到了那些常規(guī)技術(shù)，我們還使用了一些依賴(lài)服務(wù)來(lái)處理 office文件。像 word/ppt/pdf這些文件，使用web瀏覽器是不能直接打開(kāi)的。市面上大多數(shù)在線(xiàn)文檔系統(tǒng)使用的策略都是把文檔轉(zhuǎn)為圖片，在網(wǎng)頁(yè)上面看到的是圖片，比如道客巴巴、豆丁網(wǎng)、知網(wǎng)等。除此之外，百度文庫(kù)是自研算法，解析了源文件之后使用html5渲染的；金山wps和微軟onlineOffice提供的是收費(fèi)服務(wù)，然而一般的企業(yè)很難有這樣的技術(shù)儲(chǔ)備。

我們也是使用的策略是：先把 word/ppt轉(zhuǎn)為pdf，再把 pdf轉(zhuǎn)為 svg，在頁(yè)面上看到的文檔就是轉(zhuǎn)換之后的svg，選用svg而不是png，是因?yàn)閟vg放大不失真。使用文檔轉(zhuǎn)圖片的這個(gè)策略有一個(gè)優(yōu)點(diǎn)，就是文檔不怕被盜用。word/ppt轉(zhuǎn) pdf使用的是 libreoffice[7]，pdf轉(zhuǎn) svg使用的是 pdf2svg[8]，都是開(kāi)源軟件，全平臺(tái)支持（windows/linux/mac）。

3.4 程序?qū)崿F(xiàn)

（1）數(shù)據(jù)表

系統(tǒng)中所有的數(shù)據(jù)表如下：

1）課程表 course

2）課程單元表 unit

3）課件表 file

4）作業(yè)表 work

5）作業(yè)題表 exam

6）課程用戶(hù)關(guān)系表 course_student

7）評(píng)論表 comment

8）課程通知記錄表 log_notice

9）用戶(hù)表 user

10）找回密碼表 retrieve

11）統(tǒng)計(jì)表 stat

數(shù)據(jù)庫(kù)ER圖，如圖4所示。

圖4 數(shù)據(jù)庫(kù)ER圖Fig.4 Database ER diagram

（2）關(guān)鍵代碼

登錄驗(yàn)證，使用token來(lái)實(shí)現(xiàn)記住登錄，token設(shè)置過(guò)期時(shí)間，能有效防止賬號(hào)被盜，其核心邏輯如下：

// 權(quán)限校驗(yàn)

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

if token == "" {

// 跳轉(zhuǎn)到登錄頁(yè)

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

return

} else {

// 使用token自動(dòng)登錄

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技術(shù)實(shí)現(xiàn)，不需要依賴(lài)flash，能更輕易的在手機(jī)端展示，核心代碼如下：

// 視頻播放器，容器代碼

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

// 視頻播放器，邏輯代碼new DPlayer({

container： document.getElementById('dplayer'),

video： {

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

}});

由于在網(wǎng)頁(yè)上 office文檔是不能直接訪問(wèn)的，故需要一些轉(zhuǎn)換的過(guò)程，以下是 office轉(zhuǎn) pdf的核心代碼：

// 把 word/ppt/excel轉(zhuǎn)為 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）關(guān)鍵頁(yè)面

管理后臺(tái)頁(yè)面，如圖5、圖6所示。

圖5 后臺(tái)課程列表圖Fig.5 Backstage course list chart

圖6 后臺(tái)課程單元列表圖Fig.6 Backstage course unit list diagram

登陸界面如圖7所示；站點(diǎn)首頁(yè)如圖8所示，顯示微課資源列表。

微課內(nèi)容頁(yè)示例如圖9所示，可以觀看視頻教程、關(guān)注課程、評(píng)論課程等；課件正文頁(yè)示例如圖10所示，在頁(yè)面上使用svg實(shí)現(xiàn)，并使用了懶加載技術(shù)，給用戶(hù)更友好的體驗(yàn)。

圖7 登錄界面Fig.7 Login interface

圖8 首頁(yè)界面Fig.8 Home interface

圖9 微課內(nèi)容頁(yè)示例Fig.9 Example of a content page for a micro lesson

圖10 課件正文頁(yè)示例Fig.10 Courseware text page example

4 結(jié)語(yǔ)

基于 HTML5的高職課程資源庫(kù)系統(tǒng)從設(shè)計(jì)到研發(fā)歷時(shí)近一年的時(shí)間，前期進(jìn)行UI設(shè)計(jì)以及通過(guò)HTML5+CSS3實(shí)訓(xùn)前端頁(yè)面，利用Golang+MySQL進(jìn)行后臺(tái)開(kāi)發(fā)，數(shù)據(jù)庫(kù)使用的是MySQL，將移動(dòng)數(shù)據(jù)技術(shù)[9-13]應(yīng)用到教學(xué)中，為學(xué)生提供了一個(gè)很好的自主學(xué)習(xí)的平臺(tái)，讓學(xué)生可以利用碎片化時(shí)間隨時(shí)隨地使用移動(dòng)設(shè)備進(jìn)行學(xué)習(xí)。當(dāng)然，根據(jù)課程資源的豐富程度和學(xué)生的具體使用情況，本系統(tǒng)可以做進(jìn)一步的研究，開(kāi)發(fā)更多適用的功能。