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

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. 删除 <script> 标签内的 props 部分。

3. 导入 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>。

4. 修改 <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>
   

5. 将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`，你应该可以看到从后端获取的数据显示在页面上。

最后效果如下：