基于MVVM的一體化教學(xué)資源管理平臺(tái)研究

李真，褚龍現(xiàn)，夏棟梁，魯亞崢

(平頂山學(xué)院計(jì)算機(jī)學(xué)院(軟件學(xué)院)，河南平頂山467000)

基于MVVM的一體化教學(xué)資源管理平臺(tái)研究

李真，褚龍現(xiàn)，夏棟梁，魯亞崢

(平頂山學(xué)院計(jì)算機(jī)學(xué)院(軟件學(xué)院)，河南平頂山467000)

針對(duì)學(xué)院一體化教學(xué)改革過程中出現(xiàn)的教學(xué)資源共享和管理問題，該文采用AngularJS和SpringMVC技術(shù)，運(yùn)用MVVM設(shè)計(jì)模式設(shè)計(jì)并實(shí)現(xiàn)了一體化教學(xué)資源管理平臺(tái)。平臺(tái)包含班級(jí)課程關(guān)聯(lián)、作業(yè)管理、多媒體資源管理、優(yōu)秀作品管理和分組管理等功能，能夠提供一體化教學(xué)資源的分類分權(quán)限管理服務(wù)，簡(jiǎn)化教師管理和分享教學(xué)資源的工作，方便學(xué)生查看和使用教學(xué)資源。經(jīng)過測(cè)試和試用驗(yàn)證，平臺(tái)運(yùn)行良好，能夠很好地支撐一體化教學(xué)過程中的教學(xué)資源管理任務(wù),達(dá)到設(shè)計(jì)要求。

MVVM；AngularJS；SpringMVC；資源管理平臺(tái)；一體化教學(xué)

Abstract：To solve the problems which produced in the progress of integrated teaching reform,a teaching resource management platform was designed and implemented with AngularJS and SpringMVC framework Based on MVVM design model.Functions such as classes and courses linking,assignment management,media resource management,excellent work management and stu?dent grouping management are contined in the platform,and thus the service of managing resources is provided.It simplifies the jobs of teacher to manage and share teaching resources,and makes it more convenient for student to use the shared teaching re?sources.Tests show that the platform runs smoothly and is capable of managing integrated teaching resources,thus,the design re?quirements are reached.

Key words：MVVM;AngularJS;Spring MVC;resource management platform;Integrated Teaching

一體化教學(xué)模式[1]是平頂山學(xué)院軟件學(xué)院于2013年開始實(shí)施的一種教學(xué)改革思路，其核心理念是理論與實(shí)踐的統(tǒng)一，即教學(xué)過程中采用“教學(xué)做”三者相結(jié)合的方式培養(yǎng)學(xué)生。經(jīng)過4年的探索和實(shí)踐，學(xué)院的多門專業(yè)核心課程應(yīng)用了一體化教學(xué)模式[2-4]，這種教學(xué)模式也受到學(xué)生的一致歡迎。一體化教學(xué)模式中，資源管理平臺(tái)化也是其目標(biāo)之一。在進(jìn)行一體化教學(xué)的過程中，大量的教學(xué)資源管理和分享工作還存在一定的問題，主要體現(xiàn)在四個(gè)方面，即資源共享方式單一、學(xué)生獲取資源途徑不夠暢通、資源收集管理效率低下和管理監(jiān)督實(shí)時(shí)性差[5]。為解決以上問題，學(xué)院開發(fā)了一體化教學(xué)資源管理平臺(tái)。隨著一體化教學(xué)模式在學(xué)院的推廣的普及，一體化資源管理平臺(tái)的必要性已經(jīng)越來越明顯。

1 系統(tǒng)需求

1.1 功能需求

結(jié)合院系實(shí)際的教學(xué)需要，獲取一體化教學(xué)資源管理平臺(tái)(以下簡(jiǎn)稱“平臺(tái)”)的需求如下。系統(tǒng)分為5類角色，分別是院系、管理員、教研室、教師和學(xué)生，其中的重點(diǎn)是教師、學(xué)生和管理員。

1)教師具備課程關(guān)聯(lián)管理、作業(yè)管理、教學(xué)資源管理、多媒體資料管理和優(yōu)秀作品管理等功能。

2)學(xué)生具備作業(yè)提交、查看和下載多媒體資料、下載優(yōu)秀作品等功能。

3)管理人員具備系統(tǒng)數(shù)據(jù)初始化功能，并可以對(duì)系統(tǒng)的各類基礎(chǔ)信息進(jìn)行管理和維護(hù)，如專業(yè)信息、班級(jí)信息、學(xué)生信息、教師信息等等。

院系可以查看各類統(tǒng)計(jì)信息，如教學(xué)資源的上傳情況、多媒體資料分享情況和優(yōu)秀項(xiàng)目作品的統(tǒng)計(jì)信息。教研室主任具備普通教師的所有權(quán)限，此外還具有教師評(píng)價(jià)和上傳教師優(yōu)秀案例功能。

1.2 性能及運(yùn)行需求

