程萍

摘要：隨著大數(shù)據(jù)時(shí)代的到來(lái)，以及“互聯(lián)網(wǎng)+”的發(fā)展，信息化管理已經(jīng)成為各行業(yè)不可或缺的管理模式，科研是高?！败泴?shí)力”建設(shè)的重點(diǎn)組成部分，科研水平的提高伴隨著學(xué)院的成長(zhǎng)，越來(lái)越多的老師參與到科研工作中，科研成果也隨之增加，管理難度也日益凸顯。部分高?？蒲泄芾砉ぷ魅匀煌Ａ粼趥鹘y(tǒng)模式，在管理過(guò)程中出現(xiàn)大量不易管理的紙質(zhì)文件，數(shù)據(jù)收集和統(tǒng)計(jì)時(shí)常會(huì)出現(xiàn)漏登、錯(cuò)登、統(tǒng)計(jì)不完善的情況。學(xué)院科研管理實(shí)現(xiàn)信息化改革迫在眉睫，因此，文章的研究會(huì)促進(jìn)高?？蒲泄芾硐到y(tǒng)的信息化發(fā)展。該研究運(yùn)用MVVM開發(fā)模式和新型前端開發(fā)框架Vue.js技術(shù)，研究高校科研信息化管理系統(tǒng)前端部分的開發(fā)策略。

關(guān)鍵詞：Vue.js；科研；管理；策略

中圖分類號(hào)：TP393? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2023）06-0031-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）

從技術(shù)角度上來(lái)看，Web應(yīng)用開發(fā)模式逐漸演變。早期前端與后臺(tái)為密切耦合，這種情況下，導(dǎo)致項(xiàng)目邏輯及展現(xiàn)邏輯出現(xiàn)混雜。之后，MVC模式逐漸延伸，使前后端分工日趨明確，但該模式前端、后端依賴于開發(fā)環(huán)境，導(dǎo)致前后端在開發(fā)過(guò)程中，任務(wù)比較模糊，溝通成本高。隨著移動(dòng)互聯(lián)網(wǎng)發(fā)展，設(shè)備逐漸呈現(xiàn)多元化發(fā)展，包括物聯(lián)網(wǎng)設(shè)備，PC端、手機(jī)端等，給用戶提供良好體驗(yàn)。但同時(shí)也會(huì)給開發(fā)人員帶來(lái)較大的開發(fā)難度，增加人力成本，因此，將前后端分離，且不同終端可使用同一后臺(tái)，這種情況下，僅需開發(fā)不同前端即可實(shí)現(xiàn)，能夠幫助高校降低人力成本和開發(fā)成本，當(dāng)前用戶體驗(yàn)要求相比過(guò)去較高，更加注重前端體驗(yàn)，因此，前后端分離也是系統(tǒng)開發(fā)發(fā)展趨勢(shì)，要求設(shè)計(jì)更加專業(yè)化的前端框架。

1 相關(guān)技術(shù)

第一，Vue.js技術(shù)。Vue.js是輕量級(jí)前端框架，其具有良好的性能和較強(qiáng)靈活性，其采用的是虛擬DOM機(jī)制，具體操作內(nèi)存中對(duì)象運(yùn)行速度較快，待更新后，可將最終js對(duì)象應(yīng)映射為真實(shí)DOM，并交由瀏覽器進(jìn)行繪制，進(jìn)而解決瀏覽器性能問(wèn)題[1-2]。Vue能夠通過(guò)各變量添加多個(gè)setter以及getter，這樣實(shí)現(xiàn)雙向數(shù)據(jù)綁定，能夠簡(jiǎn)化Web前端的開發(fā)流程，幫助研發(fā)者降低開發(fā)難度，提升前端開發(fā)效率，使高校能夠縮短研發(fā)周期和成本。

