梁文婧，張宏海，張蕾蕾，王妍

1.中國(guó)科學(xué)院計(jì)算機(jī)網(wǎng)絡(luò)信息中心，北京 100083

2.中國(guó)科學(xué)院大學(xué)，北京 100049

引 言

中國(guó)科技云是中國(guó)第一個(gè)基于云計(jì)算的服務(wù)于中國(guó)科研工作人員的云平臺(tái)，依托于中國(guó)科學(xué)院強(qiáng)大的基礎(chǔ)設(shè)施，整合各個(gè)學(xué)科的優(yōu)質(zhì)資源，為科研工作者提供特色化的服務(wù)，促進(jìn)我國(guó)科研方式的轉(zhuǎn)變，助力重大科技成果的產(chǎn)出和國(guó)家科技創(chuàng)新能力的提升[1-2]。到目前為止，中國(guó)科技云門戶已經(jīng)匯聚了包括計(jì)算服務(wù)、存儲(chǔ)服務(wù)、網(wǎng)絡(luò)服務(wù)在內(nèi)的120多項(xiàng)資源服務(wù)，共涵蓋超過(guò)11 個(gè)學(xué)科，共享計(jì)算能力已經(jīng)達(dá)到200 PFLops，共享在線存儲(chǔ)能力已達(dá)到30PB，累計(jì)用戶訪問(wèn)量已超過(guò)10 萬(wàn)。由于中國(guó)科技云門戶面向的用戶群體主要是廣大科研工作人員，涉及大量與科學(xué)計(jì)算相關(guān)的活動(dòng)，對(duì)服務(wù)的實(shí)時(shí)性和準(zhǔn)確性要求較高，為保證計(jì)算任務(wù)的高效、正確執(zhí)行，必須提供可靠的后臺(tái)管理系統(tǒng)對(duì)門戶進(jìn)行實(shí)時(shí)監(jiān)控，保證服務(wù)質(zhì)量[3-7]。此外，由于中國(guó)科技云涵蓋的業(yè)務(wù)種類多、規(guī)模大，而且是一個(gè)長(zhǎng)期演進(jìn)的項(xiàng)目，所以中國(guó)科技云門戶管理系統(tǒng)設(shè)計(jì)時(shí)必須考慮到系統(tǒng)升級(jí)、維護(hù)的易操作性，前后端分離的開(kāi)發(fā)模式能很好地滿足系統(tǒng)后期的新需求，因此該系統(tǒng)開(kāi)發(fā)選擇MVVM 模式實(shí)現(xiàn)前后端分離。MVVM 模式下代碼結(jié)構(gòu)清晰，便于后期升級(jí)、維護(hù)，MVVM 模式解除了View（視圖）和ViewModel（視圖模型）之間的緊耦合，使開(kāi)發(fā)人員可以專注自己的開(kāi)發(fā)內(nèi)容，分工協(xié)作，有利于創(chuàng)建靈活、友好的系統(tǒng)，能較好地適應(yīng)后臺(tái)管理系統(tǒng)的需求[8]。開(kāi)發(fā)一款基于MVVM 模式的管理系統(tǒng)既可以為管理人員提供操作簡(jiǎn)單、可視化的界面，又可以提高開(kāi)發(fā)效率，方便后期系統(tǒng)升級(jí)與功能拓展。

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

1.1 系統(tǒng)總體設(shè)計(jì)

中國(guó)科技云門戶管理系統(tǒng)復(fù)雜度較高，為了使開(kāi)發(fā)的系統(tǒng)有穩(wěn)健性、易用性、可維護(hù)性等特點(diǎn)，在著手開(kāi)發(fā)軟件之前，對(duì)其進(jìn)行了全方位的詳細(xì)設(shè)計(jì)。中國(guó)科技云門戶管理系統(tǒng)最終目標(biāo)是實(shí)現(xiàn)一個(gè)完全由前端控制頁(yè)面展示內(nèi)容和路由切換的單頁(yè)面應(yīng)用，后端可以視作數(shù)據(jù)源，依據(jù)前端需求通過(guò)相應(yīng)接口提供服務(wù)。因此，中國(guó)科技云門戶管理系統(tǒng)的設(shè)計(jì)采用前后端分離模式，前端采用MVVM 架構(gòu)，結(jié)合Vue 框架實(shí)現(xiàn)視圖層和數(shù)據(jù)解耦合，通過(guò)路由切換實(shí)現(xiàn)展示界面的更改，可以做到客戶端局部刷新，減小服務(wù)端的壓力，通過(guò)組件實(shí)現(xiàn)各模塊獨(dú)立開(kāi)發(fā)，同時(shí)通過(guò)組件的復(fù)用降低代碼量。如圖1所示，頁(yè)面是由多個(gè)組件依據(jù)樹(shù)狀結(jié)構(gòu)組織成組件樹(shù)實(shí)現(xiàn)的。

