如何使用烧瓶创建进度条？ [英] How to create a progress bar using flask?
本文介绍了如何使用烧瓶创建进度条？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
app.py
pre $ code > from flask flask Flags，render_template
app = Flask（__ name__）
$ b @ app.route（'/'）
def index（）：
return render_template（ '）
@ app.route（'/ progress'）
def ajax_index（）：
在范围内（500）：
print（％d％i）
＃我想加载一个进度条
if __name__ ==__main__：
app.run debug = True）
我使用 w3schools in my code
index.html
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js>< / script>
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js>< / script>
< script>
$（function（）{
$（＃content）。load（/ progress）;
}）;
< / script>
< / head>
< body>
< div class =container>
< h2>带标签的进度条< / h2>
< div class =progress>
< / div>
< / div>
< / body>
< / html>
有任何帮助吗？
解决方案
这是非常简单的：轮询你的API，并更新进度栏的宽度和valuenow，直到完成：
var interval = setInterval（update_progress，1000）;
function update_progress（）{
$ .get（'/ progress'）。done（function（n）{
n = n / 5; // percent value
if（n == 100）{
clearInterval（interval）;
callback（）; //用户自定义
}
$（'。progress-bar'）。animate（{'width '：n +'％'}）。attr（'aria-valuenow'，n）;
}）。fail（function（）{
clearInterval（interval）;
displaysyerror ; //用户定义
}）;
}
Just want to insert a progress bar in my html page. It should load from a for in my app.py. That's what I did so far...
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/progress')
def ajax_index():
for i in range(500):
print("%d" % i)
# I want to load this in a progress bar
if __name__ == "__main__":
app.run(debug=True)
I'm using a bootstrap progress-bar from w3schools in my code
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function () {
$("#content").load("/progress");
});
</script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:0%"></div>
</div>
</div>
</body>
</html>
Any help, please?
解决方案
this is pretty simple: poll your api and update the progress bar width and valuenow until finished:
var interval = setInterval(update_progress, 1000);
function update_progress() {
$.get('/progress').done(function(n){
n = n / 5; // percent value
if (n == 100) {
clearInterval(interval);
callback(); // user defined
}
$('.progress-bar').animate({'width': n +'%'}).attr('aria-valuenow', n);
}).fail(function() {
clearInterval(interval);
displayerror(); // user defined
});
}
这篇关于如何使用烧瓶创建进度条？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
