一、简介
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, // 监控项的 itemid
sortfield: "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 服务界面看看，你要查询的监控项是否是你要得到的数据，以免发生错误！