第二，Vue-router以及vuex。Vue-router是Vue.js所發(fā)布的路由插件，其中Vue.js為深度集成。傳統(tǒng)頁(yè)面運(yùn)用，是采用超鏈接的方式實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)、切換，而Vue-router路由插件單頁(yè)面應(yīng)用過(guò)程中，是通過(guò)路徑之間切換的。而Vue.js實(shí)現(xiàn)無(wú)刷新訪問(wèn)頁(yè)面、改變頁(yè)面，實(shí)現(xiàn)頁(yè)面路徑動(dòng)態(tài)調(diào)整，便于頁(yè)面的切換，不斷提升用戶的體驗(yàn)感。vuex是Vue.js所提出的全局狀態(tài)管理方案。能夠在全球各實(shí)例中放置vuex，使各組件同步響應(yīng)，進(jìn)而減少系統(tǒng)運(yùn)行復(fù)雜性。在管理全局狀態(tài)過(guò)程中，需要區(qū)分組建本地狀態(tài)以及應(yīng)用層級(jí)狀態(tài)，以防組建未來(lái)狀態(tài)，被放置在應(yīng)用及狀態(tài)中進(jìn)行管理[3]。

第三，Axios。Axios是基于promise的HTTP庫(kù)，其能夠用于node.js以及瀏覽器中。Axios可從瀏覽器創(chuàng)建XMLHttpreqests，能夠支持API、攔截響應(yīng)、請(qǐng)求轉(zhuǎn)換，請(qǐng)求數(shù)據(jù)、響應(yīng)數(shù)據(jù)等。在本系統(tǒng)設(shè)計(jì)中，采用Axios以實(shí)現(xiàn)服務(wù)器與客戶端數(shù)據(jù)交換。

第四，云數(shù)據(jù)存儲(chǔ)技術(shù)。該系統(tǒng)數(shù)據(jù)存儲(chǔ)采用租賃第三方數(shù)據(jù)中心方式完成，即云存儲(chǔ)技術(shù)，該技術(shù)將數(shù)據(jù)存儲(chǔ)在云端多個(gè)服務(wù)器上，用戶可方便通過(guò)系統(tǒng)程序接口API訪問(wèn)存儲(chǔ)資源池中的數(shù)據(jù)。使用云存儲(chǔ)技術(shù)不但可以提高系統(tǒng)的安全可靠性，而且實(shí)現(xiàn)了系統(tǒng)數(shù)據(jù)的海量存儲(chǔ)[4]。

2系統(tǒng)分析

針對(duì)學(xué)院目前科研管理的實(shí)際情況，課題組成員分別與科研管理人員、科研處處長(zhǎng)、科研干事進(jìn)行了溝通，了解了在科研工作開展過(guò)程中各個(gè)環(huán)節(jié)的工作流程，根據(jù)用戶對(duì)本科研系統(tǒng)的功能需求。課題組成員對(duì)用戶需求進(jìn)行分析，將用戶需求概括歸納如下：

1）人員管理：對(duì)全院教師的基本信息進(jìn)行批量導(dǎo)入、人員信息異動(dòng)修改，能夠根據(jù)參與科研工作的不同身份進(jìn)行不同的操作，比如普通教師只能填寫自己的科研成果相關(guān)信息及佐證材料，二級(jí)院系科研管理人員進(jìn)行統(tǒng)計(jì)，科研處工作人員進(jìn)行審核；對(duì)于課程申報(bào)普通教師能夠填寫申報(bào)書、提交、打印，二級(jí)院系審核通過(guò)提交給科研處審核，科研處核審核通過(guò)后按照課題申報(bào)流程完成課題從申報(bào)到結(jié)題的整個(gè)過(guò)程。同時(shí)，能夠?qū)⑴c科研評(píng)審人員的進(jìn)行專家身份指定，專家具有審核評(píng)定課題的權(quán)利，并將意見建議提交。

2） 科研成果管理：科研處每年要對(duì)學(xué)院教師申報(bào)的各級(jí)別科研課題進(jìn)行管理，統(tǒng)計(jì)，查詢，能夠?qū)處熑〉玫目蒲谐晒热缫寻l(fā)表論文、專著、知識(shí)產(chǎn)權(quán)（包括發(fā)明專利，實(shí)用新型專利，軟件著作權(quán)）等進(jìn)行相關(guān)信息及佐證材料收集，以此減輕科研管理人員工作量，改變當(dāng)前收集復(fù)印件，再使用電子表格統(tǒng)計(jì)的現(xiàn)狀。同時(shí)，可以清晰掌握教師科研工作開展情況及取得的科研成就。

