当前位置：首页 > ops >正文

Vue 结合 Zabbix API 获取服务器 CPU、内存、GPU 等数据

ops 2025/7/17 7:32:26

一、简介

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]	磁盘写入数据量（字节/秒）