平臺(tái)的性能要求是響應(yīng)速度快、安全可靠并易于維護(hù)。平臺(tái)應(yīng)運(yùn)行穩(wěn)定，能夠支撐院系的教學(xué)資源管理工作，界面應(yīng)簡(jiǎn)潔大方且操作簡(jiǎn)單。平臺(tái)運(yùn)行在Tomcat7.0容器中，采用MySQL5.6作為數(shù)據(jù)庫(kù)服務(wù)器。

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

2.1 系統(tǒng)功能設(shè)計(jì)

根據(jù)需求分析的結(jié)果，對(duì)系統(tǒng)進(jìn)行總體設(shè)計(jì)，得出系統(tǒng)的功能結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)功能結(jié)構(gòu)圖

2.2 系統(tǒng)架構(gòu)設(shè)計(jì)

系統(tǒng)整體架構(gòu)采用模型視圖視圖模型(Model-View-View?Model，MVVM)設(shè)計(jì)模式[6-7]，分為Web前端和服務(wù)器端兩部分。平臺(tái)的架構(gòu)如圖2所示。

系統(tǒng)的Web前端是視圖層(View層)，采用AngularJS框架[8]；服務(wù)器端包含視圖模型層(ViewModel層)和模型層(Model層)，分別采用SpringMVC框架[9]和Mybatis框架。視圖層是教學(xué)資源管理平臺(tái)的界面，為用戶提供操作接口，所展示的數(shù)據(jù)來自視圖模型層并能通過AngularJS的雙向綁定機(jī)制對(duì)視圖模型進(jìn)行修改；視圖模型層是平臺(tái)的業(yè)務(wù)邏輯處理層，進(jìn)行各類資源管理操作并把結(jié)果封裝到視圖模型對(duì)象中，與視圖層進(jìn)行交互。模型層是平臺(tái)的數(shù)據(jù)管理層，用于信息的面向?qū)ο蟊硎静⑻幚硐鄳?yīng)的數(shù)據(jù)庫(kù)操作，由視圖模型層調(diào)用。

圖2 系統(tǒng)架構(gòu)設(shè)計(jì)圖

3 重要模塊詳細(xì)設(shè)計(jì)

3.1 作業(yè)管理模塊

作業(yè)管理是平臺(tái)的重要功能，教師可以通過該功能發(fā)布作業(yè)、查看作業(yè)上交情況、批量下載學(xué)生提交的作業(yè)，學(xué)生可以查看教師發(fā)布的作業(yè)、下載作業(yè)要求、按時(shí)提交作業(yè)。若超過了作業(yè)中設(shè)定的截止時(shí)間，則學(xué)生無法再提交作業(yè)。

教師發(fā)布作業(yè)時(shí)需設(shè)置提交作業(yè)的截止時(shí)間，超過時(shí)間后則系統(tǒng)不再接收學(xué)生的提交作業(yè)請(qǐng)求。默認(rèn)的提交截止時(shí)間是發(fā)布作業(yè)后的第5天，教師可根據(jù)需要調(diào)整。教師點(diǎn)擊當(dāng)次作業(yè)后的下載按鈕可下載當(dāng)次所有學(xué)生提交的作業(yè)。此時(shí)，系統(tǒng)根據(jù)教師用戶信息和待下載作業(yè)信息到數(shù)據(jù)庫(kù)中查詢當(dāng)次作業(yè)的提交情況并把作業(yè)文件打包壓縮為Zip文件，隨后彈出下載對(duì)話框由教師下載學(xué)生提交的作業(yè)。

3.2 課程關(guān)聯(lián)管理模塊

課程關(guān)聯(lián)是教師使用平臺(tái)的重要支撐，通過課程的關(guān)聯(lián)可以確定教師和學(xué)生在平臺(tái)中的訪問權(quán)限。教師可以查看和下載所教授課程的歷年資料，學(xué)生可以查看和下載所學(xué)課程的歷年資料和授課教師提供的資料。教師進(jìn)入課程關(guān)聯(lián)模塊后，根據(jù)系統(tǒng)的提示選擇所教授課程和班級(jí)信息后添加關(guān)聯(lián)，則系統(tǒng)把上述信息和自動(dòng)獲取到的學(xué)期信息及教師用戶信息進(jìn)行關(guān)聯(lián)并存入數(shù)據(jù)庫(kù)。

3.3 多媒體資料管理模塊

3.3.1 文檔類資料

文檔類資料相關(guān)功能是平臺(tái)的核心功能，用于教師和學(xué)生共享文檔類型資料。教師和學(xué)生可以通過該功能查詢、上傳、在線瀏覽和下載文檔類學(xué)習(xí)資料，文檔類型支持ppt、pptx、word文檔、excel文檔、pdf文檔和文本文檔等多種文件類型。

該功能的重點(diǎn)和難點(diǎn)是文檔的在線預(yù)覽。其實(shí)現(xiàn)流程是先借助openoffice提供的文檔轉(zhuǎn)換工具把上傳的各類文檔轉(zhuǎn)換為pdf格式的文件，然后借助swfTools工具把pdf文件轉(zhuǎn)換為swf格式的文件，最后通過FlexPaper插件在線展示生成的swf文件，實(shí)現(xiàn)文檔在線預(yù)覽功能。文檔預(yù)覽功能如圖3所示。

