基于MVVM的一体化教学资源管理平台研究

李真，褚龙现，夏栋梁，鲁亚峥

(平顶山学院计算机学院(软件学院)，河南平顶山467000)

基于MVVM的一体化教学资源管理平台研究

李真，褚龙现，夏栋梁，鲁亚峥

(平顶山学院计算机学院(软件学院)，河南平顶山467000)

针对学院一体化教学改革过程中出现的教学资源共享和管理问题，该文采用AngularJS和SpringMVC技术，运用MVVM设计模式设计并实现了一体化教学资源管理平台。平台包含班级课程关联、作业管理、多媒体资源管理、优秀作品管理和分组管理等功能，能够提供一体化教学资源的分类分权限管理服务，简化教师管理和分享教学资源的工作，方便学生查看和使用教学资源。经过测试和试用验证，平台运行良好，能够很好地支撑一体化教学过程中的教学资源管理任务,达到设计要求。

MVVM；AngularJS；SpringMVC；资源管理平台；一体化教学

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

一体化教学模式[1]是平顶山学院软件学院于2013年开始实施的一种教学改革思路，其核心理念是理论与实践的统一，即教学过程中采用“教学做”三者相结合的方式培养学生。经过4年的探索和实践，学院的多门专业核心课程应用了一体化教学模式[2-4]，这种教学模式也受到学生的一致欢迎。一体化教学模式中，资源管理平台化也是其目标之一。在进行一体化教学的过程中，大量的教学资源管理和分享工作还存在一定的问题，主要体现在四个方面，即资源共享方式单一、学生获取资源途径不够畅通、资源收集管理效率低下和管理监督实时性差[5]。为解决以上问题，学院开发了一体化教学资源管理平台。随着一体化教学模式在学院的推广的普及，一体化资源管理平台的必要性已经越来越明显。

1 系统需求

1.1 功能需求

结合院系实际的教学需要，获取一体化教学资源管理平台(以下简称“平台”)的需求如下。系统分为5类角色，分别是院系、管理员、教研室、教师和学生，其中的重点是教师、学生和管理员。

1)教师具备课程关联管理、作业管理、教学资源管理、多媒体资料管理和优秀作品管理等功能。

2)学生具备作业提交、查看和下载多媒体资料、下载优秀作品等功能。

3)管理人员具备系统数据初始化功能，并可以对系统的各类基础信息进行管理和维护，如专业信息、班级信息、学生信息、教师信息等等。

院系可以查看各类统计信息，如教学资源的上传情况、多媒体资料分享情况和优秀项目作品的统计信息。教研室主任具备普通教师的所有权限，此外还具有教师评价和上传教师优秀案例功能。

1.2 性能及运行需求

平台的性能要求是响应速度快、安全可靠并易于维护。平台应运行稳定，能够支撑院系的教学资源管理工作，界面应简洁大方且操作简单。平台运行在Tomcat7.0容器中，采用MySQL5.6作为数据库服务器。

2 系统总体设计

2.1 系统功能设计

根据需求分析的结果，对系统进行总体设计，得出系统的功能结构如图1所示。

图1 系统功能结构图

2.2 系统架构设计

系统整体架构采用模型视图视图模型(Model-View-View⁃Model，MVVM)设计模式[6-7]，分为Web前端和服务器端两部分。平台的架构如图2所示。

系统的Web前端是视图层(View层)，采用AngularJS框架[8]；服务器端包含视图模型层(ViewModel层)和模型层(Model层)，分别采用SpringMVC框架[9]和Mybatis框架。视图层是教学资源管理平台的界面，为用户提供操作接口，所展示的数据来自视图模型层并能通过AngularJS的双向绑定机制对视图模型进行修改；视图模型层是平台的业务逻辑处理层，进行各类资源管理操作并把结果封装到视图模型对象中，与视图层进行交互。模型层是平台的数据管理层，用于信息的面向对象表示并处理相应的数据库操作，由视图模型层调用。

图2 系统架构设计图

3 重要模块详细设计

3.1 作业管理模块

作业管理是平台的重要功能，教师可以通过该功能发布作业、查看作业上交情况、批量下载学生提交的作业，学生可以查看教师发布的作业、下载作业要求、按时提交作业。若超过了作业中设定的截止时间，则学生无法再提交作业。

