# oshi-app

**Repository Path**: superxcy/oshi-app

## Basic Information

- **Project Name**: oshi-app
- **Description**: vue3+springboot
监控电脑每核CPU的使用率情况
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-13
- **Last Updated**: 2026-07-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# OSHI-APP：CPU 负载实时监控系统

一个前后端分离的 CPU 负载实时监控示例项目。后端使用 Spring Boot + OSHI 采集系统硬件指标，前端使用 Vue 3 + ECharts 实时绘制每个 CPU 核心的使用率曲线。

## 项目预览

- 首页：`/`
- CPU 监控页：`/cpu`（实时展示 16 个 CPU 核心的负载面积图，每秒刷新一次）

## 目录结构

```
oshi-app
├── pom.xml                       # Maven 构建文件（后端）
├── src                           # 后端源码（Spring Boot）
│   ├── main
│   │   ├── java/com/atguigu/oshi
│   │   │   ├── OshiAppApplication.java        # 启动类
│   │   │   ├── common/R.java                  # 统一响应结果封装
│   │   │   ├── controller/CpuLoadRestController.java  # REST 接口
│   │   │   └── service/CpuLoadMetricsService.java     # OSHI 采集 CPU 负载
│   │   └── resources/application.properties   # Spring Boot 配置
│   └── test/java                               # 单元测试（OSHI 用法示例）
└── frontend-app                  # 前端源码（Vue 3 + Vite）
    ├── package.json
    ├── vite.config.js
    └── src
        ├── main.js               # 应用入口，注册 Pinia/Router/Arco
        ├── App.vue               # 整体布局（Header/Content/Footer）
        ├── router/index.js       # 路由配置
        ├── http/index.js         # axios 实例与拦截器
        ├── api/cpuloadApi.js     # 调用后端的 API 封装
        ├── stores/counter.js     # Pinia 示例 store
        └── views
            ├── NavBar.vue        # 顶部导航菜单
            ├── Home.vue          # 首页
            └── cpu/CpuLoad.vue   # CPU 实时监控页（核心页面）
```

## 后端启动

**环境要求**：JDK 17+、Maven 3.6+

```bash
# 在项目根目录执行
mvn spring-boot:run
# 或打包后运行
mvn clean package
java -jar target/oshi-app-0.0.1-SNAPSHOT.jar
```

后端默认监听 `http://localhost:8080`。

接口示例：

| 方法 | 路径                | 说明                          |
| ---- | ------------------- | ----------------------------- |
| GET  | `/metrics/cpuload`  | 返回 16 核 CPU 的当前使用率   |

响应示例：
```json
{
  "code": 200,
  "msg": "ok",
  "data": [0.12, 0.05, 0.23, ...]
}
```

## 前端启动

**环境要求**：Node.js 18+、npm

```bash
cd frontend-app
npm install        # 安装依赖
npm run dev        # 启动开发服务器（默认 http://localhost:5173）
npm run build      # 生产环境打包
npm run preview    # 预览打包结果
```

> 前端默认通过 `http://localhost:8080/` 访问后端，请先启动后端。

## 技术栈一览

### 后端

| 技术 | 版本 | 作用 |
| ---- | ---- | ---- |
| Spring Boot | 3.4.0 | Web 框架，提供自动装配、内嵌 Tomcat |
| OSHI | 6.6.5 | 跨平台系统硬件/操作系统信息采集库 |
| Lombok | 随 Spring Boot | 通过注解生成 getter/setter 等样板代码 |
| Maven | 3.6+ | 项目构建与依赖管理 |
| JDK | 17 | 运行时环境 |

### 前端

| 技术 | 版本 | 作用 |
| ---- | ---- | ---- |
| Vue | 3.5.x | 渐进式前端框架（Composition API） |
| Vite | 6.0.x | 下一代前端构建工具，开发服务器极快 |
| Vue Router | 4.4.x | 官方路由管理器 |
| Pinia | 2.2.x | 官方推荐的状态管理库 |
| Axios | 1.7.x | HTTP 请求库 |
| ECharts | 5.5.x | 数据可视化图表库 |
| Arco Design Vue | 2.56.x | 字节跳动开源的 UI 组件库 |

## 如何掌握这些技术

### 后端

1. **Spring Boot**
   - 先学 Spring Core（IoC/DI、Bean 生命周期）和 Spring MVC（`@RestController`/`@GetMapping` 等注解）。
   - 官方文档：https://docs.spring.io/spring-boot/
   - 实战：动手写几个 REST 接口，理解自动装配（`@SpringBootApplication`）、配置文件、依赖注入（`@Autowired`）。

2. **OSHI**
   - GitHub：https://github.com/oshi/oshi
   - 核心 API：`SystemInfo` → `HardwareAbstractionLayer` → `CentralProcessor`/`GlobalMemory`，可获取 CPU、内存、进程、磁盘、网络等指标。
   - 学习路径：参考本项目 `src/test/java/.../OSHITest.java`，逐个测试 CPU、内存、进程接口。

3. **Lombok**
   - 官网：https://projectlombok.org/
   - 重点掌握 `@Data`、`@Getter/@Setter`、`@Slf4j`、`@Builder` 等注解，了解其在编译期生成代码的原理。

4. **Maven**
   - 理解 `pom.xml` 的 `dependencies`、`build/plugins`、生命周期（`clean`/`compile`/`package`/`install`）。

### 前端

1. **Vue 3**
   - 官方文档（中文）：https://cn.vuejs.org/
   - 重点：Composition API、`<script setup>` 语法糖、响应式（`ref`/`reactive`/`computed`）、生命周期（`onMounted`）。

2. **Vite**
   - 官方文档：https://cn.vitejs.dev/
   - 理解 ES Module 原生导入、开发服务器原理、`vite.config.js` 配置（别名、插件）。

3. **Vue Router**
   - 官方文档：https://router.vuejs.org/zh/
   - 掌握路由配置、`createWebHistory`、路由懒加载、`useRouter`/`useRoute`。

4. **Pinia**
   - 官方文档：https://pinia.vuejs.org/zh/
   - 理解 Store 的定义与使用、组合式 store 写法。

5. **Axios**
   - 官方文档：https://axios-http.com/zh/
   - 重点：实例创建、请求/响应拦截器、错误处理（参考 `src/http/index.js`）。

6. **ECharts**
   - 官方文档：https://echarts.apache.org/zh/
   - 学习路径：从基础折线图/柱状图开始 → 掌握 `option` 配置项（title/grid/xAxis/yAxis/series）→ 实战动态数据更新（参考 `CpuLoad.vue`）。

7. **Arco Design Vue**
   - 官方文档：https://arco.design/vue
   - 熟悉 Layout、Menu、Space、Form、Table 等常用组件。

### 通用建议

- **先跑通项目**：按上述步骤启动前后端，看到 CPU 监控图实时刷新，建立直观感受。
- **断点调试**：后端用 IDE 调试 Controller；前端用浏览器 DevTools + Vue Devtools。
- **逐模块改造**：尝试新增内存监控页、进程监控页，把 OSHI 的其它 API 用起来。
- **阅读官方文档 + 动手实践**：每个技术点都写一个最小示例，避免只看不练。

## 许可证

本项目仅用于学习交流。