圖1 頁(yè)面的樹(shù)形結(jié)構(gòu)抽象圖Fig.1 Tree structure abstract graph of page

每個(gè)組件又涵蓋View、Model（模型）、View-Model 三部分。View 層負(fù)責(zé)界面設(shè)計(jì)，ViewModel層負(fù)責(zé)數(shù)據(jù)調(diào)配，數(shù)據(jù)加工交給Model 處理，并通過(guò)通知機(jī)制讓View 及時(shí)響應(yīng)Viewmodel 的變化。開(kāi)發(fā)過(guò)程中，UI 部分的表單、彈窗、抽屜、面包屑等基礎(chǔ)組件從Element-UI 組件庫(kù)中選擇。

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

中國(guó)科技云門戶管理系統(tǒng)包含權(quán)限管理、系統(tǒng)設(shè)置、內(nèi)容管理、服務(wù)管理、資源訪問(wèn)與統(tǒng)計(jì)、服務(wù)監(jiān)控六個(gè)模塊，系統(tǒng)各模塊的設(shè)計(jì)如圖2。

圖2 系統(tǒng)模塊設(shè)計(jì)Fig.2 Design of system module

權(quán)限管理包含用戶管理、單位管理、角色管理以及客戶管理四部分。用戶管理針對(duì)的是具有后臺(tái)管理權(quán)限的用戶，支持修改用戶個(gè)人信息，支持檢索用戶；單位管理可以依據(jù)用戶所屬單位，為其提供精細(xì)化的服務(wù)，支持修改單位信息以及新增、刪除單位等操作；角色管理模塊支持管理人員對(duì)不同角色分配相應(yīng)權(quán)限，支持后期修改，靈活高效；客戶管理針對(duì)客戶群體，通過(guò)客戶管理模塊能夠查看客戶狀態(tài)、客戶類型，支持查詢和修改功能。

系統(tǒng)設(shè)置模塊包含菜單管理和文件上傳兩部分。在菜單管理中可以修改菜單展示內(nèi)容、菜單圖標(biāo)以及菜單排列順序；文件上傳模塊支持文件拖拽上傳，允許管理人員配置云存儲(chǔ)類型。

內(nèi)容管理模塊主要是針對(duì)展示內(nèi)容的管理，包含首頁(yè)廣告管理和內(nèi)容管理。在首頁(yè)廣告管理中可以及時(shí)查看廣告狀態(tài)，依據(jù)當(dāng)下熱點(diǎn)及時(shí)增加、修改廣告展示內(nèi)容；內(nèi)容管理可以查看不同撰稿人狀態(tài)，管理人員可以審核稿件內(nèi)容，并決定是否展示以及展示位置。

服務(wù)管理模塊包含服務(wù)注冊(cè)管理、服務(wù)審核管理以及服務(wù)評(píng)價(jià)。服務(wù)注冊(cè)管理模塊可以查看服務(wù)狀態(tài)、服務(wù)所屬服務(wù)商、服務(wù)銷量等信息；服務(wù)審核模塊支持修改服務(wù)的具體信息并決定服務(wù)是否可以上架，支持檢索；服務(wù)評(píng)價(jià)模塊可以看到不同服務(wù)獲得的用戶評(píng)價(jià)，可以針對(duì)用戶疑問(wèn)進(jìn)行答復(fù)。

