使用Flask实现HTML5进度条,结合Fabric来动态显示任务进度,

要用的技术：

• 多线程
  
  思路：
  1.定义一个全局的字典对象，每一个键对应一个任务。
  2.然后基于threading.Thread编写一个类，定义一个字段用来表示当前进度百分比，然后写一个方法能获取到这个百分比
  3.访问url初始化这个类，然后起一个键名放入全局对象。
  4.访问url，通过参数获取键名从全局对象取出来，然后获取它的当前进度

from flask import Flask, render_template
from flask_jsonrpc import JSONRPC
from fabric.connection import Connection
import threading

app = Flask(__name__)
jsonrpc = JSONRPC(app, '/api')
# 定义一个全局字典。当然可以用别的。这只是介绍思路
role_stats = {}


class RoleRun(threading.Thread):
    def __init__(self, hostname=None, username=None, password=None, port=22):
        threading.Thread.__init__(self)
        self.c = Connection(host=hostname, user=username, connect_kwargs={'password': password}, port=port)
        self.cmd_list = []
        self.success = None

    def add(self, cmd_list=[]):
    	# 每一步执行成功会加多少进度
        self.js = 100 / len(cmd_list)
        self.curr = 0
        self.cmd_list += cmd_list

    def run(self):
        for cmd in self.cmd_list:
            try:
                self.c.run(cmd)
                self.curr += self.js
            except Exception as e:
                self.curr = 100
                self.success = False
        self.success = True

    def get(self):
        return {"process": self.curr, "status": self.success}

@jsonrpc.method('role.status')
def RoleStatus(*args, **kwargs):
    data = {}
    print(role_stats)
    for k in role_stats:
        data[k] = role_stats[k].get()
    return data

@jsonrpc.method('role.test')
def RoleTest(*args, **kwargs):

    for role in kwargs.get('role'):
     
        for allot in role.get('allot').split(','):
            name = role.get('role').get('name') + '-' + allot
            server = kwargs.get('servers').get(allot)
            role_stats[name] = RoleRun(server[0], server[1], server[2], server[3])
            role_stats[name].add(['sleep 10', 'sleep 20', 'sleep 30', 'sleep 20', 'sleep 20'])
            # 这里start并不会影响下面的return，因为他是在线程里跑的。
            role_stats[name].start()
    return 'haha'


if __name__ == '__main__':
    app.debug = True
    app.run(debug=True, threaded=True)

前端部分

unction updateProcess(name) {

    $.jsonRPC.request('status', {
        params: {name: name}, success: function (result) {
        	// 判断是否继续需要轮询请求进度条
            is_send = false
            for (res in result.result) {
     			// 如果发现所有的进度条都小于100了。证明线程任务还没结束，还需要继续轮询
                if (parseInt(result.result[res].process) < 100) {
                    is_send = true
                }
                layui.element.progress('bar' + res.replace(/\./g,"-"), result.result[res].process + '%');
            }
            // 继续2s请求一次接口
           if (is_send==true) {
                setTimeout(function () {
                    updateProcess(name)
                }, 2000)
            }else {
                $("#step_demo").step().goStep(5);
            }

        }, error: function (result) {
            console.log(result)

        }
    })
}