教师发布作业时需设置提交作业的截止时间，超过时间后则系统不再接收学生的提交作业请求。默认的提交截止时间是发布作业后的第5天，教师可根据需要调整。教师点击当次作业后的下载按钮可下载当次所有学生提交的作业。此时，系统根据教师用户信息和待下载作业信息到数据库中查询当次作业的提交情况并把作业文件打包压缩为Zip文件，随后弹出下载对话框由教师下载学生提交的作业。

3.2 课程关联管理模块

课程关联是教师使用平台的重要支撑，通过课程的关联可以确定教师和学生在平台中的访问权限。教师可以查看和下载所教授课程的历年资料，学生可以查看和下载所学课程的历年资料和授课教师提供的资料。教师进入课程关联模块后，根据系统的提示选择所教授课程和班级信息后添加关联，则系统把上述信息和自动获取到的学期信息及教师用户信息进行关联并存入数据库。

3.3 多媒体资料管理模块

3.3.1 文档类资料

文档类资料相关功能是平台的核心功能，用于教师和学生共享文档类型资料。教师和学生可以通过该功能查询、上传、在线浏览和下载文档类学习资料，文档类型支持ppt、pptx、word文档、excel文档、pdf文档和文本文档等多种文件类型。

该功能的重点和难点是文档的在线预览。其实现流程是先借助openoffice提供的文档转换工具把上传的各类文档转换为pdf格式的文件，然后借助swfTools工具把pdf文件转换为swf格式的文件，最后通过FlexPaper插件在线展示生成的swf文件，实现文档在线预览功能。文档预览功能如图3所示。

图3 文档在线预览功能截图

3.3.2 视频类学习资料

视频类学习资料是重要的辅助资源，教师和学生可以把网上找到的或自己录制的学习视频上传到平台上，分享给学习同一门课的学生。

该功能的重点和难点是视频的在线预览。其实现流程是先使用Java调用ffmpeg工具把用户上传的视频转换为flv格式的视频，再由FlowPlayer插件在线播放flv文件，从而实现视频文件的在线查看。

3.4 优秀作品管理模块

优秀作品管理用于分享课程中出现的学生优秀项目作品。由教师每学期选择所教授的各门课程中的优秀作品进行上传和管理，学过对应课程的学生可以查看和下载作品，教过相同课程的教师也可以下载作品，教研室可以查看所属教研室的优秀作品，院系可以查看所有优秀作品。

4 结束语

系统开发完成后部署在院系的联想服务器上。经过测试运行，系统能够良好地管理本学期的各类教学资源。一体化教学资源管理平台的完成实现了一体化教学模式中的“资源管理平台化”这一目标，它标志着一体化教学模式成为了完整的教学模式。平台为平顶山学院软件学院一体化教学模式下的资源管理提供了方便易用的分享功能，减少了大量的人工管理工作，能够有效提升教学工作效率，减轻教师的机械工作量。

[1]鲁书喜,樊爱宛.软件工程专业课程一体化教学改革与探索[J].科技资讯,2015(16)：161-162.

[2]黄淼,褚龙现,马丽.《Java实训》课程一体化教学改革探索——以平顶山学院软件学院为例[J].信息系统工程,2015(10)：144-145,147.

[3]何伟娜,褚龙现.一体化教学在Java Web开发课程中的应用[J].电脑知识与技术,2015(18)：100-101.

[4]张国平,王文虎,马丽.J2EE实训课程一体化教学改革模式研究[J].计算机教育,2014(23)：44-47.

[5]褚龙现,邢立国.JavaWeb一体化教学改革中资源管理模式研究[J].电脑知识与技术,2015(17)：102-104.

[6]封宇,陈宁江.基于MVVM架构的移动Web前端展示方案[J].计算机与现代化,2014(11)：1-4.

[7]陈涛.MVVM设计模式及其应用研究[J].计算机与数字工程,2014(10)：1982-1985.

[8]董英茹.简谈AngularJS在下一代Web开发中的应用[J].软件工程师,2015(5)：30-31.

[9]黄淼,张国平.基于Spring MVC的高校教务评教系统设计[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

河南省高等学校重点科研项目(18B520028)；平顶山学院青年科研基金项目(PXYQNJJ2016013)

李真(1987—)，男，河南镇平人，助教，硕士，主要研究方向为模型检测，图像处理；褚龙现(1981—)，副教授，硕士；夏栋梁(1981—)，讲师，硕士；鲁亚峥(1996—)，本科。