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

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

话不多说,有图有源码

1)执行效果如图:

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

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)

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

阿桂天山

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