資源訪問(wèn)與統(tǒng)計(jì)模塊包括概述和資源與訪問(wèn)兩個(gè)部分。在概述中展示了不同類型資源的統(tǒng)計(jì)信息以及不同服務(wù)的用戶數(shù)量等，這一部分是總體數(shù)據(jù)，方便大致了解各種資源占用情況；資源與訪問(wèn)模塊是針對(duì)具體服務(wù)的詳細(xì)展示，管理人員可以選擇想要查看的資源名稱，界面會(huì)展示具體資源的占用情況以及客戶訪問(wèn)情況等，同時(shí)會(huì)針對(duì)所選服務(wù)生成具體的細(xì)化表格。

服務(wù)監(jiān)控模塊包括概覽、服務(wù)可用性、服務(wù)實(shí)時(shí)狀態(tài)三個(gè)部分。概覽中可以選擇時(shí)間區(qū)間，頁(yè)面依據(jù)所選區(qū)間展示服務(wù)的統(tǒng)計(jì)信息；服務(wù)可用性模塊通過(guò)不同顏色區(qū)分不同服務(wù)的可用情況，管理人員可以依據(jù)服務(wù)占用情況及時(shí)優(yōu)化調(diào)整；服務(wù)實(shí)時(shí)狀態(tài)模塊展示的是不同服務(wù)當(dāng)前的運(yùn)行情況，在服務(wù)異常時(shí)及時(shí)告警。

2 關(guān)鍵技術(shù)

2.1 數(shù)據(jù)雙向綁定

中國(guó)科技云門戶管理系統(tǒng)是一個(gè)實(shí)時(shí)性要求很高的系統(tǒng)，數(shù)據(jù)雙向綁定是視圖層和數(shù)據(jù)層實(shí)現(xiàn)實(shí)時(shí)交互的關(guān)鍵。在本平臺(tái)開(kāi)發(fā)中通過(guò)Vue 框架和MVVM 模式實(shí)現(xiàn)數(shù)據(jù)雙向綁定。如圖3所示，MVVM 模型中的Model 不關(guān)注任何的用戶行為，由View 層直接與用戶進(jìn)行交互，ViewModel層是MVVM 模式的核心，通過(guò)ViewModel 實(shí)現(xiàn)了MVVM 模式高內(nèi)聚低耦合的目標(biāo)，ViewModel 從Model 中暴露或者轉(zhuǎn)化數(shù)據(jù)對(duì)象給View 層使用，同時(shí)ViewModel 向View 層提供處理用戶交互的方法，Model 層當(dāng)數(shù)據(jù)變動(dòng)時(shí)通知ViewModel 去更新視圖，保持?jǐn)?shù)據(jù)有效性和一致性[9-11]。

圖3 MVVM 模式原理圖Fig.3 MVVM mode schematic diagram

2.2 頁(yè)面渲染與更新

中國(guó)科技云門戶管理系統(tǒng)是多模塊的，在不同展示界面切換、當(dāng)前界面數(shù)據(jù)或圖像更新時(shí)會(huì)重新渲染頁(yè)面或部分更新頁(yè)面。由于頁(yè)面中元素與DOM(Document Object Model) 樹(shù)中節(jié)點(diǎn)數(shù)一一對(duì)應(yīng)，頁(yè)面進(jìn)行渲染或更新時(shí)，其實(shí)是DOM 節(jié)點(diǎn)進(jìn)行更新。如果采用真實(shí)DOM 節(jié)點(diǎn)，則多個(gè)節(jié)點(diǎn)更新就需要多次操作，會(huì)浪費(fèi)很多資源，降低性能。虛擬DOM 將更新都先保存到一個(gè)本地對(duì)象中，最后一次性反映在DOM 樹(shù)上，避免大量的無(wú)謂計(jì)算。

在本平臺(tái)中用Diff算法實(shí)現(xiàn)更新。Diff算法的核心是只更新修改了的那一部分DOM 結(jié)構(gòu)，而不去更新整個(gè)DOM，這樣可以降低開(kāi)銷，提升性能[12]。Diff算法依據(jù)真實(shí)DOM 樹(shù)生成虛擬DOM 樹(shù)，當(dāng)虛擬DOM 樹(shù)的某個(gè)節(jié)點(diǎn)數(shù)據(jù)發(fā)生改變時(shí)生成新的虛擬節(jié)點(diǎn)，虛擬節(jié)點(diǎn)和舊的DOM 節(jié)點(diǎn)比較后再?zèng)Q定是否據(jù)此修改DOM 結(jié)構(gòu)，如圖4所示，Diff新舊節(jié)點(diǎn)的比較只在同一層中進(jìn)行，不會(huì)有跨層間的比較[13]。

