基于Vue.js的科研管理系统实现策略研究

程萍

摘要：随着大数据时代的到来，以及“互联网+”的发展，信息化管理已经成为各行业不可或缺的管理模式，科研是高校“软实力”建设的重点组成部分，科研水平的提高伴随着学院的成长，越来越多的老师参与到科研工作中，科研成果也随之增加，管理难度也日益凸显。部分高校科研管理工作仍然停留在传统模式，在管理过程中出现大量不易管理的纸质文件，数据收集和统计时常会出现漏登、错登、统计不完善的情况。学院科研管理实现信息化改革迫在眉睫，因此，文章的研究会促进高校科研管理系统的信息化发展。该研究运用MVVM开发模式和新型前端开发框架Vue.js技术，研究高校科研信息化管理系统前端部分的开发策略。

关键词：Vue.js；科研；管理；策略

中图分类号：TP393      文献标识码：A

文章编号：1009-3044（2023）06-0031-02

开放科学（资源服务）标识码（OSID）

从技术角度上来看，Web应用开发模式逐渐演变。早期前端与后台为密切耦合，这种情况下，导致项目逻辑及展现逻辑出现混杂。之后，MVC模式逐渐延伸，使前后端分工日趋明确，但该模式前端、后端依赖于开发环境，导致前后端在开发过程中，任务比较模糊，沟通成本高。随着移动互联网发展，设备逐渐呈现多元化发展，包括物联网设备，PC端、手机端等，给用户提供良好体验。但同时也会给开发人员带来较大的开发难度，增加人力成本，因此，将前后端分离，且不同终端可使用同一后台，这种情况下，仅需开发不同前端即可实现，能够帮助高校降低人力成本和开发成本，当前用户体验要求相比过去较高，更加注重前端体验，因此，前后端分离也是系统开发发展趋势，要求设计更加专业化的前端框架。

1 相关技术

第一，Vue.js技术。Vue.js是轻量级前端框架，其具有良好的性能和较强灵活性，其采用的是虚拟DOM机制，具体操作内存中对象运行速度较快，待更新后，可将最终js对象应映射为真实DOM，并交由浏览器进行绘制，进而解决浏览器性能问题[1-2]。Vue能够通过各变量添加多个setter以及getter，这样实现双向数据绑定，能够简化Web前端的开发流程，帮助研发者降低开发难度，提升前端开发效率，使高校能够缩短研发周期和成本。

第二，Vue-router以及vuex。Vue-router是Vue.js所发布的路由插件，其中Vue.js为深度集成。传统页面运用，是采用超链接的方式实现页面跳转、切换，而Vue-router路由插件单页面应用过程中，是通过路径之间切换的。而Vue.js实现无刷新访问页面、改变页面，实现页面路径动态调整，便于页面的切换，不断提升用户的体验感。vuex是Vue.js所提出的全局状态管理方案。能够在全球各实例中放置vuex，使各组件同步响应，进而减少系统运行复杂性。在管理全局状态过程中，需要区分组建本地状态以及应用层级状态，以防组建未来状态，被放置在應用及状态中进行管理[3]。

第三，Axios。Axios是基于promise的HTTP库，其能够用于node.js以及浏览器中。Axios可从浏览器创建XMLHttpreqests，能够支持API、拦截响应、请求转换，请求数据、响应数据等。在本系统设计中，采用Axios以实现服务器与客户端数据交换。

第四，云数据存储技术。该系统数据存储采用租赁第三方数据中心方式完成，即云存储技术，该技术将数据存储在云端多个服务器上，用户可方便通过系统程序接口API访问存储资源池中的数据。使用云存储技术不但可以提高系统的安全可靠性，而且实现了系统数据的海量存储[4]。

2系统分析

针对学院目前科研管理的实际情况，课题组成员分别与科研管理人员、科研处处长、科研干事进行了沟通，了解了在科研工作开展过程中各个环节的工作流程，根据用户对本科研系统的功能需求。课题组成员对用户需求进行分析，将用户需求概括归纳如下：

1）人员管理：对全院教师的基本信息进行批量导入、人员信息异动修改，能够根据参与科研工作的不同身份进行不同的操作，比如普通教师只能填写自己的科研成果相关信息及佐证材料，二级院系科研管理人员进行统计，科研处工作人员进行审核；对于课程申报普通教师能够填写申报书、提交、打印，二级院系审核通过提交给科研处审核，科研处核审核通过后按照课题申报流程完成课题从申报到结题的整个过程。同时，能够对参与科研评审人员的进行专家身份指定，专家具有审核评定课题的权利，并将意见建议提交。

2） 科研成果管理：科研处每年要对学院教师申报的各级别科研课题进行管理，统计，查询，能够对教师取得的科研成果比如已发表论文、专著、知识产权（包括发明专利，实用新型专利，软件著作权）等进行相关信息及佐证材料收集，以此减轻科研管理人员工作量，改变当前收集复印件，再使用电子表格统计的现状。同时，可以清晰掌握教师科研工作开展情况及取得的科研成就。

3）院级课题管理：需要实现各类课题的计划文件发放；网上填写院级课程申报书，院级课题分为两类：自然科学类和社会科学类，完成院级课题网上评审，先二级学院内部评审，再由科研处评审，实现院级课题全流程网络管理，包含院级课题从开题课题申报书填写、审核、答辩情况、中期报告、中期答辩情况、结题报告填写、结题情况等涵盖一个院级课题的整个周期全部数据文件的管理。

4）统计报表：科研处能够根据实际需求查询统计全院相关科研成果信息，比如按部门查询，按年查询，按成果类型查询等，多条件查询统计。二级院系根据需求查询统计本部门的相关科研信息，并能够生成相应报表。

