高校实验室资源信息管理系统的设计与研究

吴伟娜 于北瑜 孙会强 周会会

（广东海洋大学数学与计算机学院 广东省湛江市 524088）

1 引言

随着高校培养人才对实践动手能力和创新能力的不断提高[1-2]，理工科和文科的很多课程都在不断增设课程的实验项目或者实验课程，实验室成为高校教师和学生越来越重要的教学活动场所，很多高校也不断加大对实验室建设的财力投入，硬件设施得到了很大的改善。实验室在提高高校教师的科研能力方面，以及提高学生的实践动手能力和创新开发能力等方面具有重要作用，是重要的科研与学习空间、实验教学与人才培养基地。然而，有些高校的实验室管理比较分散，从而造成一定的资源浪费[3-4]，大多数实验室基本上都是有课的时候学生才可以进入实验室，尤其是办学层次比较低的一些高校，实验室的规模与管理水平、使用效果反映了高校的办学水平。因此，为了充分利用实验室资源，提高资源利用率及其管理效率，各高校对实验室资源管理提出了越来越高的要求，实验室资源管理也因而成为当前高校实验室工作的重要任务之一，各高校也在不断投入财力提高管理效率[5-9]。本文针对广东海洋大学计算机实验室的管理开发设计了一个信息管理平台，用于平时的教学活动安排和实验室资源占用情况查询，强化实验室对师生的服务功能，从而使得实验室资源的利用达到最大化。

2 实验室资源信息管理系统

系统的用户分为资源管理和资源查询与申请需求，前者为管理员，系统的权限大，对后者的基本情况进行核实，对实验室资源的配置情况及其使用情况、预约情况进行统一运筹和管理，可以在系统发布一些实验室申请使用的公告，也可以对各种信息增添删除或者修改等操作。后者为师生用户，除了可以修改设置个人的密码等信息之外，主要有实验室资源占用情况（上课、待定）的查询以及实验室资源的预约申请，查看公告等。

3 实验室资源信息管理系统的设计

开发设计实验室管理系统的主要目的是发挥教育信息技术在教学资源管理中的作用，方便老师和学生在日常教学活动中对实验室的使用进行线上查询和预约。

图1 是本系统的登陆界面，登陆用户名为administrator 和u123456 或u654321 两种类型（123456 和654321 分别表示教工号和学号）。系统根据登陆账号的特点将自动判断和识别用户类型，从而区分登陆用户具有管理权限还是使用权限。系统建立了基于MVVM 设计模式的数据库，包含实验室占用、待定、空闲情况以及配置信息、用户信息情况等信息。

3.1 实验室资源信息使用情况查询

图1：系统的登陆界面

图2：系统信息展示

图3：资源信息的可视化结果

系统为登陆用户提供了实验室查询功能，登陆时依据登陆查账识别登陆账号的身份类别以后迅速提供相应的查询功能，方便用户快速找到可用的实验室及其所属的区域或教学实验楼。信息展示页面如图2所示。

3.2 实验室空闲资源的预约申请

为了提高实验室资源的利用率和高效管理，本资源管理系统为用户建立了空闲实验室在线预约申请的功能。

申请时，用户首先登录系统查询实验室的配置情况以及在自己欲申请的时间段是否处于空闲状态或待定状态，如果不是空闲或待定状态的实验室则不能进入预约界面，同时系统会优先推荐空闲状态的实验室。预约时，选中自己想要的实验室，并且填写申请使用的理由、具体的时间段、申请人的联系信息及其所在的学院和班级等信息。

图4：MVVM 示意图

图5：双向绑定的代码

3.3 实验室资源的可视化浏览

为了方便老师和学生更快的申请到自己需要的实验室，系统增添了各楼宇实验室占用情况的可视化模块，有的占用率高有的占用率低，申请预约的用户可以首先选择占用率低的区域找是否有符合自己配置要求的实验室，然后申请，从而提高用户申请预约的效率。实验室资源的可视化结果如图3所示。

3.4 实验室资源系统的统筹管理

系统的统筹管理只属于管理员，普通用户只有使用权而没有管理权，从而确保系统的安全性。

本系统是根据登陆时的账户自动识别用户类型从而确定对应的权限，如果识别到管理员登陆，则界面上可对实验室资源的占用情况、预约情况和空闲情况以及其他用户信息进行查询和添加、修改、删除等操作，如果遇到某种紧急情况须要使用某个实验室，但是该实验室又已经被预约的情况下，管理员可删除该预约同时向申请人发送相关信息，提醒申请人重新进行预约，最终达到管理实验室资源系统的目的。

4 管理系统的核心技术

本文的资源管理系统采用MVVM(Model-View-ViewModel)设计模式的vue.js 进行开发，可以大大地减少对DOM(Document Object Model)的操作，框架替我们做了大部分的工作，从而专注于数据驱动的方式进行开发，提升可读性以及可复用性。MVVM 设计模式的ViewModel 可以理解为数据处理层，View 层发生变化的时候会直接影响到ViewModel 层的变化，同时，ViewModel 层得到的变化也会明显影响到View 层的效果[10]，这个变化关系称之为双向绑定，如图4所示。

其中，系统的View 层主要是用于呈现给用户，用户在这里进行交互。View 中应尽量减少逻辑，只存在简单的条件，避免耦合过多的逻辑，从而导致系统后期维护困难。其独立于Model 层的变化与改变。通常细分下来就是HTML+CSS 层。ViewModel 是控制层，是View 层与Model 层的桥梁，Model 层或View 层发生的更改需要ViewModel 来通讯，这一部分的操作具体由vue.js 实现MVVM 双向绑定。Model 层负责主要的业务逻辑。

系统在进行数据录入的时候，信息会同步录入到form 变量，方便进行后期的数据处理，我们主要通过vue.js 的v-model实现数据的双向绑定，具体的实现使用了Observer 中的Object.definePrototype()函数实现监听数据，当数据变化时就通知订阅者并执行绑定的更新函数，从而达到更新View 的目的。双向绑定功能的代码如图5所示。

而系统的数据可视化采用了由vue.js 封装的vue-schart 的图表组件进行，使得采集到的数据在可视化时不繁琐、逻辑不复杂。

核心技术采用MVVM 设计模式的意义在于：

（1）提升开发体验，View 与逻辑层的分离大大提高开发效率。

（2）方便测试，测试ViewModel 的代码即可验证功能逻辑的正确与否。

（3）MVVM 模式搭配虚拟DOM 技术极大地减少了直接的DOM 操作。通过Diff 算法节省了操作DOM 所带来的开销。

5 结束语

本文基于MVVM 设计模式的vue.js 开发了实验室资源管理系统，解决了实验室开放管理中的查询、预约申请等操作过程的复杂问题，充分体现了教育信息现代化在教学与科研中的作用，使得高校能够充分利用实验室资源，提高资源利用率及其管理效率，为实验室资源的高效利用与管理奠定了便利基础。