摘要：學校的數據結構編程教學平臺是一個集教學、練習、考試于一體的平臺，為了保證平臺能夠持續高效穩定的運行，以及在平臺發生異常時能夠快速定位并高效解決問題，所以需要給數據結構平臺做一個監控系統，方便管理人員實時監控服務器的運行狀況，有效避免異常事件的發生。該系統主要功能是抓取服務器的CPU、Redis、Nginx、Mysql、內存、緩存等相關數據，并對數據進行可視化處理，方便管理人員及時查看服務器的運行狀態，并在發生異常時進行高效地處理。同時，還提供了相關的自定義配置給用戶，豐富了用戶體驗。

在線編程教學平臺監控系統采用前后端分離的系統架構，該監控系統的前端部分是一個大型的SPA單頁應用，使用了多種主流技術和組件化、模塊化的設計方案，系統具有良好的的靈活性和可擴展性。該監控系統的前端部分采用Facebook的開源框架React，使用ES6編寫代碼，數據渲染部分采用百度的ECharts圖表庫對數據進行可視化展示，頁面布局和UI設計使用了螞蟻金服的Ant Design開源框架，采用Webpack對該監控系統進行打包編譯。系統前端部分主要包括以下幾個模塊：登錄模塊、自定義配置模塊、數據請求再處理模塊、監控數據可視化模塊和異常處理模塊等。

關鍵詞：監控系統；SPA單頁應用；React；ECharts

目錄

摘要

Abstract

1 緒論-1

1.1 課題背景及意義-1

1.2 課題主要內容和論文組織結構-2

2 相關理論和技術概述-3

2.1 服務器監控系統簡介-3

2.2 相關技術概述-3

2.2.1 JavaScript(ES6)-3

2.2.2 React前端框架-4

2.2.3 ECharts可視化圖表庫-4

2.2.4 Ant Design UI框架-4

3 系統需求分析-5

3.1 功能性需求分析-5

3.2 非功能性需求分析-6

4 系統設計與實現-7

4.1 系統總體功能結構設計-7

4.2 系統詳細設計與實現-10

4.2.1 登錄驗證模塊-10

4.2.2 系統界面的實現-12

4.2.3 異常處理模塊-14

4.2.4 監控項數據可視化模塊-15

5 系統測試-19

5.1 兼容性測試-19

5.2 響應式測試-19

5.3 報警模塊測試-20

結    論-21

參 考 文 獻-22

致    謝-23