一種基于HTML5高職課程資源庫系統(tǒng)的設計與實現(xiàn)

袁勁松

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

0 引言

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

1 HTML5技術簡介

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

（1）提供了豐富的API。HTML5在HTML4設置的DOM接口的基礎上，增加了更為豐富的API，針對更為復雜的用戶需求提供了更為全面的接口支持。HTML5提供的 API主要包括網絡通信、圖形繪制應用、地理定位、離線存儲、后臺處理、文檔編輯應用和歷史記錄管理等方面，能夠滿足用戶的各種不同的需求。

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

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

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

2 系統(tǒng)設計

2.1 設計原則

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

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

2.2 功能設計

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

（1）用戶管理：教師賬號、學生賬號、教學管理賬號的創(chuàng)建、刪除、修改、權限設置等。

圖1 系統(tǒng)功能結構圖Fig.1 System functional structure diagram

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

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

（5）在線作業(yè)：針對教學資源的在線作業(yè)，包括在線評分。

（6）互動平臺：實現(xiàn)師生互動，采用留言的方式提問與解答。

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

3.1 前端技術選型

（1）概述

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

（2）前端UI

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

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

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

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

3.2 后端技術選型

（1）概述

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

（2）后端框架

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

（3）MVC

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

用戶發(fā)起請求，在瀏覽器輸入地址，請求到達Controller，對參數(shù)進行過濾組裝，然后調用Model，查詢數(shù)據庫，最后數(shù)據渲染到View，用戶就可以看到了，整個流程如圖3。

圖3 MVC流轉圖Fig.3 MVC flow graph

下面進行分別介紹：

Model，模型，直接與數(shù)據庫相關，一般一個表對應一個模型，這個概念剛提出不久的時候，數(shù)據庫的讀寫操作都在這里；而現(xiàn)在，Model只用來定義表結構與表關系、字段類型及字段映射，更多的數(shù)據庫讀寫操作會另外放到數(shù)據倉庫相關的邏輯層代碼里面。

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

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

（4）數(shù)據庫

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

3.3 依賴服務

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

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

3.4 程序實現(xiàn)

（1）數(shù)據表

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

1）課程表 course

2）課程單元表 unit

3）課件表 file

4）作業(yè)表 work

5）作業(yè)題表 exam

6）課程用戶關系表 course_student

7）評論表 comment

8）課程通知記錄表 log_notice

9）用戶表 user

10）找回密碼表 retrieve

11）統(tǒng)計表 stat

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

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

（2）關鍵代碼

登錄驗證，使用token來實現(xiàn)記住登錄，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技術實現(xiàn)，不需要依賴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實現(xiàn)，并使用了懶加載技術，給用戶更友好的體驗。

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