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

一、Python所有方向的学习路线

Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

二、学习软件

工欲善其事必先利其器。学习Python常用的开发软件都在这里了，给大家节省了很多时间。

三、入门学习视频

我们在看视频学习的时候，不能光动眼动脑不动手，比较科学的学习方法是在理解之后运用它们，这时候练手项目就很适合了。

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

需要这份系统化学习资料的朋友，可以戳这里获取

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

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获取数据，并在表格中显示这些数据。

资源类型	百分比使用率
{{ resource.type }}	{{ resource.percentage }}

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


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

mounted() {

this.getResources();

setInterval(() => {

this.getResources();

}, 30000); // 每30秒执行一次

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

需要这份系统化学习资料的朋友，可以戳这里获取

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