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

软件技术本栏目责任编辑：谢媛媛Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月)基于Vue.js的科研管理系统实现策略研究程萍（巴音郭楞职业技术学院，新疆 库尔勒841000）摘要：随着大数据时代的到来，以及“互联网+”的发展，信息化管理已经成为各行业不可或缺的管理模式，科研是高校“软实力”建设的重点组成部分，科研水平的提高伴随着学院的成长，越来越多的老师参与到科研工作中，科研成果也随之增加，管理难度也日益凸显。部分高校科研管理工作仍然停留在传统模式，在管理过程中出现大量不易管理的纸质文件，数据收集和统计时常会出现漏登、错登、统计不完善的情况。学院科研管理实现信息化改革迫在眉睫，因此，文章的研究会促进高校科研管理系统的信息化发展。该研究运用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)人员管理：对全院教师的基本信息进行批量导入、人员信息异动修改，能够根据参与科研工作的不同身份进行不同的操作，比如普通教师只能填写自己的科研成果相关信息及佐证材料，二级院系科研管理人员进行统计，科研处工作人员进行审核；对于课程申报普通教师能够填写申报书、提交、打印，二级院系审核通过提交给科研处审核，科研处核审核通过后按照课题申报流程完成课题从申报到结题的整个过程。同时，能够对参与科研评审人员的进行专家身份指收稿日期：2022-08-30作者简介：程萍（1981），女，河南泌阳人，硕士，讲师，主要研究方向为电子信息工程等。E-mail：http：/Tel：+86-551-65690963 65690964ISSN 1009-3044Computer Knowledge and Technology电脑知识与技术Vol.19,No.6，February202331DOI:10.14004/ki.ckt.2023.0311本栏目责任编辑：谢媛媛软件技术Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月)定，专家具有审核评定课题的权利，并将意见建议提交。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所示。图1 系统总体结构图3.2 功能模块的设计本系统的设计目标为界面简约大方，操作灵活方便，不受时间、地点、设备限制，此系统为开放平台，根据用户需求将系统主要功能划分为6大核心模块，核心模块功能设计如下：1）人员及部门管理模块设计。该模块涉及三个角色科研处处长、科研处干事、二级院负责人，科研处处长进行用户权限分配，指派专家评委；科研处干事进行人员及本部门信息的维护，批量数据后台导入，科研处干事主要负责人员信息的异动；二级院负责人主要是查看本部门人员信息如有错误或者密码遗忘等问题协调解决。2）科研成果管理模块设计。该模块包括论文管理模块、著作管理模块、知识产权管理模块、课题管理模块，主要实现各类科研成果的信息审核、存储功能。各部门教师将自己发表的论文、著作、知识产权、研究课题的相关信息及佐证材料上传系统，先由二级院负责人进行资料信息清晰完整度进行审核，审核合格后提交科研处，科研处再次审核信息是否有效并对科研成果等级进行评定。审核、评定后信息自动存储数据库5。3）院级课题管理模块设计。该模块包括三大模块计划管理、自科类课题申报模块、社科类课题申报模块。科研处可以通过计划管理模块转发各类课题相关计划文件。课题申报人员根据申报课题类别填写相应的课题申报书，填写完成后提交各部门审核，具体申报审核流程如图2所示。该模块支持申报书的导入、导出功能，使用导入功能，需下载文件模板，所导入文件写入模板中即可上传。图2 院级课题立项审核流程图（下转第50页）32本栏目责任编辑：谢媛媛软件技术Computer Knowledge and Technology电脑知识与技术第19卷第6期(2023年2月)第19卷第6期(2023年2月)参考文献：2 Naik A,Satapathy S C,Ashour A S,et al.Social group optimization for global optimization of multimodal functions and dataclustering problemsJ.Neural Computing and Applications,2018,30(1):271-287.1 Satapathy S,Naik A.Social group optimization(SGO):a newpopulation evolutionary optimization techniqueJ.Complex&Intelligent Systems,2016,2(3):173-203.2 Naik A,Satapathy S C,Ashour A S,et al.Social group optimization for global optimization of multimodal functions and dataclustering problemsJ.Neural Computing and Applications,2018,30(1):271-287.3 刘亚军,陈得宝,邹锋,等.基于多子群的社会群体优化算法J.计算机应用研究,2019,36(5):80-85.4 Fang J K,Zheng H B,Liu J F,et al.A transformer fault diagnosis model using an optimal hybrid dissolved gas analysis features subset with improved social group optimization-supportvector machine classifierJ.Energies,2018,11(8):1922.5 Minh-Tu.Optimisation of stiffeners for maximum fundamentalfrequency of cross-ply laminated cylindrical panels using so