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

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

话不多说,有图有源码

1)执行效果如图:

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

{% from "common/_macro.html" import static %}


    
    
    

    
    
    


执行进度条测试.....

测试计算从1到10000000平方和结果=



    

        
执行进度...
        
    

提交

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)

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