一種基于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]應用到教學中，為學生提供了一個很好的自主學習的平臺，讓學生可以利用碎片化時間隨時隨地使用移動設備進行學習。當然，根據課程資源的豐富程度和學生的具體使用情況，本系統可以做進一步的研究，開發更多適用的功能。