圖3 文檔在線預(yù)覽功能截圖

3.3.2 視頻類學(xué)習(xí)資料

視頻類學(xué)習(xí)資料是重要的輔助資源，教師和學(xué)生可以把網(wǎng)上找到的或自己錄制的學(xué)習(xí)視頻上傳到平臺(tái)上，分享給學(xué)習(xí)同一門課的學(xué)生。

該功能的重點(diǎn)和難點(diǎn)是視頻的在線預(yù)覽。其實(shí)現(xiàn)流程是先使用Java調(diào)用ffmpeg工具把用戶上傳的視頻轉(zhuǎn)換為flv格式的視頻，再由FlowPlayer插件在線播放flv文件，從而實(shí)現(xiàn)視頻文件的在線查看。

3.4 優(yōu)秀作品管理模塊

優(yōu)秀作品管理用于分享課程中出現(xiàn)的學(xué)生優(yōu)秀項(xiàng)目作品。由教師每學(xué)期選擇所教授的各門課程中的優(yōu)秀作品進(jìn)行上傳和管理，學(xué)過對(duì)應(yīng)課程的學(xué)生可以查看和下載作品，教過相同課程的教師也可以下載作品，教研室可以查看所屬教研室的優(yōu)秀作品，院系可以查看所有優(yōu)秀作品。

4 結(jié)束語(yǔ)

系統(tǒng)開發(fā)完成后部署在院系的聯(lián)想服務(wù)器上。經(jīng)過測(cè)試運(yùn)行，系統(tǒng)能夠良好地管理本學(xué)期的各類教學(xué)資源。一體化教學(xué)資源管理平臺(tái)的完成實(shí)現(xiàn)了一體化教學(xué)模式中的“資源管理平臺(tái)化”這一目標(biāo)，它標(biāo)志著一體化教學(xué)模式成為了完整的教學(xué)模式。平臺(tái)為平頂山學(xué)院軟件學(xué)院一體化教學(xué)模式下的資源管理提供了方便易用的分享功能，減少了大量的人工管理工作，能夠有效提升教學(xué)工作效率，減輕教師的機(jī)械工作量。

[1]魯書喜,樊愛宛.軟件工程專業(yè)課程一體化教學(xué)改革與探索[J].科技資訊,2015(16)：161-162.

[2]黃淼,褚龍現(xiàn),馬麗.《Java實(shí)訓(xùn)》課程一體化教學(xué)改革探索——以平頂山學(xué)院軟件學(xué)院為例[J].信息系統(tǒng)工程,2015(10)：144-145,147.

[3]何偉娜,褚龍現(xiàn).一體化教學(xué)在Java Web開發(fā)課程中的應(yīng)用[J].電腦知識(shí)與技術(shù),2015(18)：100-101.

[4]張國(guó)平,王文虎,馬麗.J2EE實(shí)訓(xùn)課程一體化教學(xué)改革模式研究[J].計(jì)算機(jī)教育,2014(23)：44-47.

[5]褚龍現(xiàn),邢立國(guó).JavaWeb一體化教學(xué)改革中資源管理模式研究[J].電腦知識(shí)與技術(shù),2015(17)：102-104.

[6]封宇,陳寧江.基于MVVM架構(gòu)的移動(dòng)Web前端展示方案[J].計(jì)算機(jī)與現(xiàn)代化,2014(11)：1-4.

[7]陳濤.MVVM設(shè)計(jì)模式及其應(yīng)用研究[J].計(jì)算機(jī)與數(shù)字工程,2014(10)：1982-1985.

[8]董英茹.簡(jiǎn)談AngularJS在下一代Web開發(fā)中的應(yīng)用[J].軟件工程師,2015(5)：30-31.

[9]黃淼,張國(guó)平.基于Spring MVC的高校教務(wù)評(píng)教系統(tǒng)設(shè)計(jì)[J].電子設(shè)計(jì)工程,2016(8)：23-26.

Research on Integrated Teaching Resource Management Platform Based on MVVM

LI Zhen,CHU Long-xian,XIA Dong-liang,LU Ya-zheng
(School of Computer Science(School of Software),Pingdingshan University,Pingdingshan 467000,China)

TP311.52

A

1009-3044(2017)24-0067-02

2017-07-06

河南省高等學(xué)校重點(diǎn)科研項(xiàng)目(18B520028)；平頂山學(xué)院青年科研基金項(xiàng)目(PXYQNJJ2016013)

李真(1987—)，男，河南鎮(zhèn)平人，助教，碩士，主要研究方向?yàn)槟Ｐ蜋z測(cè)，圖像處理；褚龍現(xiàn)(1981—)，副教授，碩士；夏棟梁(1981—)，講師，碩士；魯亞崢(1996—)，本科。