3）院級(jí)課題管理：需要實(shí)現(xiàn)各類課題的計(jì)劃文件發(fā)放；網(wǎng)上填寫院級(jí)課程申報(bào)書，院級(jí)課題分為兩類：自然科學(xué)類和社會(huì)科學(xué)類，完成院級(jí)課題網(wǎng)上評(píng)審，先二級(jí)學(xué)院內(nèi)部評(píng)審，再由科研處評(píng)審，實(shí)現(xiàn)院級(jí)課題全流程網(wǎng)絡(luò)管理，包含院級(jí)課題從開題課題申報(bào)書填寫、審核、答辯情況、中期報(bào)告、中期答辯情況、結(jié)題報(bào)告填寫、結(jié)題情況等涵蓋一個(gè)院級(jí)課題的整個(gè)周期全部數(shù)據(jù)文件的管理。

4）統(tǒng)計(jì)報(bào)表：科研處能夠根據(jù)實(shí)際需求查詢統(tǒng)計(jì)全院相關(guān)科研成果信息，比如按部門查詢，按年查詢，按成果類型查詢等，多條件查詢統(tǒng)計(jì)。二級(jí)院系根據(jù)需求查詢統(tǒng)計(jì)本部門的相關(guān)科研信息，并能夠生成相應(yīng)報(bào)表。

5）公告：科研管理人員能夠通過(guò)系統(tǒng)發(fā)布公告、修改公告、刪除公告，其他人員瀏覽公告。

6）創(chuàng)新創(chuàng)業(yè)管理：創(chuàng)新創(chuàng)業(yè)相關(guān)通知發(fā)布，網(wǎng)上申報(bào)資料上報(bào)，獲獎(jiǎng)情況統(tǒng)計(jì)。

從開發(fā)平臺(tái)非功能性需求來(lái)看，為保證前端框架用戶具有良好的體驗(yàn)感，需考慮以下非功能性需求：第一，兼容性需求。在前端開發(fā)過(guò)程中，經(jīng)常會(huì)存在兼容性問(wèn)題，尤其是瀏覽器兼容性。不同瀏覽器兼容性和相同瀏覽器不同版本兼容性是目前前端開發(fā)框架急需解決的問(wèn)題。第二，性能需求。為能夠提升系統(tǒng)前端系統(tǒng)，為用戶提供良好的體驗(yàn)感，需對(duì)前端代碼進(jìn)行優(yōu)化，以減少HTTP請(qǐng)求次數(shù)及頻率，由瀏覽器頁(yè)面向服務(wù)器發(fā)送HTTP請(qǐng)求過(guò)程中，會(huì)消耗大量時(shí)間，尤其在處于網(wǎng)絡(luò)狀態(tài)不佳的情況下，問(wèn)題較為突出，請(qǐng)求耗時(shí)是與網(wǎng)頁(yè)資源加載情況相關(guān)，因此，在本研究中可運(yùn)用Vue.js框架，能夠避免DOM這一操作問(wèn)題。

3系統(tǒng)設(shè)計(jì)

3.1系統(tǒng)結(jié)構(gòu)設(shè)計(jì)

