前端动态获取后台处理进度显示在进度条上

实现成果

这里写图片描述

实现思路

https://blog.csdn.net/q1w2e3r4470/article/details/72702406
我主要是借鉴了这篇博客的思路

我来简述一下他的思路,他前端用到了ajax异步请求,一个用于获取冗长的数据,就比如我后台要跑一千次统计,是需要很长时间的,另一个是一个周期ajax,每隔一段时间就去后台访问拿数据,后台巧妙的地方是开了一个全局变量,用于存放程序运行的状态,伪代码如下

全局变量s
主函数(前端请求这个链接需要比较长的时间才能返回数据):
    s=0
    ''''
    后台处理数据
    ''''
    s=10
    ''''
    后台处理数据
    ''''
    如此重复
    最后返回数据的时候s=100

辅助函数:
    返回s的值

这是他的实现思路,就是通过全局变量给主函数插桩,告知辅助函数主函数运行到哪一步了
两个ajxa用的很巧妙,很简单的一个实现方法

它山之石可以攻玉

他的思路的问题是没有考虑到并发性,多用户下肯定是不能用同一个全局变量s的

我的一个思路

众所周知,每个用户都有一个独立的会话,那么就可以,把这个全局变量存在session里面,实现互相不干扰。
思路肯定没问题的,但是被ajax的机制坑了,ajax异步请求的时候session是不能在后台函数没有执行完成的时候更新的,这就导致辅助函数不能访问到没执行完成主函数的session的

我的第二个思路

那么session不行,我索性将全局变量改成一个map,前端两个ajax在访问后台的时候,带一个随机数过去,作为map的key,全局变量作为map的value,这样随机数的冲突是很小的,后台执行进度可以并发访问了
前端伪代码

ajax1:
    异步访问主函数
    传递一个随机数seed
    等待数据返回并显示
    杀死定时器
定时器:
    ajax2:
        异步访问辅助函数
        传递一个随机数seed
        拿到后台map中的全局变量
        更改进度条显示为全局遍历的值

使用flask框架踩过的一些坑

首先要开启flask的多线程
不然后台是单线程的,前端异步访问,后台在处理主函数的时候根本无暇顾及辅助函数

    app.run(debug=True, threaded=True)

前端的form表单,JavaScript处理完要之后要return false,不然JavaScript提交一次后台,html表单又提交一次。。。

前端form表单设置了pattern值之后,点击事件,先是JavaScript那里处理,然后才经过pattern,所以JavaScript也要正则匹配,成功就处理完return false,不成功就return true,给pattern处理,input标签自带前端提示

发布了76 篇原创文章 · 获赞 14 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览