用deveco写一个服务器监控程序

要使用 Deveco 编写一个服务器监控程序，您需要先安装其相关依赖：

npm install deveco axios

接下来，创建一个 Vue.js 项目并在其中引入 Deveco 和 Axios：

vue create my-project
cd my-project
npm install deveco axios

然后，创建一个服务器监控组件 `ServerMonitor.vue`，用于展示服务器的 CPU 使用率和内存使用情况，并发送 Ajax 请求获取实时数据：

<template>
  <div class="server-monitor">
    <div class="cpu-usage">
      <h2>CPU Usage</h2>
      <div class="bar">
        <div class="bar-inner" :style="{ width: cpuUsage + '%' }"></div>
      </div>
      <div class="value">{{ cpuUsage }}%</div>
    </div>
    <div class="mem-usage">
      <h2>Memory Usage</h2>
      <div class="bar">
        <div class="bar-inner" :style="{ width: memUsage + '%' }"></div>
      </div>
      <div class="value">{{ memUsage }} MB</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ServerMonitor",
  data() {
    return {
      cpuUsage: 0,
      memUsage: 0,
    };
  },
  mounted() {
    // 定时获取 CPU 使用率和内存使用情况
    setInterval(() => {
      axios.get("/api/server/usage").then((response) => {
        this.cpuUsage = response.data.cpuUsage;
        this.memUsage = response.data.memUsage;
      });
    }, 1000);
  },
};
</script>

<style>
.server-monitor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px;
}

.cpu-usage,
.mem-usage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar {
  width: 100%;
  height: 30px;
  background-color: #f3f3f3;
  border-radius: 10px;
  overflow: hidden;
}

.bar-inner {
  height: 100%;
  background-color: #32c787;
  transition: width 0.5s ease;
}

.value {
  margin-top: 10px;
  font-size: 24px;
  font-weight: bold;
}
</style>

以上代码创建了一个 `ServerMonitor` 组件，其中包含两个子组件，用于展示 CPU 使用率和内存使用情况。在 `mounted` 钩子函数中，使用 `setInterval` 方法定时发送 Ajax 请求获取 CPU 和内存使用情况数据。

然后，在 `main.js` 中配置服务器 API 路由和跨域请求：

const express = require("express");
const cors = require("cors");

const app = express();
app.use(cors());

app.get("/api/server/usage", (req, res) => {
  const cpuUsage = Math.round(Math.random() * 100);
  const memUsage = Math.round(Math.random() * 1000);
  res.json({ cpuUsage, memUsage });
});

app.listen(3000, () => {
  console.log("Server running at http://localhost:3000");
});

以上代码创建了一个简单的 Express 服务器，其中定义了一个 GET 路由 `/api/server/usage`，用于返回随机生成的 CPU 和内存使用情况数据。

最后，在 `App.vue` 中引入 `ServerMonitor` 组件并将其展示出来：

<template>
  <div class="app">
    <ServerMonitor />
  </div>
</template>

<script>
import ServerMonitor from "./components/ServerMonitor.vue";

export default {
  name: "App",
  components: {
    ServerMonitor,
  },
};
</script>

<style>
.app {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

现在您可以使用 `npm run serve` 命令启动开发服务器并在浏览器中查看您的服务器监控程序了。