結(jié)合用戶需求、專家意見，對(duì)該系統(tǒng)功能進(jìn)行了詳細(xì)分析，通過(guò)分析將科研管理系統(tǒng)按功能劃分為8個(gè)模塊：1）人員及部門管理；2）科研成果管理；3）院級(jí)課題管理；4）統(tǒng)計(jì)報(bào)表管理；5）成果轉(zhuǎn)換管理；6）公告管理；7）創(chuàng)新創(chuàng)業(yè)管理；8）報(bào)獎(jiǎng)管理。根據(jù)用戶需求和行業(yè)技術(shù)發(fā)展現(xiàn)狀制定科研管理系統(tǒng)設(shè)計(jì)實(shí)現(xiàn)方案和技術(shù)路線。該系統(tǒng)為方便用戶隨時(shí)隨地訪問(wèn)，采用多端開發(fā)技術(shù)以實(shí)現(xiàn)PC、平板、手機(jī)均可訪問(wèn)。通過(guò)App、小程序、網(wǎng)頁(yè)途徑訪問(wèn)本科研系統(tǒng)進(jìn)行相關(guān)業(yè)務(wù)操作，提高用戶的使用體驗(yàn)感和系統(tǒng)的交互性。為了保證數(shù)據(jù)源的完整性和安全性本系統(tǒng)采用云存儲(chǔ)技術(shù)。系統(tǒng)總體結(jié)構(gòu)設(shè)計(jì)如圖1所示。

3.2 功能模塊的設(shè)計(jì)

本系統(tǒng)的設(shè)計(jì)目標(biāo)為界面簡(jiǎn)約大方，操作靈活方便，不受時(shí)間、地點(diǎn)、設(shè)備限制，此系統(tǒng)為開放平臺(tái)，根據(jù)用戶需求將系統(tǒng)主要功能劃分為6大核心模塊，核心模塊功能設(shè)計(jì)如下：

1）人員及部門管理模塊設(shè)計(jì)。該模塊涉及三個(gè)角色科研處處長(zhǎng)、科研處干事、二級(jí)院負(fù)責(zé)人，科研處處長(zhǎng)進(jìn)行用戶權(quán)限分配，指派專家評(píng)委；科研處干事進(jìn)行人員及本部門信息的維護(hù)，批量數(shù)據(jù)后臺(tái)導(dǎo)入，科研處干事主要負(fù)責(zé)人員信息的異動(dòng)；二級(jí)院負(fù)責(zé)人主要是查看本部門人員信息如有錯(cuò)誤或者密碼遺忘等問(wèn)題協(xié)調(diào)解決。

2）科研成果管理模塊設(shè)計(jì)。該模塊包括論文管理模塊、著作管理模塊、知識(shí)產(chǎn)權(quán)管理模塊、課題管理模塊，主要實(shí)現(xiàn)各類科研成果的信息審核、存儲(chǔ)功能。各部門教師將自己發(fā)表的論文、著作、知識(shí)產(chǎn)權(quán)、研究課題的相關(guān)信息及佐證材料上傳系統(tǒng)，先由二級(jí)院負(fù)責(zé)人進(jìn)行資料信息清晰完整度進(jìn)行審核，審核合格后提交科研處，科研處再次審核信息是否有效并對(duì)科研成果等級(jí)進(jìn)行評(píng)定。審核、評(píng)定后信息自動(dòng)存儲(chǔ)數(shù)據(jù)庫(kù)[5]。

3）院級(jí)課題管理模塊設(shè)計(jì)。該模塊包括三大模塊計(jì)劃管理、自科類課題申報(bào)模塊、社科類課題申報(bào)模塊?？蒲刑幙梢酝ㄟ^(guò)計(jì)劃管理模塊轉(zhuǎn)發(fā)各類課題相關(guān)計(jì)劃文件。課題申報(bào)人員根據(jù)申報(bào)課題類別填寫相應(yīng)的課題申報(bào)書，填寫完成后提交各部門審核，具體申報(bào)審核流程如圖2所示。該模塊支持申報(bào)書的導(dǎo)入、導(dǎo)出功能，使用導(dǎo)入功能，需下載文件模板，所導(dǎo)入文件寫入模板中即可上傳。

4）報(bào)表及統(tǒng)計(jì)模塊設(shè)計(jì)。該模塊科研處干事及二級(jí)院負(fù)責(zé)人根據(jù)自己的權(quán)限可實(shí)現(xiàn)以下分類查詢功能：分教師查詢，可查詢一名教師的所有科研項(xiàng)目；分年度查詢，可查詢某一年度的某一科研項(xiàng)目的全部成果統(tǒng)計(jì)；分類別查詢，可實(shí)現(xiàn)對(duì)某一類別科研項(xiàng)目的所有成果統(tǒng)計(jì)；組合查詢，可實(shí)現(xiàn)以上類別的組合查詢。用戶可根據(jù)需要設(shè)定字段導(dǎo)出相關(guān)信息。

