1. Python技术站首页
  2. Python开发

Flask框架：运用Ajax轮询动态绘图

• Python开发

Ajax是异步JavaScript和XML可用于前后端交互，在之前《Flask 框架：运用Ajax实现数据交互》简单实现了前后端交互，本章将通过Ajax轮询获取后端的数据，前台使用echart绘图库进行图形的生成与展示，后台通过render_template方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态监控内存利用率的这个功能。

首先LyShark先来演示一下前端如何运用AJAX实现交互，通过$.ajax定义ajax开始标志，并指定url,type,datetype等信息，通过setInterval设置一个1000毫秒的定时器，每隔一段时间则去后端取数据。

<!--
	# 署名权
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--设定一个定时器,每隔1000毫秒向后端发送请求-->
    <script type="text/javascript">
        $(
            function () {
                fetchData();
                setInterval(fetchData, 1000);
            }
        );
        function fetchData(){
            $.ajax({
                url:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    console.log("[lyshark.com] 获取到时间:" + recv.response[0]);
                    console.log("[lyshark.com] 获取到数据:" + recv.response[1]);
                }
            })
        }
    </script>
</body>

后端只需要根据前端需要的格式返回系统中的CPU利用率（此处模拟），并使用json.dumps({"response":[times,data]})推送到前端即可。

# 署名权
# right to sign one's name on a piece of work
# PowerBy: LyShark
# Email: me@lyshark.com
from flask import Flask,render_template,request
import json,time,random

async_mode = None

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

@app.route('/',methods=['POST','GET'])
def index():
    if request.method == "GET":
        return render_template("index.html")

    elif request.method == "POST":
        times = time.strftime("%M:%S", time.localtime())
        data = [random.randint(1,100)]
        return json.dumps({"response":[times,data]})

if __name__ == '__main__':
    app.run()

运行这段代码，然后打开控制台，则可以看到如下数据，前台会每隔一秒向后端请求数据；

Flask框架：运用Ajax轮询动态绘图

如果上方绘制可以被正确执行，那么想要实现轮询绘图只需要封装实现一个update()自定义绘图函数，该函数内将得到的数据统一放入到数组内，并调用封装好的display()函数，将数据绘制到前台。

<!--
	# 署名权
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--定义绘图区域-->
    <div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"></div>
    
    <!--调用百度的绘图库,进行图片的绘制工作.-->
    <script type="text/javascript" charset="UTF-8">
        var display = function(time,cpu) {
            var main = echarts.init(document.getElementById(("main")));
            var option = {
                xAxis: {
                    boundaryGap:false,
                    boundaryGap:false,
                    type: 'category',
                    data: time
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'line',
                    areaStyle:{},
                    data: cpu
                }]
            };
            main.setOption(option,true);
        };
    </script>
    
    <!--update()函数具体执行的任务,其主要只保留前十条数据.-->
    <script type="text/javascript" charset="UTF-8">
        // 负责对参数的解析
        var time =["","","","","","","","","",""];
        var cpu = [0,0,0,0,0,0,0,0,0,0];
        var update = function(recv){
            time.push(recv.response[0]);
            cpu.push(parseFloat(recv.response[1]));
            if(time.length >=10){
                time.shift();
                cpu.shift();
                console.log("处理后的时间数据:" + time);
                console.log("处理后的CPU数据:" + cpu);
                display(time,cpu)  // 调用绘图函数
            }
        };
    </script>
    
    <!--设定一个定时器,每隔1000毫秒向后端发送请求-->
    <script type="text/javascript">
        $(
            function () {
                fetchData();
                setInterval(fetchData, 1000);
            }
        );
        function fetchData(){
            $.ajax({
                url:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    console.log("获取到时间:" + recv.response[0]);
                    console.log("获取到数据:" + recv.response[1]);
    
                    // 传递给处理函数
                    update(recv)
                }
            })
        }
    </script>
</body>

对于后台来说，我们不需要做任何变更，因为只要我们遵循返回JSON的格式即可，运行替换后的程序，我们可以看到控制台会出现以下参数；

Flask框架：运用Ajax轮询动态绘图

这就标志着接收的数据是正确的，我们来看下最终绘制效果；

Flask框架：运用Ajax轮询动态绘图

当然有时候我们需要返回多个图形，而不是一个，运用轮询同样可以实现，如下案例中将两个仪表盘合并在了一起，并通过一个接口实现了数据的轮询，相比上方代码变化并不大。

<!--
	# 署名权
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--定义绘图区域-->
    <div id="cpuChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
    <div id="memChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>

    <!--封装方法,一次性绘制两个图形-->
    <script type="text/javascript" charset="UTF-8">
        var display = function(cpu,mem)
        {
            var cpuChart = echarts.init(document.getElementById("cpuChart"));
            var option = {
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    progress: {
                        show: true
                      },
                    detail: {formatter: '{value} %',fontSize: 12},
                    data: [{value: cpu, name: 'CPU负载'}]
                }
            ]
        };cpuChart.setOption(option, true);

            var memChart = echarts.init(document.getElementById("memChart"));
            var option = {
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    progress: {
                        show: true
                      },
                    detail: {formatter: '{value} %',fontSize: 12},
                    data: [{value: mem, name: '内存利用率'}]
                }
            ]
        };memChart.setOption(option, true);
    };
    </script>

    <!--定义轮巡-->
    <script type="text/javascript">
        $(
            function () {
                fetchData();
                setInterval(fetchData, 100);
            }
        );
        function fetchData(){
            $.ajax({
                url:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    display(recv.response[0],recv.response[1]);
                }
            })
        }
    </script>
