Flask入门：sqlite3 + psutil + echarts 监测CPU使用率

来源：互联网发布：沈阳办公软件培训班编辑：程序博客网时间：2024/04/27 15:33

最终展示图：

这里写图片描述

平台：win32 , pycharm, python2.7

本文主要使用分为三个部分：
1.监视器（monitor.py）: 使用python三方模块psutil，每秒获取当前系统cpu的使用情况，并存入sqlite3数据库中。

2.路由器（echart.py）:响应index.html页面的ajax，从sqlite3获取最新的一条或多条数据。

3.展示页面（index.html）：发出ajax请求，更新echarts图表

项目结构

这里写图片描述

1.监控器的实现

#!/usr/bin/env python# -*- coding: UTF-8 -*-"""version: python2.7      software: PyCharmfile: monitor.py        time: 2017/3/5 19:56"""import psutilimport sqlite3import timedb_name = 'mydb.db'def create_db():    # 连接    conn = sqlite3.connect(db_name)    c = conn.cursor()    # 创建表    c.execute('''DROP TABLE IF EXISTS cpu''')  # 删除旧表，如果存在（因为这是临时数据）    c.execute(        '''CREATE TABLE cpu (id INTEGER PRIMARY KEY AUTOINCREMENT, insert_time text,cpu1 float, cpu2 float, cpu3 float, cpu4 float)''')    # 关闭    conn.close()def save_to_db(data):    '''参数data格式：['00:01',3.5, 5.9, 0.7, 29.6]'''    # 建立连接    conn = sqlite3.connect(db_name)    c = conn.cursor()    # 插入数据    c.execute('INSERT INTO cpu(insert_time,cpu1,cpu2,cpu3,cpu4) VALUES (?,?,?,?,?)', data)    # 提交！！！    conn.commit()    # 关闭连接    conn.close()# 创建表create_db()# 通过循环，对系统进行监控while True:    # 获取系统cpu使用率（每隔1秒）    cpus = psutil.cpu_percent(interval=1, percpu=True)    # 获取系统时间（只取分:秒）    t = time.strftime('%M:%S', time.localtime())    # 保存到数据库    save_to_db((t, cpus[0], cpus[1], cpus[2], cpus[3]))    print('save a data')

运行代码：

这里写图片描述

2.路由器

#!/usr/bin/env python# -*- coding: UTF-8 -*-"""version: python2.7      software: PyCharmfile: echart.py        time: 2017/3/5 19:56"""import sqlite3from flask import Flask, request, render_template, jsonifyapp = Flask(__name__)def get_db():    db = sqlite3.connect(r'E:\Gitwork\echart\mydb.db')    db.row_factory = sqlite3.Row    return dbdef query_db(query, args=(), one=False):    db = get_db()    cur = db.execute(query, args)    # cur = db.execute("SELECT * FROM cpu WHERE id>=1")    db.commit()    rv = cur.fetchall()    db.close()    return (rv[0] if rv else None) if one else rv@app.route("/", methods=["GET"])def index():    return render_template("index.html")@app.route("/cpu", methods=["POST"])def cpu():    if request.method == "POST":        res = query_db("SELECT * FROM cpu WHERE id>=(?)", args=(int(request.form['id']) + 1,))  # 返回1条或多条数据    return jsonify(insert_time=[x[1] for x in res],                   cpu1=[x[2] for x in res],                   cpu2=[x[3] for x in res],                   cpu3=[x[4] for x in res],                   cpu4=[x[5] for x in res])  # 返回json格式数据if __name__ == "__main__":    app.run(debug=True)

3.展示页面

ECharts下载地址: http://echarts.baidu.com/

jQuery 3.1.1 官方下载地址:
https://code.jquery.com/jquery-3.1.1.js
https://code.jquery.com/jquery-3.1.1.min.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>ECharts3 Ajax</title>    <script src="{{ url_for('static', filename='jquery-3.1.1.js') }}"></script>    <script src="{{ url_for('static', filename='echarts.js') }}"></script></head><body>    <!--为ECharts准备一个具备大小（宽高）的Dom-->    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>    <script type="text/javascript">    //--- 折柱 ---    var myChart = echarts.init(document.getElementById('main'));    myChart.setOption({        title: {            text: 'CPU系统监控'        },        tooltip: {},        legend: {            data:['cpu1','cpu2','cpu3','cpu4']        },        xAxis: {            data: []        },        yAxis: {},        series: [{            name: 'cpu1',            type: 'line',            data: []        },{            name: 'cpu2',            type: 'line',            data: []        },{            name: 'cpu3',            type: 'line',            data: []        },{            name: 'cpu4',            type: 'line',            data: []        }]    });    // 六个全局变量：插入时间、cpu1、cpu2、cpu3、cpu4、 哨兵（用于POST）    var insert_time = ["","","","","","","","","",""],        cpu1 = [0,0,0,0,0,0,0,0,0,0],        cpu2 = [0,0,0,0,0,0,0,0,0,0],        cpu3 = [0,0,0,0,0,0,0,0,0,0],        cpu4 = [0,0,0,0,0,0,0,0,0,0],        lastID = 0; // 哨兵，记录上次数据表中的最后id +1（下次查询只要>=lastID）    //准备好统一的 callback 函数    var update_mychart = function (data) { //data是json格式的response对象        myChart.hideLoading(); // 隐藏加载动画        dataLength = data.insert_time.length; //取回的数据长度        lastID += dataLength; //哨兵，相应增加。        // 切片是能统一的关键！！        insert_time = insert_time.slice(dataLength).concat(data.insert_time); // 数组，先切片、再拼接        cpu1 = cpu1.slice(dataLength).concat(data.cpu1.map(parseFloat)); //注意map方法        cpu2 = cpu2.slice(dataLength).concat(data.cpu2.map(parseFloat));        cpu3 = cpu3.slice(dataLength).concat(data.cpu3.map(parseFloat));        cpu4 = cpu4.slice(dataLength).concat(data.cpu4.map(parseFloat));        // 填入数据        myChart.setOption({            xAxis: {                data: insert_time            },            series: [{                name: 'cpu1', // 根据名字对应到相应的系列                data: cpu1            },{                name: 'cpu2',                data: cpu2            },{                name: 'cpu3',                data: cpu3            },{                name: 'cpu4',                data: cpu4            }]        });        if (dataLength == 0){clearInterval(timeTicket);} //如果取回的数据长度为0,停止ajax    }    myChart.showLoading(); // 首次显示加载动画    // 异步加载数据 （首次，get，显示6个数据）    $.get('/cpu').done(update_mychart);    // 异步更新数据 （以后，定时post，取回1个数据）    var timeTicket = setInterval(function () {        $.post('/cpu',{id: lastID}).done(update_mychart);    }, 3000);    </script></body></html>

4. 运行echart.py

这里写图片描述

在浏览器中打开http://127.0.0.1:5000/

0 0