圖4 Diff 算法Fig.4 Diff algorithm

2.3 路由切換

中國(guó)科技云門戶管理是一個(gè)單頁(yè)面應(yīng)用，單頁(yè)面路由的切換由前端操作，通過(guò)判斷頁(yè)面所屬的組件，把之前的組件清除掉，避免每一次都需要請(qǐng)求HTML(HyperText Markup Language)文件。前端路由切換工作由vue-router 負(fù)責(zé)，本平臺(tái)使用的是Hash模式，使用URL(Uniform Resource Locator)的Hash模擬完整的URL，當(dāng)URL 改變時(shí)頁(yè)面不會(huì)重新加載，通過(guò)window.location.hash 屬性能夠讀取錨點(diǎn)位置，可以為Hash 的改變添加監(jiān)聽(tīng)事件，每一次改變Hash，都會(huì)在瀏覽器的訪問(wèn)歷史中增加一個(gè)記錄，此外Hash 雖然出現(xiàn)在URL 中，但不會(huì)被包括在HTTP（Hyper Text Transfer Protocol）請(qǐng)求中，因此改變Hash 不會(huì)重新加載頁(yè)面，而是利用JavaScript動(dòng)態(tài)的變換HTML。

3 系統(tǒng)實(shí)現(xiàn)

3.1 可復(fù)用組件的封裝

組件是可復(fù)用的實(shí)例，通過(guò)組件實(shí)現(xiàn)父子組件之間的通信，子組件觸發(fā)父組件的事件并且傳遞給父組件需要的參數(shù)，子組件接受并使用父組件的數(shù)據(jù)，一個(gè)父組件可以被多個(gè)子組件調(diào)用。依據(jù)組件可復(fù)用的特性，在開(kāi)發(fā)過(guò)程中針對(duì)一些實(shí)例被不同的界面復(fù)用的情況，可以通過(guò)自定義組件的使用減少重復(fù)代碼[14-15]。中國(guó)科技云門戶管理系統(tǒng)開(kāi)發(fā)中有多個(gè)可復(fù)用組件，如圖表格式、導(dǎo)航欄、分頁(yè)等，這里以分頁(yè)功能的實(shí)現(xiàn)為例。

網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，如果不進(jìn)行分頁(yè)，想要展示全部數(shù)據(jù)就只能通過(guò)無(wú)限滾動(dòng)的形式，從而大量的內(nèi)容被加載到內(nèi)存中，直接影響網(wǎng)頁(yè)性能，同時(shí)用戶在瀏覽時(shí)如果想回看某一條信息，將會(huì)進(jìn)行重復(fù)滾動(dòng)，且不易被查找和搜索，無(wú)法跳過(guò)不需要的信息，影響用戶體驗(yàn)。分頁(yè)功能很好的賦予用戶指揮權(quán)，用戶可以選擇每一頁(yè)展示的條目數(shù)，可以選擇具體的頁(yè)數(shù)，也能快速回到開(kāi)始頁(yè)和結(jié)束頁(yè)。分頁(yè)的實(shí)質(zhì)是實(shí)現(xiàn)對(duì)異步處理請(qǐng)求數(shù)據(jù)的處理，前端依據(jù)后端返回的信息在具體的頁(yè)面上渲染展示。

