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

    摘要：Ajax是异步JavaScript和XML可用于前后端交互。

    本文分享自华为云社区《Flask框架：运用Ajax轮询动态绘图》，作者：LyShark。

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

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

    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js">script>
    7.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js">script>
    8. head>
    9. <body>
    10.     
    11.     <script type="text/javascript">
    12.         $(
    13.             function () {
    14.                 fetchData();
    15.                 setInterval(fetchData, 1000);
    16.             }
    17.         );
    18.         function fetchData(){
    19.             $.ajax({
    20.                 url:"/",
    21.                 type:"POST",
    22.                 dataType: 'json',
    23.                 success:function (recv) {
    24.                     console.log("[lyshark.com] 获取到时间:" + recv.response[0]);
    25.                     console.log("[lyshark.com] 获取到数据:" + recv.response[1]);
    26.                 }
    27.             })
    28.         }
    29.     script>
    30. body>

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

    1. # 署名权
    2. # right to sign one's name on a piece of work
    3. # PowerBy: LyShark
    4. # Email: me@lyshark.com
    5. from flask import Flask,render_template,request
    6. import json,time,random
    7.  
    8. async_mode = None
    9.  
    10. app = Flask(import_name=__name__,
    11.             static_url_path='/python',   # 配置静态文件的访问url前缀
    12.             static_folder='static',      # 配置静态文件的文件夹
    13.             template_folder='templates') # 配置模板文件的文件夹
    14.  
    15. @app.route('/',methods=['POST','GET'])
    16. def index():
    17.     if request.method == "GET":
    18.         return render_template("index.html")
    19.  
    20.     elif request.method == "POST":
    21.         times = time.strftime("%M:%S", time.localtime())
    22.         data = [random.randint(1,100)]
    23.         return json.dumps({"response":[times,data]})
    24.  
    25. if __name__ == '__main__':
    26.     app.run()

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

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

    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js">script>
    7.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js">script>
    8. head>
    9. <body>
    10.     
    11.     <div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;">div>
    12.     
    13.     
    14.     <script type="text/javascript" charset="UTF-8">
    15.         var display = function(time,cpu) {
    16.             var main = echarts.init(document.getElementById(("main")));
    17.             var option = {
    18.                 xAxis: {
    19.                     boundaryGap:false,
    20.                     boundaryGap:false,
    21.                     type: 'category',
    22.                     data: time
    23.                 },
    24.                 yAxis: {
    25.                     type: 'value'
    26.                 },
    27.                 series: [{
    28.                     type: 'line',
    29.                     areaStyle:{},
    30.                     data: cpu
    31.                 }]
    32.             };
    33.             main.setOption(option,true);
    34.         };
    35.     script>
    36.     
    37.     
    38.     <script type="text/javascript" charset="UTF-8">
    39.         // 负责对参数的解析
    40.         var time =["","","","","","","","","",""];
    41.         var cpu = [0,0,0,0,0,0,0,0,0,0];
    42.         var update = function(recv){
    43.             time.push(recv.response[0]);
    44.             cpu.push(parseFloat(recv.response[1]));
    45.             if(time.length >=10){
    46.                 time.shift();
    47.                 cpu.shift();
    48.                 console.log("处理后的时间数据:" + time);
    49.                 console.log("处理后的CPU数据:" + cpu);
    50.                 display(time,cpu)  // 调用绘图函数
    51.             }
    52.         };
    53.     script>
    54.     
    55.     
    56.     <script type="text/javascript">
    57.         $(
    58.             function () {
    59.                 fetchData();
    60.                 setInterval(fetchData, 1000);
    61.             }
    62.         );
    63.         function fetchData(){
    64.             $.ajax({
    65.                 url:"/",
    66.                 type:"POST",
    67.                 dataType: 'json',
    68.                 success:function (recv) {
    69.                     console.log("获取到时间:" + recv.response[0]);
    70.                     console.log("获取到数据:" + recv.response[1]);
    71.     
    72.                     // 传递给处理函数
    73.                     update(recv)
    74.                 }
    75.             })
    76.         }
    77.     script>
    78. body>

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

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

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

    2. html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js">script>
    7.     <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js">script>
    8. head>
    9. <body>
    10.     
    11.     <div id="cpuChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;">div>
    12.     <div id="memChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;">div>
    13.  
    14.     
    15.     <script type="text/javascript" charset="UTF-8">
    16.         var display = function(cpu,mem)
    17.         {
    18.             var cpuChart = echarts.init(document.getElementById("cpuChart"));
    19.             var option = {
    20.             series: [
    21.                 {
    22.                     name: 'Pressure',
    23.                     type: 'gauge',
    24.                     progress: {
    25.                         show: true
    26.                       },
    27.                     detail: {formatter: '{value} %',fontSize: 12},
    28.                     data: [{value: cpu, name: 'CPU负载'}]
    29.                 }
    30.             ]
    31.         };cpuChart.setOption(option, true);
    32.  
    33.             var memChart = echarts.init(document.getElementById("memChart"));
    34.             var option = {
    35.             series: [
    36.                 {
    37.                     name: 'Pressure',
    38.                     type: 'gauge',
    39.                     progress: {
    40.                         show: true
    41.                       },
    42.                     detail: {formatter: '{value} %',fontSize: 12},
    43.                     data: [{value: mem, name: '内存利用率'}]
    44.                 }
    45.             ]
    46.         };memChart.setOption(option, true);
    47.     };
    48.     script>
    49.  
    50.     
    51.     <script type="text/javascript">
    52.         $(
    53.             function () {
    54.                 fetchData();
    55.                 setInterval(fetchData, 100);
    56.             }
    57.         );
    58.         function fetchData(){
    59.             $.ajax({
    60.                 url:"/",
    61.                 type:"POST",
    62.                 dataType: 'json',
    63.                 success:function (recv) {
    64.                     display(recv.response[0],recv.response[1]);
    65.                 }
    66.             })
    67.         }
    68.     script>
    69. body>

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

    1. # 署名权
    2. # right to sign one's name on a piece of work
    3. # PowerBy: LyShark
    4. # Email: me@lyshark.com
    5. from flask import Flask,render_template,request
    6. import json,time,random
    7.  
    8. async_mode = None
    9.  
    10. app = Flask(import_name=__name__,
    11.             static_url_path='/python',   # 配置静态文件的访问url前缀
    12.             static_folder='static',      # 配置静态文件的文件夹
    13.             template_folder='templates') # 配置模板文件的文件夹
    14.  
    15. @app.route('/',methods=['POST','GET'])
    16. def index():
    17.     if request.method == "GET":
    18.         return render_template("index.html")
    19.  
    20.     elif request.method == "POST":
    21.         times = time.strftime("%M:%S", time.localtime())
    22.         mem = random.randint(1,100)
    23.         cpu = random.randint(1,100)
    24.         return json.dumps({"response":[cpu,mem]})
    25.  
    26. if __name__ == '__main__':
    27.     app.run()

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

    点击关注，第一时间了解华为云新鲜技术~

     

  • 相关阅读:
    面向过程 VS 面向对象
    [附源码]java毕业设计果蔬网络销售平台
    探秘C语言数组：解锁高效数据管理与多维空间编程技巧"
    使用深度神经网络预测股票价格
    paddlespeech on centos7
    编写 bzt 脚本的正确姿势
    并查集原理
    前端拿到url地址拼接的参数
    rust输入输出
    vue项目中使用vant轮播图组件(桌面端)
  • 原文地址：https://blog.csdn.net/devcloud/article/details/127842373