python+flask+mongodb+vue撸一个实时监控linux服务资源的网站_python mongodb vue 开发

2401_83946224

于 2024-05-16 23:10:24 发布

阅读量666

点赞数 21

文章标签：运维 linux 面试

本文链接：https://blog.csdn.net/2401_83946224/article/details/138978362

版权

最后的话

最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！

资料预览

给大家整理的视频资料：

给大家整理的电子书资料：

如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以点击这里获取！

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

我们需要创建一个新的API路由来获取系统资源的详细信息。我们可以使用psutil库来获取系统信息。pymysql库用于获取MySQL的慢查询，redis库用于获取Redis的相关信息。为了方便地计算网络带宽，我们可以使用vnstat库。

在Python Flask应用中，我们可以创建一个新的API路由来获取系统资源的详细信息。

代码示例：

from flask import Flask, jsonify
from flask_restful import Resource, Api
import psutil
import vnstat
import pymysql
import redis
app = Flask(__name__)
api = Api(app)
class SystemResource(Resource):
    def get(self):
        cpu_percent = psutil.cpu_percent(interval=1)
        memory_info = psutil.virtual_memory()
        disk_usage = psutil.disk_usage("/")
        mysql_slow_queries = self.get_mysql_slow_queries()
        redis_info = self.get_redis_info()
        network_info = self.get_network_info()
        system_load = os.getloadavg()
        return jsonify({
            "cpu": cpu_percent,
            "memory": memory_info.percent,
            "disk": disk_usage.percent,
            "mysql": mysql_slow_queries,
            "redis": redis_info,
            "network": network_info,
            "system_load": system_load
        })
    def get_mysql_slow_queries(self):
        conn = pymysql.connect(host="localhost", user="username", password="password", db="db")
        with conn.cursor() as cursor:
            cursor.execute("SELECT * FROM slow_query_log")
            result = cursor.fetchall()
        return result
    def get_redis_info(self):
        r = redis.Redis(host="localhost", port=6379, db=0)
        info = r.info()
        return info
    def get_network_info(self):
        stats = vnstat.read_totals("/path/to/vnstat.db")
        total_bytes_sent = stats[0]["TX"]
        total_bytes_received = stats[0]["RX"]
        current_date_time = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        return {
            "total_bytes_sent": total_bytes_sent,
            "total_bytes_received": total_bytes_received,
            "current_date_time": current_date_time
        }
api.add_resource(SystemResource, "/system")
if __name__ == "__main__":
    app.run(debug=True)

以上Python Flask代码将在根URL下创建一个新资源，并在该资源中返回系统的CPU、内存、磁盘、MySQL慢查询、Redis信息、网络和系统负载详细信息。

Vue相关代码

我们可以创建一个Vue组件，该组件包含一个表格，表格中的每一行都代表一种类型的系统资源。我们可以使用axios库来从上述Python Flask API获取数据，并在表格中显示这些数据。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>资源类型</th>
          <th>百分比使用率</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(resource, index) in resources" :key="index">
          <td>{{ resource.type }}</td>
          <td>{{ resource.percentage }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
export default {
  name: "SystemMonitor",
  data() {
    return {
      resources: []
    };
  },
  mounted() {
    this.getResources();
  },
  methods: {
    getResources() {
      axios.get("/system")
        .then(response => {
          this.resources = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

在以上代码中，我们使用了一个Vue组件，该组件有一个表格，表格中的每一行都有一个资源类型和相应的使用率百分比。当我们加载此组件时，我们调用getResources方法来获取系统资源信息并显示它们。