这是一个比较复杂的项目，需要一定的技术基础。以下是大致的步骤：
1. 搭建Flask应用程序，包括路由和页面模板。
2. 安装mysql，并连接到Flask应用程序。
3. 编写采集系统
CPU和内存
使用率的Python脚本，并将采集到的数据存储到mysql中的表中。
4.
使用Ajax
实现前端页面与后端的数据交互，定时获取mysql中的数据并更新
折线图。
具体
实现步骤如下：
1. 搭建Flask应用程序
首先需要安装Flask框架和相关依赖。可以
使用pip命令进行安装：
```python
pip install flask
pip install flask-mysql
```
接下来创建一个Flask应用程序，并编写路由和页面模板。
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
```
在templates文件夹下创建一个名为index.html的模板文件，用于显示
实时监控的
折线图。
```html
<!DOCTYPE html>
<html>
<head>
<title>
CPU内存
实时监控</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 100%; height: 400px;"></div>
<script>
var myChart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: '
CPU内存
实时监控'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['
CPU使用率', '内存
使用率']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}%'
}
},
series: [
{
name: '
CPU使用率',
type: 'line',
data: []
},
{
name: '内存
使用率',
type: 'line',
data: []
}
]
};
myChart.setOption(option);
setInterval(function() {
$.ajax({
url: '/data',
success: function(data) {
var xAxisData = [];
var
cpuData = [];
var memData = [];
for(var i = 0; i < data.length; i++) {
xAxisData.push(data[i].time);
cpuData.push(data[i].
cpu);
memData.push(data[i].memory);
}
myChart.setOption({
xAxis: {
data: xAxisData
},
series: [
{
name: '
CPU使用率',
data:
cpuData
},
{
name: '内存
使用率',
data: memData
}
]
});
}
});
}, 1000);
</script>
</body>
</html>
```
2. 安装mysql，并连接到Flask应用程序
首先需要安装mysql，并创建一个数据库和一个表用于存储采集到的数据。
```sql
CREATE DATABASE monitor;
USE monitor;
CREATE TABLE data (
id INT NOT NULL AUTO_INCREMENT,
time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
cpu FLOAT,
memory FLOAT,
PRIMARY KEY (id)
);
```
接下来在Flask应用程序中添加mysql配置，并连接到mysql。
```python
from flaskext.mysql import MySQL
app = Flask(__name__)
app.config['MYSQL_DATABASE_HOST'] = 'localhost'
app.config['MYSQL_DATABASE_PORT'] = 3306
app.config['MYSQL_DATABASE_USER'] = 'root'
app.config['MYSQL_DATABASE_PASSWORD'] = '123456'
app.config['MYSQL_DATABASE_DB'] = 'monitor'
mysql = MySQL()
mysql.init_app(app)
@app.route('/data')
def get_data():
cursor = mysql.get_db().cursor()
cursor.execute('SELECT * FROM data ORDER BY time DESC LIMIT 30')
data = cursor.fetchall()
return jsonify(data)
```
3. 编写采集系统
CPU和内存
使用率的Python脚本，并将采集到的数据存储到mysql中的表中
使用psutil库可以方便地获取系统
CPU和内存
使用率。编写一个Python脚本，定时采集
CPU和内存
使用率，并将采集到的数据存储到mysql中的表中。
```python
import psutil
import time
import pymysql
conn = pymysql.connect(host='localhost', port=3306, user='root', password='123456', db='monitor')
while True:
cpu_percent = psutil.
cpu_percent(interval=1)
mem_percent = psutil.virtual_memory().percent
cursor = conn.cursor()
cursor.execute('INSERT INTO data (
cpu, memory) VALUES (%s, %s)', (
cpu_percent, mem_percent))
conn.commit()
time.sleep(1)
conn.close()
```
4.
使用Ajax
实现前端页面与后端的数据交互，定时获取mysql中的数据并更新
折线图
在前面的index.html模板文件中已经
使用Ajax定时获取数据并更新
折线图。
```javascript
setInterval(function() {
$.ajax({
url: '/data',
success: function(data) {
var xAxisData = [];
var
cpuData = [];
var memData = [];
for(var i = 0; i < data.length; i++) {
xAxisData.push(data[i].time);
cpuData.push(data[i].
cpu);
memData.push(data[i].memory);
}
myChart.setOption({
xAxis: {
data: xAxisData
},
series: [
{
name: '
CPU使用率',
data:
cpuData
},
{
name: '内存
使用率',
data: memData
}
]
});
}
});
}, 1000);
```
以上就是
使用Flask+mysql+html搭建
CPU内存
实时监控折线图功能的大致步骤。需要注意的是，由于采集系统
CPU和内存
使用率的Python脚本需要长时间运行，可以
使用supervisor等工具进行进程管理。
结果：
以网页形式打开：
144
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