</body>

后端部分只需要稍微小改一下，将json.dumps({"response":[cpu,mem]})返回时指定两个参数即可。

# 署名权
# right to sign one's name on a piece of work
# PowerBy: LyShark
# Email: me@lyshark.com
from flask import Flask,render_template,request
import json,time,random

async_mode = None

app = Flask(import_name=__name__,
            static_url_path='/python',   # 配置静态文件的访问url前缀
            static_folder='static',      # 配置静态文件的文件夹
            template_folder='templates') # 配置模板文件的文件夹

@app.route('/',methods=['POST','GET'])
def index():
    if request.method == "GET":
        return render_template("index.html")

    elif request.method == "POST":
        times = time.strftime("%M:%S", time.localtime())
        mem = random.randint(1,100)
        cpu = random.randint(1,100)
        return json.dumps({"response":[cpu,mem]})

if __name__ == '__main__':
    app.run()

框架运行后，在前端可以看到两个仪表盘分别显示不同的参数；

Flask框架：运用Ajax轮询动态绘图

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Flask框架：运用Ajax轮询动态绘图 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年4月2日
下一篇 2023年4月2日

相关文章

  • 驱动开发：内核使用IO/DPC定时器

    本章将继续探索驱动开发中的基础部分，定时器在内核中同样很常用，在内核中定时器可以使用两种，即IO定时器，以及DPC定时器，一般来说IO定时器是DDK中提供的一种，该定时器可以为间隔为N秒做定时，但如果要实现毫秒级别间隔，微秒级别间隔，就需要用到DPC定时器，如果是秒级定时其两者基本上无任何差异，本章将简单介绍IO/DPC这两种定时器的使用技巧。 首先来看IO…

    C++ 2023年4月18日
    00

  • 驱动开发：探索DRIVER_OBJECT驱动对象

    本章将探索驱动程序开发的基础部分，了解驱动对象DRIVER_OBJECT结构体的定义，一般来说驱动程序DriverEntry入口处都会存在这样一个驱动对象，该对象内所包含的就是当前所加载驱动自身的一些详细参数，例如驱动大小，驱动标志，驱动名，驱动节等等，每一个驱动程序都会存在这样的一个结构。 首先来看一下微软对其的定义，此处我已将重要字段进行了备注。 typ…

    C++ 2023年4月18日
    00
  • Python 封装SNMP调用接口 Python开发

    Python 封装SNMP调用接口

    PySNMP 是一个纯粹用Python实现的SNMP,用PySNMP的最抽象的API为One-line Applications,其中有两类API：同步的和非同步的,都在模块pysnmp.entity.rfc3413.oneliner.cmdgen 中实现,如下是Get方式与Walk方式的基本实现. 首先需要在系统中安装SNMP客户端,对于Linux平台来说…

    2023年4月2日
    00

  • 驱动开发：通过MDL映射实现多次通信

    在前几篇文章中LyShark通过多种方式实现了驱动程序与应用层之间的通信，这其中就包括了通过运用SystemBuf缓冲区通信，运用ReadFile读写通信，运用PIPE管道通信，以及运用ASYNC反向通信，这些通信方式在应对一收一发模式的时候效率极高，但往往我们需要实现一次性吐出多种数据，例如ARK工具中当我们枚举内核模块时，往往应用层例程中可以返回几条甚至…

    C++ 2023年4月30日
    00
  • Python 博客园备份迁移脚本 Python开发

    Python 博客园备份迁移脚本

    鉴于有些小伙伴在寻找博客园迁移到个人博客的方案，本人针对博客园实现了一个自动备份脚本，可以快速将博客园中自己的文章备份成Markdown格式的独立文件，备份后的md文件可以直接放入到hexo博客中，快速生成自己的站点，而不需要自己逐篇文章迁移，提高了备份文章的效率。 首先第一步将博客园主题替换为codinglife默认主题，第二步登录到自己的博客园后台，然后…

    2023年4月2日
    00
  • Flask 框架：运用Echarts绘制图形 Python开发

    Flask 框架：运用Echarts绘制图形

    echarts是百度推出的一款开源的基于JavaScript的可视化图表库，该开发库目前发展非常不错，且支持各类图形的绘制可定制程度高，Echarts绘图库同样可以与Flask结合，前台使用echart绘图库进行图形的生成与展示，后台则是Flask通过render_template方法返回一串JSON数据集，前台收到后将其应用到绘图库上，实现动态展示Web服…

    2023年4月2日
    00
  • Python 实现Tracert追踪TTL值 Python开发

    Python 实现Tracert追踪TTL值

    Tracert 命令跟踪路由原理是IP路由每经过一个路由节点TTL值会减一，假设TTL值=0时数据包还没有到达目标主机，那么该路由则会回复给目标主机一个数据包不可达，由此我们就可以获取到目标主机的IP地址，如下我们通过scapy构造一个路由追踪工具并实现一次追踪。 需要安装扩展包: pip install scapy 首先Scapy是如何发包与收包的，看以下…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部