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

实现成果

实现思路

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标签自带前端提示