实战:前端进度条显示Flask后端执行进度

前言:如果后端执行某个动作时间过长(例如:导入N多条数据),前端需要一个友好的反馈,实时知道执行进度.今天就用后端执行从1到10000000的平方和(我的机器执行时间大概4秒)来模拟演练

话不多说,有图有源码

1)执行效果如图:

2)前端代码(引用的js,css等自己网上下载)

复制代码
<!DOCTYPE html>
{% from "common/_macro.html" import static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{{static('admin/js/bootstrap/css/bootstrap.min.css')}}">

    <script src="{{static('admin/js/jQuery-2.2.0.min.js')}}"></script>
    <script src="{{static('admin/js/bootstrap/js/bootstrap.min.js')}}"></script>
    <style>
        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
        }
        #popup {
            width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            text-align: center;
            z-index: 1001;
        }
    </style>
</head>
<body>
执行进度条测试.....<br>
测试计算从1到10000000平方和结果=
<input type="text" id="cacu_value" value="">

<div id="overlay">
    <div id="popup">
        <p>执行进度...</p>
        <progress id="progressBar" value="0" max="100"></progress>
    </div>
</div>
<button type="button" class="btn btn-default" onclick="submit_query()">提交</button>

</body>
<script>
function submit_query(btn){
    var progressBar = document.getElementById('progressBar');
    var cacu_value = document.getElementById('cacu_value');
    progressBar.value =0;
    cacu_value.value=0;
    document.getElementById('overlay').style.display = 'block';

    var sitv = setInterval(function(){
        var prog_url = "/show_progress";// 进度页面
        $.getJSON(prog_url, function(res){
            progressBar.value = res;
        });
    }, 500);// 每0.5秒查询一次后台进度

    var this_url = "/process_data";// 执行页面
    $.getJSON(this_url, function(res){
        $("#cacu_value").val(res);
        clearInterval(sitv);
        document.getElementById('overlay').style.display = 'none';
    });
}
</script>
</html>

3)后端执行内容

复制代码
"""
用于与前端实现执行进度条显示过程

"""

from flask import Flask, render_template, jsonify

app = Flask(__name__)

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

global num_progress 
num_progress = 0.0

@app.route('/process_data',methods=['GET','POST'])
def process_data():
    global num_progress
    total = 0
    x = 10000000
    for i in range(x):
        y = square(i)
        total += y
        num_progress = i/10000000 * 100  
    return jsonify(str(int(total)))

def square(x):
    return int(x) ** 2
@app.route('/show_progress',methods=['GET','POST'])
def show_progress():
    str_num = str(int(num_progress))
    return jsonify(str_num)

if __name__ == '__main__':

    app.run(port=9900,debug=True)

如果对你有用,拷贝代码的同时,别忘点个小赞哈^_^

相关推荐
Mintopia4 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
Mintopia4 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
魔障阿Q9 分钟前
华为310P3模型转换及python推理
人工智能·python·深度学习·yolo·计算机视觉·华为
陌小路10 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213818 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36526 分钟前
antd 组件部分API使用方法
前端
BillKu29 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
都叫我大帅哥1 小时前
决策树:从零开始的机器学习“算命大师”修炼手册
python·机器学习