前言:如果后端执行某个动作时间过长(例如:导入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)
如果对你有用,拷贝代码的同时,别忘点个小赞哈^_^