Flask框架：如何運用Ajax輪詢動態繪圖

来源:https://www.cnblogs.com/huaweiyun/archive/2022/11/14/16888234.html
-Advertisement-
Play Games

摘要：Ajax是非同步JavaScript和XML可用於前後端交互。 本文分享自華為雲社區《Flask框架：運用Ajax輪詢動態繪圖》，作者：LyShark。 Ajax是非同步JavaScript和XML可用於前後端交互，在之前《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毫秒的定時器，每隔一段時間則去後端取數據。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: [email protected]
-->
<!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: [email protected]
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()

運行這段代碼，然後打開控制台，則可以看到如下數據，前臺會每隔一秒向後端請求數據；

image.png

如果上方繪製可以被正確執行，那麼想要實現輪詢繪圖只需要封裝實現一個update()自定義繪圖函數，該函數內將得到的數據統一放入到數組內，並調用封裝好的display()函數，將數據繪製到前臺。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: [email protected]
-->
<!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的格式即可，運行替換後的程式，我們可以看到控制台會出現以下參數；

image.png

這就標志著接收的數據是正確的，我們來看下最終繪製效果；

image.png

當然有時候我們需要返回多個圖形，而不是一個，運用輪詢同樣可以實現，如下案例中將兩個儀錶盤合併在了一起，並通過一個介面實現了數據的輪詢，相比上方代碼變化並不大。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: [email protected]
-->
<!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: [email protected]
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()

框架運行後，在前端可以看到兩個儀錶盤分別顯示不同的參數；

image.png

點擊關註，第一時間瞭解華為雲新鮮技術~

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 線上客服系統源碼開發實戰總結：動態載入js文件實現粘貼一段js的sdk代碼，直接引入插件效果
    常見的線上客服系統中，或者是統計代碼中，粘貼一段js代碼，就能引入某個插件的效果。這個是怎麼實現的呢？ 原理非常的簡單： 對於不同的載入文件類型創建不同的節點，然後添加各自的屬性，最後扔到head 標簽裡面。 經測試，本方法相容各瀏覽器，安全、無毒、環保，是 web 開發人員工作常備代碼。 //動態 ...
  • Vue2.x下的各組件如何傳遞信息？（不使用Vuex）
    Vue2（選項式）一,父組件向子組件傳遞數據： 介紹：在引用的子組件中定義 自定義屬性 msg與user.可以通過v-bind 綁定要發送的數據。 在子組件中使用 props 接收自定義屬性msg與user. 可以直接在模板中使用。但是如果想要修改的話建議傳到data中，再進行修改。 代碼如下： 二 ...
  • vue腳手架的使用
    vue腳手架的使用 搭建vue腳手架環境 1.傻瓜式安裝node: 官網下載：https://nodejs.org/zh-cn/ 2.安裝cnpm: >: npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安裝vue最新 ...
  • 線上客服系統源碼開發實戰總結：H5 Notifications瀏覽器桌面通知
    在瀏覽器訪問網站，想在瀏覽器最新化的情況下，也能收到右下角的消息通知 這個時候就會用到H5 Notifications 具體效果可以參照演示頁面 演示頁面-唯一線上客服系統 實現代碼js function notify(title, options, callback) { // 先檢查瀏覽器是否支 ...
  • TypeScript 全面進階指南之類型篇
    TypeScript 是對 JavaScript 的補充，將 JavaScript 由動態類型、弱類型語言轉為靜態類型、強類型的語言 簡介 TypeScript 由三個部分組成： 類型：為 JavaScript 代碼添加類型與類型檢查來確保健壯性，進入學習 語法：提前使用新語法或新特性來簡化代碼，進 ...
  • 記錄--手寫$forceUpdate,vm.$destroy方法
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 vm.$forceUpdate （1）作用 迫使Vue.js實例重新渲染。註意它僅僅影響實例本身以及插入插槽內容的子組件，而不是所有子組件。 （2）實現 只需要執行watcher的update方法，就可以讓實例重新渲染。 Vue.js的每 ...
  • Vue3 企業級優雅實戰 - 組件庫框架 - 4 組件庫的 CSS 架構
    該系列已更新文章： 分享一個實用的 vite + vue3 組件庫腳手架工具，提升開發效率 開箱即用 yyg-cli 腳手架：快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
  • 線上客服系統源碼開發實戰總結：漸變色效果的實際運用效果
    css裡面有個背景色漸變色的效果，我們能拿來做什麼呢 現在就演示下，我在開發此頁面時所實際實現的樣子 演示頁面-唯一線上客服系統 實現代碼很簡單，效果還是很不錯： background: linear-gradient(90deg, #EE884C 0%, #FFBA8E 100%); 首頁里也有個 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類