vue点击按钮传表名给flask然后接收text/event-stream并用el-progress显示进度条

Vue.js是一种构建用户界面的渐进式JavaScript框架，而Flask是一个用Python编写的轻量级Web应用框架。要实现点击Vue按钮传递表名给Flask后端，并通过服务器发送事件（Server-Sent Events，即SSE）的形式实时更新进度条，你可以遵循以下步骤：

1. 在Vue组件中，创建一个按钮并绑定点击事件，当按钮被点击时，通过axios或其他HTTP客户端向Flask后端发送请求，并携带表名作为参数。

2. Flask后端接收到请求后，执行相应的逻辑（比如处理数据、计算进度等），并将进度信息通过SSE的形式发送回前端。Flask可以使用`flask_sse`扩展来简化SSE的实现。

3. 在Vue组件中，使用EventSource对象连接到Flask后端提供的SSE接口，监听进度更新的消息，并使用Vue的响应式数据来更新进度条的显示。

下面是一个简化的示例代码：

**前端Vue组件示例（按钮和进度条）**:

<template>
  <div>
    <button @click="submitTableName">开始处理</button>
    <el-progress :percentage="progress"></el-progress>
  </div>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
    };
  },
  methods: {
    submitTableName() {
      const tableName = 'example'; // 假设从某个地方获取表名
      this.$axios.post('/process_table', { name: tableName })
        .then(response => {
          const eventSource = new EventSource('/progress');
          eventSource.onmessage = (e) => {
            const data = JSON.parse(e.data);
            this.progress = data.progress;
          };
        });
    },
  },
};
</script>

**后端Flask视图函数示例**:

from flask import Flask, jsonify, request
from flask_sse import sse

app = Flask(__name__)
app.config['REDIS_URL'] = 'redis://localhost:6379/0'
app.config['REDIS_PREFIX'] = 'events'

@sse.route('/progress')
def progress():
    pubsub = get_redis().pubsub()
    pubsub.subscribe(app.config['REDIS_PREFIX'] + ':progress')
    for message in pubsub.listen():
        if message['type'] == 'message':
            yield f"data: {message['data']}\n\n"

@app.route('/process_table', methods=['POST'])
def process_table():
    # 这里处理表名并更新进度
    # 例如，将进度更新写入Redis
    # publish_progress_to_redis(progress_percentage)
    return jsonify({'status': 'success'})

if __name__ == '__main__':
    app.run()

在这个示例中，当用户点击按钮后，Vue组件通过axios向Flask发送表名数据。Flask后端接收到请求后，处理数据并在适当的时候通过SSE接口发送进度信息。Vue组件监听SSE事件，并使用接收到的进度信息更新进度条的显示。