vue点击按钮给flask传参数，接收参数后执行循环函数将运行进度以text/event-stream形式返回，在前端接收进度使用el-progress显示进度条

在Vue中点击按钮向Flask发送参数，并接收后端执行的循环函数进度，可以通过使用EventSource（Server-Sent Events）来实现。下面是一个基本的实现流程：

1. 在Vue组件中，创建一个按钮，并在其点击事件中发起Ajax请求或使用WebSocket连接到Flask后端。由于题目中提到了使用`text/event-stream`，我们可以假设使用了EventSource。

2. Flask后端设置一个路由来处理客户端的连接请求。在这个路由上，后端需要能够接受前端发送的参数，并启动一个循环任务来模拟进度更新。

3. 在循环函数中，后端需要定期向客户端发送包含进度信息的数据流。格式通常遵循`text/event-stream`标准，即每次发送的数据以`data: [message]\n\n`的形式进行传输，其中`[message]`是包含进度信息的数据。

4. 在Vue组件中，使用`new EventSource(url)`来连接到后端的SSE服务，并在`message`事件的回调函数中接收进度信息，然后更新到进度条组件中。

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

**前端Vue组件示例**:

<template>
  <button @click="startProgress">开始进度</button>
  <el-progress :percentage="progress"></el-progress>
</template>

<script>
export default {
  data() {
    return {
      progress: 0,
      eventSource: null
    };
  },
  methods: {
    startProgress() {
      this.eventSource = new EventSource('/progress');
      this.eventSource.onmessage = (e) => {
        this.progress = JSON.parse(e.data).progress; // 假设后端发送的格式为 {"progress": 25}
      };
    }
  },
  beforeDestroy() {
    if (this.eventSource) {
      this.eventSource.close(); // 组件销毁前关闭EventSource连接
    }
  }
};
</script>

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

from flask import Flask, Response, json

app = Flask(__name__)

@app.route('/progress')
def progress():
    def event_stream():
        for i in range(101):
            progress_info = json.dumps({"progress": i})
            yield f"data:{progress_info}\n\n"
            time.sleep(1)  # 模拟耗时操作
    return Response(event_stream(), content_type="text/event-stream")

**相关问题--**:
1. 如何处理在Vue中与Flask后端建立EventSource连接时的跨域问题？
2. 在实际应用中，如何保证Flask后端传输数据的安全性？
3. 假如进度信息非常复杂，需要传输多个值，如何在后端组织数据以及在前端解析数据？