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

用python+flask+mongodb+vue写一个监控linux服务资源实时使用率的页面网站，并每30秒定时请求，把Linux数据保存数据到mongodb数据库中，监控的linux的资源有：cup、内存、网络带宽、mysql慢查询、redis、系统平均负载、磁盘使用率等，网页需要按照列表形式展示，每30秒刷新最新数据并展示

首先，你需要确保已经安装了Flask，PyMongo，Vue和axios等依赖项。

Python Flask相关代码

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

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

代码示例：

from flask import Flask, jsonifyfrom flask_restful import Resource, Apiimport psutilimport vnstatimport pymysqlimport redisapp = 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 resultdef get_redis_info(self):r = redis.Redis(host="localhost", port=6379, db=0)info = r.info()return infodef 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方法来获取系统资源信息并显示它们。

对于每30秒刷新数据的需求，你可以使用JavaScript的setInterval函数来设置一个定时器，每次触发时都会重新获取系统资源信息并更新表格内容。

mounted() {this.getResources();setInterval(() => {this.getResources();}, 30000); // 每30秒执行一次},

这样就可以创建一个能够实时监控多种Linux资源并每30秒刷新的页面了。动手尝试一下吧。

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：【文末自行领取】

​

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！