一个基于Java后端和Vue3前端的现代化服务器监控系统，支持实时监控多台服务器的状态信息。
以Java为服务端实现的一款前后端分离服务器探针、云监控系统。前端基于cokemine/Hotaru_theme项目拓展，使用WebSocket替代HTTP实现实时通信，采用Vue3、TypeScript、Semantic UI技术栈，新增后台管理页面，可实现节点热添加/删除/编辑。
服务端基于Spring Boot + Netty框架，采用非阻塞式IO方式实现，性能更高效。客户端（采集端）基于cppla/ServerStatus中Python客户端修改实现，无外部依赖。
工作机制：客户端运行在windows或者Linux系统上收集服务器数据，并通过TCP连接push到服务端，服务端整理后通过WebSocket实时推送到前端展示。
- Java 11 - 主要开发语言
- Spring Boot 2.7.0 - 应用框架
- Netty 4.1.86 - 高性能网络通信框架
- WebSocket - 实时数据推送
- FastJSON 2.0.22 - JSON处理
- Hutool 5.8.11 - Java工具库
- Lombok - 代码简化
- Maven - 项目构建管理
- Vue 3.0 - 前端框架
- TypeScript 4.1.3 - 类型安全的JavaScript
- Vue Router 4.0 - 路由管理
- Semantic UI 2.4.1 - UI组件库
- Axios 0.21.1 - HTTP客户端
- WebSocket - 实时数据接收
- Vue CLI 4.5 - 项目构建工具
- Python 3+ - 数据采集脚本
- 无外部依赖 - 纯Python标准库实现
ServerStatus-Mion-main/
├── README.md # 项目说明文档
├── Status-Client/ # 客户端目录
│ └── status_client.py # linux Python数据采集客户端
│ └── status_client_windows.py # windows Python数据采集客户端
├── Status-Server/ # 服务端目录
│ ├── pom.xml # Maven项目配置
│ ├── server_config.json # 服务器配置文件
│ ├── src/main/
│ │ ├── java/com/bubble/status/
│ │ │ ├── StatusApplication.java # Spring Boot启动类
│ │ │ ├── config/ # 配置类
│ │ │ │ ├── CorsConfig.java # 跨域配置
│ │ │ │ ├── SpringContext.java # Spring上下文
│ │ │ │ └── WebServerConfig.java # Web服务配置
│ │ │ ├── controller/ # 控制器层
│ │ │ │ ├── http/AdminController.java # 管理接口控制器
│ │ │ │ └── ws/WebSocketHandler.java # WebSocket处理器
│ │ │ ├── enums/ # 枚举类
│ │ │ │ ├── MessageType.java # 消息类型枚举
│ │ │ │ └── ServerType.java # 服务器类型枚举
│ │ │ ├── exceptions/ # 异常类
│ │ │ ├── handler/ # 网络处理器
│ │ │ │ ├── inbound/ # 入站处理器
│ │ │ │ └── protocol/ # 协议处理器
│ │ │ ├── model/ # 数据模型
│ │ │ ├── runner/ # 启动运行器
│ │ │ │ └── NettyBootstrapRunner.java # Netty服务启动器
│ │ │ ├── service/ # 业务服务层
│ │ │ │ ├── StatusService.java # 状态服务
│ │ │ │ ├── ConfigService.java # 配置服务
│ │ │ │ ├── LoginService.java # 登录服务
│ │ │ │ └── WebStatusService.java # Web状态服务
│ │ │ ├── structure/ # 数据结构
│ │ │ └── utils/ # 工具类
│ │ └── resources/
│ │ ├── application.properties # Spring Boot配置
│ │ └── server_config.json # 服务器节点配置
│ └── target/ # 编译输出目录
│ └── server-status-1.1.1.jar # 可执行JAR包
└── Status-Web/ # 前端目录
├── package.json # npm项目配置
├── tsconfig.json # TypeScript配置
├── vue.config.js # Vue CLI配置
├── babel.config.js # Babel配置
├── .eslintrc # ESLint配置
├── public/ # 静态资源
│ ├── index.html # HTML模板
│ ├── config.js # 前端配置
│ ├── css/ # 样式文件
│ └── favicon.ico # 网站图标
├── src/ # 源代码
│ ├── main.ts # 应用入口
│ ├── App.vue # 主页面组件
│ ├── MyApp.vue # 应用根组件
│ ├── shims-vue.d.ts # Vue类型声明
│ ├── assets/ # 静态资源
│ │ └── img/ # 图片资源
│ └── components/ # Vue组件
│ ├── Admin.vue # 管理后台组件
│ ├── Login.vue # 登录组件
│ ├── CardItem.vue # 卡片项组件
│ ├── ServersCard.vue # 服务器卡片组件
│ ├── ServersTable.vue # 服务器表格组件
│ ├── TableItem.vue # 表格项组件
│ ├── TheHeader.vue # 页头组件
│ ├── TheFooter.vue # 页脚组件
│ ├── TheError.vue # 错误页组件
│ ├── UpdateTime.vue # 更新时间组件
│ ├── useAdmin.ts # 管理功能逻辑
│ └── useStatus.ts # 状态数据逻辑
└── types/ # TypeScript类型定义
├── servers.d.ts # 服务器类型定义
├── config.ts # 配置类型定义
├── login.ts # 登录类型定义
└── shims-vue.d.ts # Vue模块声明
- Java 11+ (推荐JDK 11)
- Node.js 14+ 和 npm 6+
- Python 3+ (客户端)
- Maven 3.6+ (如需重新编译)
- 进入服务端目录：
cd Status-Server- 配置服务器信息，编辑
server_config.json：
{
"loginInfo": {
"username": "admin",
"password": "admin123"
},
"servers": [
{
"username": "server1",
"name": "服务器1",
"type": "VPS",
"location": "北京",
"password": "password123",
"region": "CN"
}
]
}- 启动服务端（占用8080端口）：
java -jar target/server-status-1.1.1.jar- 后台运行：
nohup java -jar target/server-status-1.1.1.jar &- 编译项目：
cd Status-Server
mvn clean package- 运行编译后的JAR包：
java -jar target/server-status-1.1.1.jar- 自定义配置文件：
java -jar server-status-1.1.1.jar --server.config=custom_config.json- 自定义Netty端口（默认48084，需与客户端配置一致）：
java -jar server-status-1.1.1.jar --netty.server.port=48085- 自定义Web端口（默认8080）：
java -jar server-status-1.1.1.jar --server.port=8081- 进入前端目录：
cd Status-Web- 安装依赖：
npm install- 启动开发服务器：
npm run serve- 访问
http://localhost:8082或者http://localhost:8082/admin管理端
- 构建生产版本：
npm run build-
将
dist目录内容部署到Web服务器（如Nginx） -
Nginx配置示例：
server {
listen 80;
server_name your-domain.com;
root /path/to/dist;
index index.html;
# 前端路由支持
location / {
try_files $uri $uri/ /index.html;
}
# API代理（解决跨域）
location /api/ {
proxy_pass http://localhost:8080/api/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
# WebSocket代理
location /websocket {
proxy_pass http://localhost:8080/websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}-
区别使用的是linux系统还是windows系统
linux使用：status_client.pylinux windows使用：status_client_windows.py -
编辑连接配置：
vim status_client.py 修改以下配置：
SERVER = "your-server-ip" # 服务端IP
PORT = 48084 # 服务端Netty端口
USER = "server1" # 在server_config.json中配置的用户名或者是在管理端添加的账号密码
PASSWORD = "password123" # 对应的密码- 运行客户端：
python3 status_client.py- 后台运行：
nohup python3 status_client.py &- 系统信息：CPU使用率、内存使用情况、磁盘使用情况
- 网络信息：网络流量统计、网络延迟测试
- 系统负载：1分钟、5分钟、15分钟负载
- 进程信息：运行进程数、线程数
- 实时监控：WebSocket实时数据推送
- 节点管理：支持热添加、删除、编辑监控节点
- 后台管理：Web界面管理服务器配置
- 多视图展示：支持卡片视图和表格视图
- 响应式设计：支持移动端访问
- 主监控页面：
http://your-domain/ - 管理后台：
http://your-domain/admin - 默认账号密码：
server-status/server-status - 登录页面：
http://your-domain/login
默认管理员账号密码在 server_config.json 中配置。
- 主要业务逻辑在
service包中 - Netty网络处理在
handler包中 - WebSocket处理在
controller/ws包中 - 数据模型在
model包中
- 使用Vue 3 Composition API
- TypeScript提供类型安全
- 组件化开发，可复用性强
- 使用Semantic UI提供美观界面
- 纯Python实现，无外部依赖
- 支持Linux系统监控
- 可扩展自定义监控项
-
客户端连接失败
- 检查服务端是否正常运行
- 确认端口配置是否一致
- 检查防火墙设置
-
前端无法获取数据
- 检查后端API是否正常
- 确认WebSocket连接是否建立
- 检查浏览器控制台错误信息
-
编译错误
- 确认Java版本是否为11+
- 确认Node.js版本是否为14+
- 清理缓存重新安装依赖