Vue 和 Flask 前后端分离教程（一）

在本教程中，我们将学习如何使用 Vue.js（前端框架）和 Flask（后端框架）构建一个简单的前后端分离应用。本教程假设你对 HTML、CSS 和 JavaScript 有基本了解。让我们开始吧！

如果对Flask和Vue还不太熟悉，可以选择查看博主之前的教学文章：

• Flask 基础教学（一）
• Flask基础教学（二）
• Vue.js基础教学

  1. 准备工作

  1. 安装 Node.js (https://nodejs.org/)，安装完成后，通过命令行运行 node -v 和 npm -v 检查是否安装成功。
  2. 安装 Vue CLI：在命令行中输入 npm install -g @vue/cli。
  3. 安装 Python (https://www.python.org/downloads/)，安装完成后，通过命令行运行 python --version 检查是否安装成功。
  4. 安装 Flask：在命令行中输入 pip install Flask。

  2. 创建项目

  创建一个文件夹，用来存储项目，例如myapp，之后的文件夹都myapp这里面创建。

  2.1 创建前端项目

  1. 进入myapp文件夹，在命令行中输入 vue create myapp-frontend，选择Vue3。
  2. 进入项目目录：cd myapp-frontend。
  3. 运行项目：npm run serve，在浏览器中访问 http://localhost:8080 查看效果。

  2.2 创建后端项目

  1. 进入myapp文件夹，在命令行中创建一个新的目录：mkdir myapp-backend。

  2. 进入项目目录：cd myapp-backend。

  3. 创建一个名为 app.py 的文件，内容如下：

     # 导入 Flask
     from flask import Flask, jsonify
     # 导入 CORS
     from flask_cors import CORS
     # 创建一个 Flask 应用实例
     app = Flask(__name__)
     # 并允许来自所有域的请求
     CORS(app)
     # 定义一个简单的路由
     @app.route('/api/data', methods=['GET'])
     def get_data():
         # 创建一个字典作为模拟数据
         data = {
             "message": "Hello from Flask!",
             "items": [
                 {"id": 1, "name": "Item 1"},
                 {"id": 2, "name": "Item 2"},
                 {"id": 3, "name": "Item 3"}
             ]
         }
         # 将字典转为 JSON 并返回
         return jsonify(data)
     # 如果作为主程序运行，启动应用
     if __name__ == '__main__':
         app.run(debug=True)
     

  4. 运行项目：python app.py，在浏览器中访问 http://localhost:5000/api/data 查看效果。

  3. 前后端交互

  3.1 前端请求数据

  1. 在 myapp-frontend 目录下，安装 axios：npm install axios。

  2. 在 src 目录下创建一个名为 services 的新目录。

  3. 在 services 目录下创建一个名为 DataService.js的文件，内容如下：

     // 导入 axios
     import axios from 'axios';
     // 创建一个 axios 实例，用于发送请求
     const apiClient = axios.create({
       // 设置后端 API 的基础 URL
       baseURL: 'http://localhost:5000/api',
       // 设置请求头
       headers: {
         Accept: 'application/json',
         'Content-Type': 'application/json',
       },
     });
     // 定义一个用于获取数据的函数
     export default {
       getData() {
         // 向 '/data' 路由发送 GET 请求
         return apiClient.get('/data');
       },
     };
     

  **请求头（Request Headers）**是在发送 HTTP 请求时，客户端向服务器发送的一组键值对。它们提供有关请求的元数据，例如请求类型、内容类型以及客户端想要接收的响应格式等。请求头有助于服务器了解如何处理传入的请求，并提供相应的响应。

  在上面的代码片段中，请求头包含两个键值对：

  1. Accept: 'application/json'：这个键值对表示客户端（这里是您的 Vue.js 应用程序）希望从服务器接收 JSON 格式的数据。服务器可以根据此信息返回适当格式的数据。此外，如果服务器无法提供 JSON 格式的数据，它还可以返回一个适当的错误消息。
  2. 'Content-Type': 'application/json'：这个键值对表示客户端发送给服务器的数据的类型是 JSON。这有助于服务器了解如何解析请求中包含的数据，并根据需要进行处理。

  这些请求头在 DataService.js 文件中的 axios 实例中设置，以确保与 Flask 后端服务器之间的通信遵循这些规则。当您的应用程序向后端发送请求时，axios 会自动包含这些请求头。

  3.2 显示后端数据

  1. 打开 myapp-frontend/src/components/HelloWorld.vue 文件。

  2. 删除