分頁(yè)組件主要使用總數(shù)(total)、頁(yè)數(shù)(page)、當(dāng)前頁(yè)數(shù)(currentPagelimit)、頁(yè)面條數(shù)(pageSizes)幾個(gè)參數(shù)，其中total、page、pageSizes 通過(guò)prop 傳遞，CurrentPage 和pageSize 通過(guò)computed 監(jiān)控，具體的復(fù)用操作在methods 中完成。其中prop 在父子 prop 之間形成了一個(gè)單向下行綁定：父級(jí) prop的更新會(huì)向下流動(dòng)到子組件中，子組件的更新不能改變父組件的狀態(tài)，額外的，每次父級(jí)組件發(fā)生變更時(shí)，子組件中所有的 prop 都將會(huì)刷新為最新的值。Computed 中的變量不在data 中聲明，直接在computed 中定義，可以讀取和設(shè)值，體現(xiàn)在編程中是get 和set 的過(guò)程，computed 基于響應(yīng)式的依賴進(jìn)行緩存，通過(guò)監(jiān)聽(tīng)數(shù)據(jù)當(dāng)數(shù)據(jù)發(fā)生改變時(shí)調(diào)用，本身接受新值和舊值兩個(gè)參數(shù)，通過(guò)computed 使用可以避免大量函數(shù)的重讀執(zhí)行，只有環(huán)境改變才會(huì)調(diào)用，既實(shí)現(xiàn)了數(shù)據(jù)雙向綁定，可以及時(shí)更新頁(yè)面數(shù)據(jù)也避免了大量重復(fù)執(zhí)行降低性能[16]。方法methods中通過(guò)$emit 觸發(fā)父組件的自定義事件，實(shí)現(xiàn)子組件向父組件的傳值，通過(guò)具體代碼實(shí)現(xiàn)父子組件之間頁(yè)數(shù)、頁(yè)碼、當(dāng)前頁(yè)等信息的傳遞，實(shí)現(xiàn)分頁(yè)效果。

3.2 數(shù)據(jù)可視化

在中國(guó)科技云門戶管理系統(tǒng)中，CPU 使用情況、服務(wù)運(yùn)行情況等信息通過(guò)數(shù)據(jù)可視化的形式可以更加直觀形象。在開(kāi)發(fā)中，使用Echarts 實(shí)現(xiàn)可視化的過(guò)程。Echarts 是使用JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，提供折線圖、柱狀圖、散點(diǎn)圖、盒形圖、漏斗圖等數(shù)據(jù)可視化圖表，交互豐富，可實(shí)現(xiàn)高度個(gè)性化定制[17-18]。通過(guò)Echarts 的使用，用圖像展示數(shù)據(jù)變化情況以及服務(wù)信息，直觀展現(xiàn)CPU、內(nèi)存等的使用情況，將用戶從繁瑣的表格中解放出來(lái)，通過(guò)動(dòng)態(tài)的圖形展示幫助用戶更好地了解設(shè)備情況，監(jiān)控指標(biāo)出現(xiàn)異常時(shí)，系統(tǒng)及時(shí)報(bào)警并在圖像中展示，相關(guān)人員可以第一時(shí)間觀測(cè)到。

在本系統(tǒng)中，基于Vue 組件化的思想，Echarts圖表以組件的形式被不同界面引用，支持不同界面依據(jù)需求更改圖像的部分內(nèi)容，包括圖像數(shù)據(jù)集的來(lái)源、圖像的展示大小、圖像顏色等內(nèi)容。Echarts 圖表在相應(yīng)界面中命名，通過(guò)該名稱在別的組件中調(diào)用。例如資源占用情況圖在主界面中通過(guò)typeClass 向圖表傳遞界面需要的圖像類型是柱形圖還是折線圖，圖表組件依據(jù)接收到的參數(shù)展示需要的圖表格式。數(shù)據(jù)展示在圖形區(qū)域能直觀看到趨勢(shì)，同時(shí)在表格中呈現(xiàn)方便打印匯總。

3.3 性能優(yōu)化

中國(guó)科技云門戶管理系統(tǒng)與一般后臺(tái)管理系統(tǒng)的區(qū)別在于需要更多技術(shù)優(yōu)化系統(tǒng)性能，保障云環(huán)境下關(guān)鍵服務(wù)的正常運(yùn)行以及資源的合理調(diào)配等。

本系統(tǒng)運(yùn)用了分布式技術(shù)、負(fù)載均衡、消息隊(duì)列等實(shí)現(xiàn)性能優(yōu)化[19-20]。具體言之，依靠分布式技術(shù)進(jìn)行大流量處理和關(guān)鍵業(yè)務(wù)保護(hù)；通過(guò)負(fù)載均衡分擔(dān)流量請(qǐng)求；通過(guò)消息隊(duì)列對(duì)請(qǐng)求進(jìn)行排隊(duì)處理，將前端請(qǐng)求峰值削平，增加系統(tǒng)吞吐量。

