Vite+Vue3+TS+Electron+Flask 构建桌面程序

本文将介绍如何利用 Vite、Vue 3、TypeScript、Electron 和 Flask 这一系列构建一个具有实时响应数据的基础桌面应用程序。

环境搭建

在开始之前，需要确保开发环境中安装了以下工具和软件：

• Node. js（这里我使用的是 v20.12.0）
• Visual Studio Code（用于编辑 Vite、Vue3、TS、Electron 代码）
• Python（这里我使用的是 v 3.11+）
• PyCharm（用于编辑 Flask 后端）

初始化 Electron-Vite 项目

创建一个新的 Electron-Vite 项目将作为桌面应用的基础。

npm create vite@latest

npm install
npm run dev

初始化 Flask

Flask 是一个轻量级的 Python Web 应用框架，创建一个新的 Flask 项目将作为桌面应用后端的基础。

前端代码

<script setup lang="ts">
import { ref } from 'vue';

const datas = ref<string[]>([]);

async function getData() {
  const response = await fetch('http://127.0.0.1:5000/stream_test') as Response;;
  const reader = response.body?.getReader();
  while (response.body) {
    if (reader) {
      const { done, value } = await reader.read();
      if (done) break;
      datas.value.push(new TextDecoder('utf-8').decode(value));
    }
  }
}
</script>

<template>
  <button @click="getData">开始获取数据</button>
  <div v-for="(data, index) in datas" :key="index">
    <p>{{ data }}</p>
  </div>
</template>

<style scoped></style>

后端代码

from time import sleep  
  
from flask import Flask, Response, stream_with_context  
from flask_cors import CORS
  
app = Flask(__name__)  
CORS(app)
  
@app.route('/stream_test')  
def stream_test():  
    def generate():  
        global index  
        while True:  
            index += 1  
            sleep(1)  
            print(index)  
            yield str(index)  
  
    return Response(stream_with_context(generate()), mimetype='text/plain')
  
if __name__ == '__main__':  
    app.run()

运行测试

可能出现的问题

1. 2024-05-02【未解决】：将 Flask 打包成 exe 文件作为后端服务的话，在执行业务代码的时候，可能存在 CORS 问题（虽然在代码中已处理 CORS，但可能有这么一两个业务获取数据存在问题）。