nodejs页面显示linux系统cpu内存和磁盘占用率的前后端怎么写
时间: 2024-03-20 14:39:02 浏览: 69
基于nodejs+express+vue+mysql的前后端分离在线订餐系统源码+sql数据库.zip
要在 Node.js 中编写一个能够显示 Linux 系统 CPU、内存和磁盘占用率的应用程序,你需要编写前端和后端代码。
下面是一个简单的示例,演示了如何使用 Node.js 和 Express.js 框架编写一个后端 API 和一个前端页面,用于显示系统的 CPU、内存和磁盘占用率。
后端代码:
```javascript
const os = require('os');
const express = require('express');
const app = express();
// 定义 API 路径
app.get('/api/cpu', (req, res) => {
// 获取 CPU 使用率
const cpuUsage = os.loadavg()[0];
res.json({ cpuUsage });
});
app.get('/api/memory', (req, res) => {
// 获取内存使用率
const totalMemory = os.totalmem();
const freeMemory = os.freemem();
const usedMemory = totalMemory - freeMemory;
const memoryUsage = (usedMemory / totalMemory) * 100;
res.json({ memoryUsage });
});
app.get('/api/disk', (req, res) => {
// 获取磁盘使用率
const { exec } = require('child_process');
exec('df -h /', (err, stdout, stderr) => {
if (err) {
res.status(500).send(err.message);
return;
}
const lines = stdout.split('\n');
const parts = lines[1].split(' ').filter(part => part !== '');
const diskUsage = parseInt(parts[4].replace('%', ''));
res.json({ diskUsage });
});
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});
```
该代码使用了`os`模块来获取 CPU 和内存使用率信息,并使用`child_process`模块执行 shell 命令来获取磁盘使用率信息。
然后,你需要编写一个前端页面来显示这些数据。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>System Monitor</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>System Monitor</h1>
<p>CPU Usage: {{ cpuUsage }}%</p>
<p>Memory Usage: {{ memoryUsage }}%</p>
<p>Disk Usage: {{ diskUsage }}%</p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
cpuUsage: 0,
memoryUsage: 0,
diskUsage: 0
},
methods: {
fetchData() {
axios.get('/api/cpu')
.then(response => {
this.cpuUsage = response.data.cpuUsage.toFixed(2);
})
.catch(error => {
console.log(error);
});
axios.get('/api/memory')
.then(response => {
this.memoryUsage = response.data.memoryUsage.toFixed(2);
})
.catch(error => {
console.log(error);
});
axios.get('/api/disk')
.then(response => {
this.diskUsage = response.data.diskUsage;
})
.catch(error => {
console.log(error);
});
}
},
mounted() {
this.fetchData();
setInterval(this.fetchData, 1000);
}
});
</script>
</body>
</html>
```
该代码使用了 Vue.js 和 Axios 库来从后端 API 中获取数据,并在页面上显示它们。
要运行该应用程序,请将两个代码片段保存到同一个目录中,然后使用以下命令启动服务器:
```
node server.js
```
打开你的浏览器并访问`http://localhost:3000`,就可以看到 CPU、内存和磁盘占用率的实时数据了。
阅读全文