基于Spring Boot与Thymeleaf的服务器实时监控系统设计与实现
绪论
随着信息化建设的不断深入，服务器作为核心基础设施，其运行状态直接影响业务连续性。为保障服务稳定性，构建一套高效、直观的实时监控平台成为必要手段。本系统采用Spring Boot作为后端框架，结合HTML与Thymeleaf模板引擎，实现对服务器CPU使用率、内存占用、磁盘I/O及网络流量等关键指标的动态采集与可视化展示，提升运维效率和故障响应能力。
关键技术选型
Spring Boot框架
Spring Boot通过自动配置机制简化了传统Spring应用的搭建流程，内嵌Tomcat容器支持快速部署。其模块化结构便于集成各类中间件，显著提升了开发效率。在本项目中，利用其RESTful API支持能力，构建轻量级数据接口，供前端定时拉取监控数据。
Thymeleaf模板引擎
Thymeleaf是一种现代化服务端Java模板引擎，能够在浏览器中直接预览静态页面效果，有利于前后端协作开发。它支持自然模板（Natural Templates），即HTML文件既可由浏览器直接打开查看布局，也可经由Spring MVC渲染后输出动态内容。该特性使得界面调试更加便捷，尤其适用于需要频繁调整UI的数据展示类系统。
数据采集与处理
系统通过调用操作系统提供的原生命令（如top、df、netstat）或JMX接口获取底层资源信息，并借助Scheduled Task实现周期性任务执行。采集到的原始数据经格式化处理后存储于内存缓存中，避免频繁读写数据库带来的性能损耗，确保高频率刷新场景下的响应速度。
系统架构设计
整体采用B/S模式，前端基于标准HTML5 + CSS3 + JavaScript构建响应式界面，后端以Spring Boot提供控制器层逻辑处理。系统分为三个主要模块：
- 数据采集模块： 定时执行系统命令并解析输出结果；
- 业务逻辑模块： 封装数据转换、异常判断与阈值告警规则；
- 视图展示模块： 使用Thymeleaf渲染实时图表与状态面板。
数据库设计
虽然核心监控数据不依赖持久化存储，但为支持历史趋势分析功能，仍设计轻量级MySQL表结构用于保存每日快照数据。主要包含以下两张表：
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | BIGINT AUTO_INCREMENT | 主键 |
| record_time | DATETIME | 记录时间 |
| cpu_usage | DECIMAL(5,2) | CPU使用百分比 |
| memory_usage | DECIMAL(5,2) | 内存使用率 |
| disk_usage | DECIMAL(5,2) | 磁盘占用率 |
| network_in | DECIMAL(10,2) | 入网速率(KB/s) |
| network_out | DECIMAL(10,2) | 出网速率(KB/s) |
核心功能实现
定时任务配置
@Configuration
@EnableScheduling
public class SchedulerConfig {
private static final Logger log = LoggerFactory.getLogger(SchedulerConfig.class);
@Autowired
private MonitorService monitorService;
@Scheduled(fixedRate = 5000) // 每5秒执行一次
public void collectSystemMetrics() {
try {
SystemMetrics metrics = monitorService.fetchCurrentMetrics();
CacheManager.put("latest_metrics", metrics);
log.info("已更新最新监控数据: {}", metrics);
} catch (Exception e) {
log.error("采集系统指标失败", e);
}
}
}控制器层数据暴露
@Controller
public class DashboardController {
@GetMapping("/dashboard")
public String showDashboard(Model model) {
SystemMetrics latest = CacheManager.get("latest_metrics");
if (latest != null) {
model.addAttribute("metrics", latest);
}
return "dashboard"; // 对应 templates/dashboard.html
}
@ResponseBody
@GetMapping("/api/metrics/current")
public ResponseEntity<SystemMetrics> getCurrentMetrics() {
SystemMetrics data = CacheManager.get("latest_metrics");
return data != null ? ResponseEntity.ok(data) :
ResponseEntity.noContent().build();
}
}前端页面渲染（Thymeleaf片段）
<div class="metric-card">
<h4>CPU 使用率</h4>
<p th:text="${${metrics.cpuUsage}} + '%'"/>
<div class="progress-bar">
<div class="bar-fill"
th:style="|width: ${metrics.cpuUsage}%; background-color:
${metrics.cpuUsage > 80 ? 'red' : 'green'}|">
</div>
</div>
</div>上述代码展示了如何利用Thymeleaf表达式将后端传递的SystemMetrics对象中的CPU使用率动态插入HTML，并根据数值大小改变进度条颜色，实现基础的视觉预警功能。
系统测试与验证
测试阶段重点验证以下方面：
- 数据采集准确性：对比系统命令输出与程序解析结果是否一致；
- 接口响应性能：模拟多用户并发访问，确保平均响应时间低于300ms；
- 页面刷新流畅度：前端每10秒轮询一次API，确认无卡顿现象；
- 跨平台兼容性：在CentOS、Ubuntu等主流Linux发行版上成功运行。
测试结果表明，系统能够稳定运行，各项指标符合设计预期，具备实际部署价值。
