nodejs页面显示linux系统cpu内存和磁盘占用率的前后端怎么写
时间: 2024-03-20 18:40:46 浏览: 13
要实现在Node.js的前端页面上显示Linux系统的CPU、内存和磁盘占用率,可以通过前后端分离的方式来实现。具体步骤如下:
1. 后端编写API接口:使用Node.js编写一个API接口,通过调用系统命令或者使用第三方库(如psutil)来获取系统的CPU、内存和磁盘占用率信息,并将这些信息以JSON格式返回给前端页面。
2. 前端页面调用API接口:在前端页面上通过Ajax或者其他方式调用后端编写的API接口,获取系统的占用率信息,并将这些信息展示在页面上。
下面是一个简单的示例,演示如何在Node.js中实现后端API接口和前端页面。
后端API接口:
```javascript
const express = require('express');
const app = express();
const os = require('os-utils');
app.get('/api/system-info', (req, res) => {
const cpuUsage = os.cpuUsage();
const freeMemory = os.freememPercentage();
const totalMemory = os.totalmem();
const usedMemory = totalMemory * (1 - freeMemory);
const freeDisk = os.freemem() / 1024 / 1024 / 1024;
const totalDisk = os.totalmem() / 1024 / 1024 / 1024;
const usedDisk = totalDisk - freeDisk;
const systemInfo = {
cpuUsage,
memoryUsage: {
used: usedMemory,
total: totalMemory,
free: freeMemory
},
diskUsage: {
used: usedDisk,
total: totalDisk,
free: freeDisk
}
};
res.json(systemInfo);
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});
```
以上代码使用了os-utils库来监控系统的CPU、内存和磁盘占用率,并将这些信息打包成JSON格式返回给前端页面。
前端页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>System Info</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>System Info</h1>
<p>CPU Usage: {{ systemInfo.cpuUsage }}%</p>
<p>Memory Usage: {{ systemInfo.memoryUsage.used }} / {{ systemInfo.memoryUsage.total }} GB ({{ systemInfo.memoryUsage.free }}% Free)</p>
<p>Disk Usage: {{ systemInfo.diskUsage.used }} / {{ systemInfo.diskUsage.total }} GB ({{ systemInfo.diskUsage.free }}% Free)</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
systemInfo: {}
},
mounted() {
axios.get('/api/system-info')
.then(response => {
this.systemInfo = response.data;
})
.catch(error => {
console.log(error);
});
}
});
</script>
</body>
</html>
```
以上代码使用了Vue.js和Axios库来调用后端API接口,并将获取到的系统占用率信息展示在页面上。
需要注意的是,以上代码仅为示例代码,实际情况中可能需要根据不同的系统平台、编程语言和库来进行调整。