这是一个比较复杂的项目，需要一定的技术基础。以下是大致的步骤：
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等工具进行进程管理。
4354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
