Vue 和 Flask 前后端分离教程（一）-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 和 Flask 前后端分离教程（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

1. 准备工作

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

2. 创建项目

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

2.1 创建前端项目

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

2.2 创建后端项目

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

创建一个名为 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)

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

3. 前后端交互

3.1 前端请求数据

在 myapp-frontend 目录下，安装 axios：npm install axios。
在 src 目录下创建一个名为 services 的新目录。

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

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

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

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

3.2 显示后端数据

打开 myapp-frontend/src/components/HelloWorld.vue 文件。
删除 <script> 标签内的 props 部分。
导入 DataService 并在 created 钩子中调用 getData 函数。修改后的 <script> 标签如下：
```
// 导入 DataService
// 导入 ref 和 onMounted
import { ref, onMounted } from 'vue';
import DataService from '../services/DataService.js';

export default {
  name: 'HelloWorld',
  setup() {
    // 初始化数据
    const message = ref('');
    const items = ref([]);

    //定义一个异步函数来获取数据
    const fetchData = async () => {
      try {
        const response = await DataService.getData();
        // 将获取的数据设置为组件的 data 属性
        message.value = response.data.message;
        items.value = response.data.items;
      }catch(error){
        console.error(error);
      }
    };

    // 在组件挂载时调用 fetchData 函数
    onMounted(fetchData);

    // 返回数据，以便在模板中使用
    return {message, items};
  },
};
```
- export default：这是一个 JavaScript 模块导出，使得其他文件可以导入和使用这个组件。
- name: 'HelloWorld'：这是组件的名称，有助于在调试和组件树中识别组件。
- setup() {}：这是 Vue 3 Composition API 的核心函数。它在组件实例创建之前运行，用于设置组件的响应式数据和逻辑。
- const message = ref('') 和 const items = ref([])：这里，我们使用 ref() 函数创建了两个响应式引用，分别用于存储从服务器获取的消息和项目列表。ref() 是 Vue 3 Composition API 的一部分，用于创建响应式数据。
- const fetchData = async () => {}：这是一个异步函数，用于从服务器获取数据。它使用 async/await 语法处理异步操作。
- const response = await DataService.getData()：此行代码调用 DataService.js 中定义的 getData() 函数，发送请求到服务器以获取数据。因为这是一个异步操作，所以使用了 await。
- message.value = response.data.message 和 items.value = response.data.items：这两行代码将从服务器获取的数据分别赋值给 message 和 items 响应式引用。
- onMounted(fetchData)：这里，我们使用 onMounted() 生命周期钩子，在组件挂载后（即插入 DOM 之后）调用 fetchData 函数。onMounted() 是 Vue 3 Composition API 的一部分，用于在特定生命周期阶段执行函数。
- return {message, items}：在 setup() 函数的最后，我们返回一个对象，包含响应式引用 message 和 items。这使得它们可以在组件的模板中使用。例如，<h1>{{ message }}</h1> 和 <li v-for="item in items" :key="item.id">{{ item.name }}</li>。

修改 <template> 标签，显示后端数据。修改后的 <template> 标签如下：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
    <ul>
      <!-- 遍历 items 数组，显示每个元素的内容 -->
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

将App.vue <template> 标签中HelloWorld的msg删除，修改后的 <template> 标签如下：
```
<template>
  <HelloWorld />
</template>
```

现在，打开两个终端，一个在myapp-backend文件夹下的命令行输入python app.py启动前端项目，另一个在myapp-frontend文件夹下的命令行输入npm run serve启动后端项目，访问 http://localhost:8080，你应该可以看到从后端获取的数据显示在页面上。

文件夹下的命令行输入npm run serve启动后端项目，访问http://localhost:8080`，你应该可以看到从后端获取的数据显示在页面上。

最后效果如下：

vue+flask 博客,Vue,Flask,flask,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-857884.html