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

重庆网站制作哪家好如何在公众号里做网站

wzjs 2025/9/21 20:12:31

重庆网站制作哪家好,如何在公众号里做网站,站内推广有哪些方式,wordpress自定义的注册一、简介 Vue 结合 Zabbix API 可以实现对服务器 CPU、内存、GPU 等监控数据的动态获取与展示。Zabbix 是一款开源的监控工具，提供丰富的 API 接口供开发者调用。通过 Vue 前端框架，可以将 Zabbix 返回的数据以图表或表格形式直观呈现，便于运…

一、简介

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