以消息隊(duì)列帶來(lái)的改進(jìn)為例做詳細(xì)介紹，傳統(tǒng)的進(jìn)程通信模式是客戶端調(diào)用服務(wù)端，服務(wù)器收到調(diào)用會(huì)進(jìn)行響應(yīng)。在中國(guó)科技云門戶管理系統(tǒng)中，如果采用傳統(tǒng)的通信方式無(wú)法解決網(wǎng)絡(luò)情況不好時(shí)可能出現(xiàn)的調(diào)用丟失或可能出現(xiàn)的超時(shí)問(wèn)題。消息隊(duì)列中的消息被持久化到分布式存儲(chǔ)中，避免了單臺(tái)及其存儲(chǔ)消息導(dǎo)致的消息丟失，同時(shí)消息隊(duì)列的引入使得消息發(fā)送者不必等待接收者的響應(yīng)，只有在保證接收者收到時(shí)，消息才會(huì)從隊(duì)列中刪除[21-22]。消息接收者和消息發(fā)送者之間的通信借助消息隊(duì)列實(shí)現(xiàn)了解耦合，同時(shí)使用消息隊(duì)列的業(yè)務(wù)之間不會(huì)互相干擾，避免了某一業(yè)務(wù)占用大量網(wǎng)絡(luò)導(dǎo)致的服務(wù)崩潰現(xiàn)象。

3.4 前后端交互

前后端之間的通信通過(guò)接口進(jìn)行，中國(guó)科技云門戶管理系統(tǒng)中采用了當(dāng)前流行的RESTful 統(tǒng)一了接口格式，以Axios 作為前后端交互時(shí)的HTTP 請(qǐng)求發(fā)送工具。表1中展示了客戶管理模塊的接口，其他模塊接口大同小異，不再一一闡述。

表1 客戶管理模塊接口Table 1 Interface of client management module

RESTful 有以下3 個(gè)特點(diǎn)：資源、統(tǒng)一接口、URI 和無(wú)狀態(tài)[23-24]。

（1）資源：RESTful 將所有內(nèi)容都視為資源，資源是以json 為主要載體的、面向用戶的一組數(shù)據(jù)集。

（2）統(tǒng)一接口：RESTful 架構(gòu)風(fēng)格規(guī)定，數(shù)據(jù)的增刪查改操作，分別對(duì)應(yīng)于HTTP 方法。GET 用來(lái)獲取資源，POST 用來(lái)新建資源（也可以用于更新資源），PUT 用來(lái)更新資源，DELETE 用來(lái)刪除資源，這樣就統(tǒng)一了數(shù)據(jù)操作的接口，僅通過(guò)HTTP 方法，就可以完成對(duì)數(shù)據(jù)的所有增刪查改工作。

（3）URI(Uniform Resource Identifier)和無(wú)狀態(tài)：每個(gè)URI 都對(duì)應(yīng)一個(gè)特定的資源。要獲取這個(gè)資源，訪問(wèn)它的URI 就可以，所有的資源，都可以通過(guò)URI 定位，而且這個(gè)定位與其他資源無(wú)關(guān)，也不會(huì)因?yàn)槠渌Y源的變化而改變。

RESTful 無(wú)狀態(tài)的特點(diǎn)使得請(qǐng)求可以用任何一個(gè)服務(wù)器回答，非常適合云環(huán)境，資源以json 格式為載體使得前后端分離的情況下進(jìn)一步減少了通信消耗的流量，防止了CSRF(Cross-site request forgery)、注入型等安全問(wèn)題。

4 效果展示

中國(guó)科技云門戶管理系統(tǒng)實(shí)現(xiàn)了權(quán)限管理、內(nèi)容管理、服務(wù)管理、資源訪問(wèn)與統(tǒng)計(jì)、系統(tǒng)管理以及服務(wù)監(jiān)控功能，通過(guò)實(shí)際應(yīng)用表明中國(guó)科技云門戶管理系統(tǒng)能夠滿足當(dāng)前需求，下面選取一部分界面進(jìn)行展示。

