基于脚本进度的动态进度条?

时间:2017-06-01 23:25:49

标签: javascript python html json webapp2

我有一个使用webapp2框架的Google App Engine应用程序,它与MySQL数据库交互。应用程序的用户可以上传数据。在上传过程中,我想显示一个进度条,因为它可能需要几分钟 基于我在其他主题中看到的内容(主要是:this topicthis one),我正在研究JSON / Javascript解决方案,这对我来说都是新手。

如果我传递一个随机数,进度条本身就会起作用。但是,我无法弄清楚如何从Python脚本中“加载”更改的值。

这是HTML / CSS / Javascript:

HTML:
<div id="myProgress">
    <div id="myBar"</div>
</div>  

CSS:
#myProgress {width: 300px;
height: 30px;
background-color: #ddd;
}
#myBar {width: 1%;
height: 30px;
background-color: #4CAF50;
}   

Javascript:     
<script type="text/javascript">
function move() {
    var elem = document.getElementById("myBar");   
    var width = 1;
    var id = setInterval(frame, 1000);
    function frame() {
        if (width >= 100) {
            clearInterval(id);
        } 
        else {
            //var randomnumber = Math.floor(Math.random() * 100); --> works
            var randomnumber = function update_values() {
                $SCRIPT_ROOT = {{ script_root }};
                $.getJSON($SCRIPT_ROOT+"/uploading",
                    function(data) {
                        $("#width").text(data.width+" %")
                    });
            } ; --> this is wrong I assume
            var width = randomnumber; 
            elem.style.width = width + '%'; 
        }
    }
}
window.onload=move();   
</script>

进展来自Python中的for循环,它嵌入在加载页面的脚本中。脚本完成一个活动后,我希望计数器的结果作为宽度传递给进度条。对于静态变量,我使用常规的Jinja方式。

class UploadingpageHandler(webapp2.RequestHandler):
def get(self):
    activities_list = [1,2,3,4,5,6,7,8,9,10]
    counter = 0
    script_root = 'localhost:10080'

    for activity in activities_list:
        counter = counter + 10
        upload.do_stuff_in_some_function_with_MySQL()   
        obj = {
        'width': counter
        }
        self.response.headers['Content-Type'] = 'application/json' --> this
        self.response.out.write(json.dumps(obj)) --> and this is wrong I assume

    template_vars = {
    'script_root': script_root
    }
    template = jinja_environment.get_template('uploading.html')
    self.response.out.write(template.render(template_vars))

如何更改脚本以使其正常工作?或者有更好的方法来解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

您需要存储&#34;活动的进度&#34;在你的功能之外的某个地方。

一个hacky&#34;解决方案&#34;将它存储到某种缓存解决方案,如memcached或redis,并带有某种时间戳/签名,以便您可以检索它(并使用cron作业类型的东西使旧条目无效)。

或者你可以将你的任务与Celery之类的东西完全同步,但我怀疑你可以在Google App Engine上做到这一点。