摘要：学校的数据结构编程教学平台是一个集教学、练习、考试于一体的平台，为了保证平台能够持续高效稳定的运行，以及在平台发生异常时能够快速定位并高效解决问题，所以需要给数据结构平台做一个监控系统，方便管理人员实时监控服务器的运行状况，有效避免异常事件的发生。该系统主要功能是抓取服务器的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