圖5是服務(wù)監(jiān)控中服務(wù)可用性模塊的界面圖，依據(jù)選擇的時(shí)間區(qū)間展示所選時(shí)間范圍內(nèi)具體服務(wù)的可用情況，通過(guò)顏色展示不同狀態(tài)，直觀、一目了然，圖中綠色表明各服務(wù)可用情況都處于良好狀態(tài)，不存在服務(wù)緊張的問(wèn)題。

圖5 服務(wù)可用性Fig.5 Service availability

圖6是資源訪問(wèn)與統(tǒng)計(jì)模塊中概覽部分的界面圖，從圖中可以直觀觀測(cè)到當(dāng)前節(jié)點(diǎn)總數(shù)為6 636、CPU 總核數(shù)24 528、總內(nèi)存消耗19%、總存儲(chǔ)消耗量為19.05%，以及當(dāng)前的資源分布情況、地區(qū)資源、集群資源等信息。

圖6 資源監(jiān)控概覽Fig.6 Resource monitoring overview

圖7是資源訪問(wèn)與統(tǒng)計(jì)模塊中資源與訪問(wèn)部分的界面圖，可以查看各資源詳細(xì)情況，依據(jù)所選擇的資源展示與之相關(guān)的信息，包括系統(tǒng)占比、用戶占比、中斷情況、CPU 等信息，更為精細(xì)和直觀。

圖7 資源監(jiān)控詳情Fig.7 Resource monitoring details

5 結(jié)語(yǔ)

本文所設(shè)計(jì)實(shí)現(xiàn)的基于MVVM 模式的中國(guó)科技云門戶管理系統(tǒng)是一個(gè)多功能、可擴(kuò)展、數(shù)據(jù)展示形式多樣的系統(tǒng)。具有以下優(yōu)勢(shì)：

（1）平臺(tái)關(guān)注用戶使用體驗(yàn)，例如在菜單管理界面中對(duì)菜單進(jìn)行隱藏與展示，點(diǎn)擊主菜單后展開(kāi)相應(yīng)的子菜單；通過(guò)v-if、v-show 等指令實(shí)現(xiàn)抽屜效果；通過(guò)顏色不同展示不同狀態(tài)，有助于管理人員快速發(fā)現(xiàn)異常，界面簡(jiǎn)單整潔，功能較為齊全。

（2）系統(tǒng)展示信息的方式具有多樣性。通過(guò)數(shù)據(jù)可視化形象直觀地展示數(shù)據(jù)變化趨勢(shì)以及軟硬件資源的使用情況，通過(guò)表格實(shí)現(xiàn)信息統(tǒng)計(jì)，方便下載后作為紙質(zhì)材料保存，通過(guò)文檔形式方便上傳或下載已有資源，操作簡(jiǎn)便。

（3）系統(tǒng)具有較好的擴(kuò)展性。采用前后端分離開(kāi)發(fā)，一方面加快了開(kāi)發(fā)速度，另一方面方便后期擴(kuò)展功能，前后端只要約定好新的接口內(nèi)容即可各自進(jìn)行開(kāi)發(fā)。

綜上，本平臺(tái)能夠較好地滿足當(dāng)前的需求，后期將依托中國(guó)科技云微服務(wù)架構(gòu)，對(duì)現(xiàn)有的微服務(wù)進(jìn)行評(píng)估，依據(jù)現(xiàn)實(shí)需要增加模塊；也可隨著系統(tǒng)更新、升級(jí)過(guò)程中產(chǎn)生的新的基礎(chǔ)微服務(wù)對(duì)中國(guó)科技云門戶管理系統(tǒng)進(jìn)行擴(kuò)充。如針對(duì)訂單管理服務(wù)可以新增訂單管理模塊；針對(duì)支付服務(wù)新增支付管理模塊；接入中國(guó)科技云通行證；利用收集到的數(shù)據(jù)進(jìn)行用戶行為分析，對(duì)不同用戶群體提供不同的資源推薦等。通過(guò)后期的工作，進(jìn)一步改進(jìn)和豐富系統(tǒng)，努力為中國(guó)科技云用戶提供更好的服務(wù)。

利益沖突聲明

所有作者聲明不存在利益沖突關(guān)系。