一、簡介

????????Vue 結合 Zabbix API 可以實現對服務器 CPU、內存、GPU 等監控數據的動態獲取與展示。Zabbix 是一款開源的監控工具，提供豐富的 API 接口供開發者調用。通過 Vue 前端框架，可以將 Zabbix 返回的數據以圖表或表格形式直觀呈現，便于運維和開發人員實時掌握服務器性能狀態。

二、數據獲取流程

1. Zabbix API 配置

????????確保 Zabbix 服務已啟用 API 功能，并獲取 API 的訪問地址（如 http://your-zabbix-server/api_jsonrpc.php）。創建具有 API 訪問權限的 Zabbix 用戶，記錄用戶名和密碼用于認證。

注意?your-zabbix-server 是你部署的 zabbix 服務地址，不是實際的文件地址。

下面代碼部分以下列信息為例：

?賬號：Admin，

?密碼：zabbix，

?API訪問地址：http://your-zabbix-server/api_jsonrpc.php

$AjaxZabbix 是我封裝的 axios，按照你正常的接口寫法就可以，我這里是為了方便展示請求方式、請求地址。

2. Vue 項目準備

????????在 Vue 項目中安裝 Axios 或其他 HTTP 請求庫，用于與 Zabbix API 交互。創建獨立的配置文件存儲 Zabbix API 地址、用戶名和密碼等信息。

3. 獲取認證 Token

????????通過 Zabbix API 的 user.login 方法獲取認證 Token。發送 POST 請求至 Zabbix API 地址，請求體包含用戶名和密碼。成功后會返回 Token，后續請求需在頭部攜帶此 Token。

//登錄zabbix 獲取用戶id
loginZabnix() {var body = {jsonrpc: "2.0",method: "user.login",params: {user: "Admin", // zabbix 賬號password: "zabbix", // zabbix 密碼},id: 1,};$AjaxZabbix("post", 'http://your-zabbix-server/api_jsonrpc.php', body).then((res) => {console.log(res.result, 'token標識')});
},

返回結果：

4. 查詢主機數據

????????通過 Zabbix API 的 host.get 方法獲取所有主機。發送 POST 請求至 Zabbix API 地址，請求體包含用戶名和密碼。成功后會返回主機列表，后續查詢監控項會用到主機列表中的hostid。

hostZabnix() {var body = {jsonrpc: "2.0",method: "host.get",// 選擇想要輸出的內容params: {output: ["hostid", "host", "name", "flags", "description", "status"],selectInterfaces: ["interfaceid", "ip"],},id: 1,auth: token, // 從login.get 方法中獲取到的token};$AjaxZabbix("post", 'http://your-zabbix-server/api_jsonrpc.php', body).then((res) => {console.log(res.result, '主機列表')});
},

返回結果：

5. 查詢監控項數據

????????使用 Zabbix API 的 item.get 方法查詢目標監控項（如 CPU 使用率、內存占用等）的 ID，后續查詢CPU等使用數據會用到監控項列表中的 itemid。

itemZabnix() {var body = {jsonrpc: "2.0",method: "item.get",// 選擇輸出內容params: {output: ["itemids", "key_"],hostids: hostid,},id: 1,auth: token,};$AjaxZabbix("post", 'http://your-zabbix-server/api_jsonrpc.php', body).then((res) => {console.log(res.result, '監控項列表');});
},

返回結果：

6. 查詢CPU、內存等信息

? ? ? ? 根據監控項列表中得到的數據的 itemid，我們可以使用 Zabbix API 的 history.get 方法進行查詢，每一個監控項代表監控的一個數據信息，比如 key_ 值為”system.cpu.util“的監控項，可以查詢到 cpu 當前的使用率。下面以 cpu使用率 為例：

deployZabnix() {var body = {jsonrpc: "2.0",method: "history.get",params: {output: "extend",history: 0, // 0表示浮點數類型，適用于CPU、內存等指標itemids: itemid,  // 監控項的 itemidsortfield: "clock", // 根據時間排序sortorder: "DESC",  // 排序規則limit: 1, // 獲取最新的一條數據，數字是幾就會返回幾條數據},id: 1,auth: token,};$AjaxZabbix("post", 'http://your-zabbix-server/api_jsonrpc.php', body).then((res) => {console.log(res.result[0].value, '配置使用率');});
},

返回結果：

三、總結

1. 流程摘要

（1）user.login（獲取token）

（2）host.get（獲取主機列表）

（3）item.get（根據主機的 hostid 獲取監控項列表）

（4）history.get（根據監控項的 itemid 獲取監控項實際數據）

2. 常用監控項

CPU

system.cpu.util	cpu使用率（%）
system.cpu.load[percpu,avg1]	cpu單核 1 分鐘平均負載
system.cpu.load[percpu,avg5]	cpu單核 5?分鐘平均負載

內存

vm.memory.size[total]	總物理內存（字節）
vm.memory.size[available]	可用內存（字節）
vm.memory.size[pavailable]	內存可用率（%）
vm.memory.size[used]	已用內存（字節）
vm.memory.size[free]	空閑內存（字節）

磁盤

vfs.fs.size[/,total]	根分區總空間（字節）
vfs.fs.size[/,free]	根分區剩余空間（字節）
vfs.fs.size[/,pfree]	根分區剩余空間百分比（%）
vfs.fs.size[/,used]	根分區已用空間（字節）
vfs.dev.read[,ops]	磁盤讀取操作次數（IOPS）
vfs.dev.write[,ops]	磁盤寫入操作次數（IOPS）
vfs.dev.read[,bytes]	磁盤讀取數據量（字節/秒）
vfs.dev.write[,bytes]	磁盤寫入數據量（字節/秒）

GPU

? ? ? ? GPU官方沒有提供監控項，需要我們自己去創建相關監控項！（讓運維去加）

3. 注意項

需要注意的是，如果你的zabbix服務中自定義了官方已有的監控項，會進行覆蓋，我們公司運維就將?vm.memory.size[pavailable] 設置成了使用率，而官方是可用率，結果正好相反！！

所以在使用前先到 zabbix 服務界面看看，你要查詢的監控項是否是你要得到的數據，以免發生錯誤！