5）公告管理模塊設(shè)計(jì)，科研干事通過(guò)該模塊完成公告的發(fā)布、刪除、修改等功能，科研處處長(zhǎng)再次模塊中完成公告的審核。其他人員只能瀏覽。

6）創(chuàng)新創(chuàng)業(yè)模塊設(shè)計(jì)，該模塊完成創(chuàng)新創(chuàng)業(yè)相關(guān)通知和獲獎(jiǎng)情況通報(bào)，各類創(chuàng)新創(chuàng)業(yè)成果的上報(bào)管理。

3.3 數(shù)據(jù)庫(kù)設(shè)計(jì)

該科研系統(tǒng)數(shù)據(jù)庫(kù)嚴(yán)格按照數(shù)據(jù)庫(kù)設(shè)計(jì)范式原則設(shè)計(jì)，通過(guò)對(duì)科研系統(tǒng)實(shí)體進(jìn)行分析建立數(shù)據(jù)模型，核心數(shù)據(jù)庫(kù)設(shè)計(jì)如E-R圖所示，根據(jù)需要共設(shè)計(jì)有用戶表、 院級(jí)課題申報(bào)表（自科類申報(bào)表、社科類申報(bào)表）、科研成果（著作表、論文表、知識(shí)產(chǎn)權(quán)表、課題表）等12個(gè)數(shù)據(jù)表。設(shè)計(jì)數(shù)據(jù)庫(kù)時(shí)考慮到相同數(shù)據(jù)不被重復(fù)存儲(chǔ)，減少存儲(chǔ)空間浪費(fèi)，提高系統(tǒng)性能，表與表之間采用主鍵關(guān)聯(lián)，從而減少訪問(wèn)重復(fù)數(shù)據(jù)和無(wú)關(guān)數(shù)據(jù)的概率，提高核心數(shù)據(jù)的訪問(wèn)速度。

4結(jié)束語(yǔ)

本研究闡述前端框架設(shè)計(jì)背景之后，分析當(dāng)前主流前端技術(shù)。對(duì)于高校來(lái)說(shuō)，采用這種開發(fā)技術(shù)，能夠幫助高校提升生產(chǎn)效率，節(jié)約成本。根據(jù)高校系統(tǒng)基本模塊需求，以及工作流程設(shè)計(jì)。該系統(tǒng)采用MVVM開發(fā)模式，利用前后端分離的方式[6]，進(jìn)而實(shí)現(xiàn)前后端結(jié)構(gòu)代碼易于維護(hù)，采用Vue.js作為前端開發(fā)語(yǔ)言，能夠保證系統(tǒng)前端性能，能夠簡(jiǎn)化前端界面風(fēng)格，根據(jù)用戶需求，進(jìn)行組件自定義，用戶無(wú)須在開發(fā)組件上花費(fèi)時(shí)間，能夠提高開發(fā)效率。

參考文獻(xiàn)：

[1] 張培妍.基于Vue.js的智能匹配系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].西安：西安電子科技大學(xué)，2019.

[2] 王志任.基于Vue.js的開發(fā)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[D].廣州：廣東工業(yè)大學(xué)，2018.

[3] 劉金羽.前后端分離的在線考試系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].電腦編程技巧與維護(hù)，2020（4）：44-46.

[4] 馮龍.云存儲(chǔ)技術(shù)在高校信息化服務(wù)中的應(yīng)用與研究[D].天津：天津科技大學(xué)，2013.

[5] 許博.基于.NET三層架構(gòu)的科研管理系統(tǒng)的開發(fā)與應(yīng)用[J].實(shí)驗(yàn)室研究與探索，2013，32（2）：188-190，207.

[6] 徐鵬濤.基于Vue的前端開發(fā)框架的設(shè)計(jì)與實(shí)現(xiàn)[D].濟(jì)南：山東大學(xué)，2020.

【通聯(lián)編輯：光文玲】