实验室资源信息管理系统设计研究

摘要：本文基于MVVM设计模式的vue.js开发设计了一套实验室资源管理系统，用于教学活动安排和师生对实验室资源资源占用情况的查询，以及预约申请等操作，确保实验室资源的利用达到最大化。

关键词：实验室资源；MVVM；信息管理

1引言

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

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

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

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

开发设计实验室管理系统的主要目的是发挥教育信息技术在教学资源管理中的作用，方便老师和学生在日常教学活动中对实验室的使用进行线上查询和预约。图1是本系统的登陆界面，登陆用户名为administrator和u123456或u654321两种类型（123456和654321分别表示教工号和学号）。系统根据登陆账号的特点将自动判断和识别用户类型，从而区分登陆用户具有管理权限还是使用权限。系统建立了基于MVVM设计模式的数据库，包含实验室占用、待定、空闲情况以及配置信息、用户信息情况等信息。

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

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

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

为了提高实验室资源的利用率和高效管理，本资源管理系统为用户建立了空闲实验室在线预约申请的功能。申请时，用户首先登录系统查询实验室的配置情况以及在自己欲申请的时间段是否处于空闲状态或待定状态，如果不是空闲或待定状态的实验室则不能进入预约界面，同时系统会优先推荐空闲状态的实验室。预约时，选中自己想要的实验室，并且填写申请使用的理由、具体的时间段、申请人的联系信息及其所在的学院和班级等信息。3.3实验室资源的可视化浏览为了方便老师和学生更快的申请到自己需要的实验室，系统增添了各楼宇实验室占用情况的可视化模块，有的占用率高有的占用率低，申请预约的用户可以首先选择占用率低的区域找是否有符合自己配置要求的实验室，然后申请，从而提高用户申请预约的效率。实验室资源的可视化结果如图3所示。

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

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

4管理系统的核心技术

本文的资源管理系统采用MVVM(Model-View-ViewModel)设计模式的vue.js进行开发，可以大大地减少对DOM(DocumentObjectModel)的操作，框架替我们做了大部分的工作，从而专注于数据驱动的方式进行开发，提升可读性以及可复用性。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开发了实验室资源管理系统，解决了实验室开放管理中的查询、预约申请等操作过程的复杂问题，充分体现了教育信息现代化在教学与科研中的作用，使得高校能够充分利用实验室资源，提高资源利用率及其管理效率，为实验室资源的高效利用与管理奠定了便利基础。

参考文献

[1]陈真,戴永寿.基于“虚实结合”实践平台构建面向创新能力培养的实验教学模式[J].实验技术与管理,2020,37(9):223-225.

[2]崔萍，周晓莹等.面向创新与复杂问题求解能力培养的计算机网络实验教学改革[J].教育现代化,2019,8:62-64.

[3]翟宁,郭俊仓.微环境下考研座位预约功能的实现[J].农业图书情报学刊,2018,30(2):84-86.

[4]罗晶,叶耀辉,于玲玲等.医药院校实验室可视化管理平台探索[J].实验室研究与探索,2016,35(11):248-250.

[5]江洪波.浅谈三层架构在信息系统开发中的应用[J].信息通信,2016,12:205-206.

[6]王丹,钱磊,徐烨等.基于Web的实验室资源管理系统设计与实现[J].软件导刊,2018,17(3):67-69.

[7]白洁,刘丽艳,吴素焕等.高校实验室资源共享模式和管理机制的研究[J].实验技术与管理,2018,35(10):207-209.

[8]崔江慧,刘会玲,刘树庆.高校大型仪器设备管理的实践与探索[J].实验室研究与探索,2011,30(10):198-200.

[9]宋强.高校实验室资源的管理利用与共享[J].产业与科教论坛,2019,19(10):244-245.

[10]易剑波.基于MVVM模式的WEB前端框架的研究[J].信息与电脑,2016,19:76-77.

作者：吴伟娜 于北瑜 孙会强 周会会 单位：广东海洋大学数学与计算机学院