5）公告：科研管理人员能够通过系统发布公告、修改公告、删除公告，其他人员浏览公告。

6）创新创业管理：创新创业相关通知发布，网上申报资料上报，获奖情况统计。

从开发平台非功能性需求来看，为保证前端框架用户具有良好的体验感，需考虑以下非功能性需求：第一，兼容性需求。在前端开发过程中，经常会存在兼容性问题，尤其是浏览器兼容性。不同浏览器兼容性和相同浏览器不同版本兼容性是目前前端开发框架急需解决的问题。第二，性能需求。为能够提升系统前端系统，为用户提供良好的体验感，需对前端代码进行优化，以减少HTTP请求次数及频率，由浏览器页面向服务器发送HTTP请求过程中，会消耗大量时间，尤其在处于网络状态不佳的情况下，问题较为突出，请求耗时是与网页资源加载情况相关，因此，在本研究中可运用Vue.js框架，能够避免DOM这一操作问题。

3系统设计

3.1系统结构设计

结合用户需求、专家意见，对该系统功能进行了详细分析，通过分析将科研管理系统按功能划分为8个模块：1）人员及部门管理；2）科研成果管理；3）院级课题管理；4）统计报表管理；5）成果转换管理；6）公告管理；7）创新创业管理；8）报奖管理。根据用户需求和行业技术发展现状制定科研管理系统设计实现方案和技术路线。该系统为方便用户随时随地访问，采用多端开发技术以实现PC、平板、手机均可访问。通过App、小程序、网页途径访问本科研系统进行相关业务操作，提高用户的使用体验感和系统的交互性。为了保证数据源的完整性和安全性本系统采用云存储技术。系统总体结构设计如图1所示。

3.2 功能模块的设计

本系统的设计目标为界面简约大方，操作灵活方便，不受时间、地点、设备限制，此系统为开放平台，根据用户需求将系统主要功能划分为6大核心模块，核心模块功能设计如下：

1）人员及部门管理模块设计。该模块涉及三个角色科研处处长、科研处干事、二级院负责人，科研处处长进行用户权限分配，指派专家评委；科研处干事进行人员及本部门信息的维护，批量数据后台导入，科研处干事主要负责人员信息的异动；二级院负责人主要是查看本部门人员信息如有错误或者密码遗忘等问题协调解决。

2）科研成果管理模块设计。该模块包括论文管理模块、著作管理模块、知识产权管理模块、课题管理模块，主要实现各类科研成果的信息审核、存储功能。各部门教师将自己发表的论文、著作、知识产权、研究课题的相关信息及佐证材料上传系统，先由二级院负责人进行资料信息清晰完整度进行审核，审核合格后提交科研处，科研处再次审核信息是否有效并对科研成果等级进行评定。审核、评定后信息自动存储数据库[5]。

3）院级课题管理模块设计。该模块包括三大模块计划管理、自科类课题申报模块、社科类课题申报模块。科研处可以通过计划管理模块转发各类课题相关计划文件。课题申报人员根据申报课题类别填写相应的课题申报书，填写完成后提交各部门审核，具体申报审核流程如图2所示。该模块支持申报书的导入、导出功能，使用导入功能，需下载文件模板，所导入文件写入模板中即可上传。

4）报表及统计模块设计。该模块科研处干事及二级院负责人根据自己的权限可实现以下分类查询功能：分教师查询，可查询一名教师的所有科研项目；分年度查询，可查询某一年度的某一科研项目的全部成果统计；分类别查询，可实现对某一类别科研项目的所有成果统计；组合查询，可实现以上类别的组合查询。用户可根据需要设定字段导出相关信息。

5）公告管理模块设计，科研干事通过该模块完成公告的发布、删除、修改等功能，科研处处长再次模块中完成公告的审核。其他人员只能浏览。

6）创新创业模块设计，该模块完成创新创业相关通知和获奖情况通报，各类创新创业成果的上报管理。

3.3 数据库设计

该科研系统数据库严格按照数据库设计范式原则设计，通过对科研系统实体进行分析建立数据模型，核心数据库设计如E-R图所示，根据需要共设计有用户表、 院级课题申报表（自科类申报表、社科类申报表）、科研成果（著作表、论文表、知识产权表、课题表）等12个数据表。设计数据库时考虑到相同数据不被重复存储，减少存储空间浪费，提高系统性能，表与表之间采用主键关联，从而减少访问重复数据和无关数据的概率，提高核心数据的访问速度。

4结束语

本研究阐述前端框架设计背景之后，分析当前主流前端技術。对于高校来说，采用这种开发技术，能够帮助高校提升生产效率，节约成本。根据高校系统基本模块需求，以及工作流程设计。该系统采用MVVM开发模式，利用前后端分离的方式[6]，进而实现前后端结构代码易于维护，采用Vue.js作为前端开发语言，能够保证系统前端性能，能够简化前端界面风格，根据用户需求，进行组件自定义，用户无须在开发组件上花费时间，能够提高开发效率。

参考文献：

[1] 张培妍.基于Vue.js的智能匹配系统的设计与实现[D].西安：西安电子科技大学，2019.

[2] 王志任.基于Vue.js的开发平台的设计与实现[D].广州：广东工业大学，2018.

[3] 刘金羽.前后端分离的在线考试系统设计与实现[J].电脑编程技巧与维护，2020（4）：44-46.

[4] 冯龙.云存储技术在高校信息化服务中的应用与研究[D].天津：天津科技大学，2013.

[5] 许博.基于.NET三层架构的科研管理系统的开发与应用[J].实验室研究与探索，2013，32（2）：188-190，207.

[6] 徐鹏涛.基于Vue的前端开发框架的设计与实现[D].济南：山东大学，2020.

【通联编辑：光文玲】