Flask 和 Vue.js 都是流行的开源技术，分别用于构建后端和前端。将 Flask 用作后端 API 服务器，Vue.js 用作前端框架，可以实现一个典型的前后端分离的架构。以下是实现这一架构的基本步骤：

1. 环境准备

确保你已经安装了 Python 和 Node.js，它们是运行 Flask 和 Vue.js 项目的基础。

2. 创建 Flask 后端

a. 初始化 Flask 应用

在你的工作目录中创建一个新的 Python 项目，并初始化 Flask 应用。

mkdir flask_vue_project
cd flask_vue_project
python -m venv venv
source venv/bin/activate  # 在 Windows 上使用 venv\Scripts\activate
pip install Flask

创建一个名为 app.py 的文件，并写入以下代码：

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {"message": "Hello from Flask!"}
    return jsonify(data)

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

b. 运行 Flask 应用

在终端中运行以下命令来启动 Flask 服务器：

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

3. 创建 Vue 前端

a. 初始化 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目。

npm install -g @vue/cli
vue create vue_frontend
cd vue_frontend

b. 安装 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 node.js 中进行 HTTP 请求。

npm install axios

c. 使用 Axios 发送请求

在你的 Vue 项目中，编辑 src/components/HelloWorld.vue 文件，添加 Axios 调用：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    axios.get('http://localhost:5000/api/data')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

4. 跨域问题

由于 Flask 和 Vue 运行在不同的端口上，你可能会遇到跨域资源共享（CORS）问题。为了解决这个问题，你需要在 Flask 应用中添加 CORS 支持：

pip install flask-cors

然后在 app.py 中添加以下代码：

from flask_cors import CORS

app = Flask(__name__)
CORS(app)

5. 运行和测试

  • 确保 Flask 应用正在运行。
  • 在另一个终端窗口中，运行 Vue 应用：
npm run serve

现在，当你访问 Vue 应用时，它将通过 Axios 向后端 Flask 应用发送请求，并显示从 Flask 接收到的数据。

这样，你就成功地使用 Flask 和 Vue.js 实现了一个前后端分离的应用。

参考

Flask+VUE 实现页面增删改查显示开发+测试（图文教程附源码）