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

在本教程中，我們將學(xué)習(xí)如何使用 Vue.js（前端框架）和 Flask（后端框架）構(gòu)建一個簡單的前后端分離應(yīng)用。本教程假設(shè)你對 HTML、CSS 和 JavaScript 有基本了解。讓我們開始吧！

如果對Flask和Vue還不太熟悉，可以選擇查看博主之前的教學(xué)文章：

• Flask 基礎(chǔ)教學(xué)（一）
• Flask基礎(chǔ)教學(xué)（二）
• Vue.js基礎(chǔ)教學(xué)

1. 準(zhǔn)備工作

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. 創(chuàng)建項目

創(chuàng)建一個文件夾，用來存儲項目，例如myapp，之后的文件夾都myapp這里面創(chuàng)建。

2.1 創(chuàng)建前端項目

1. 進(jìn)入myapp文件夾，在命令行中輸入 vue create myapp-frontend，選擇Vue3。
2. 進(jìn)入項目目錄：cd myapp-frontend。
3. 運行項目：npm run serve，在瀏覽器中訪問 http://localhost:8080 查看效果。

2.2 創(chuàng)建后端項目

1. 進(jìn)入myapp文件夾，在命令行中創(chuàng)建一個新的目錄：mkdir myapp-backend。

2. 進(jìn)入項目目錄：cd myapp-backend。

3. 創(chuàng)建一個名為 app.py 的文件，內(nèi)容如下：

   # 導(dǎo)入 Flask
   from flask import Flask, jsonify
   # 導(dǎo)入 CORS
   from flask_cors import CORS
   
   # 創(chuàng)建一個 Flask 應(yīng)用實例
   app = Flask(__name__)
   # 并允許來自所有域的請求
   CORS(app)
   
   # 定義一個簡單的路由
   @app.route('/api/data', methods=['GET'])
   def get_data():
       # 創(chuàng)建一個字典作為模擬數(shù)據(jù)
       data = {
           "message": "Hello from Flask!",
           "items": [
               {"id": 1, "name": "Item 1"},
               {"id": 2, "name": "Item 2"},
               {"id": 3, "name": "Item 3"}
           ]
       }
       # 將字典轉(zhuǎn)為 JSON 并返回
       return jsonify(data)
   
   # 如果作為主程序運行，啟動應(yīng)用
   if __name__ == '__main__':
       app.run(debug=True)
   

4. 運行項目：python app.py，在瀏覽器中訪問 http://localhost:5000/api/data 查看效果。

3. 前后端交互

3.1 前端請求數(shù)據(jù)

1. 在 myapp-frontend 目錄下，安裝 axios：npm install axios。

2. 在 src 目錄下創(chuàng)建一個名為 services 的新目錄。

3. 在 services 目錄下創(chuàng)建一個名為 DataService.js的文件，內(nèi)容如下：

   // 導(dǎo)入 axios
   import axios from 'axios';
   
   // 創(chuàng)建一個 axios 實例，用于發(fā)送請求
   const apiClient = axios.create({
     // 設(shè)置后端 API 的基礎(chǔ) URL
     baseURL: 'http://localhost:5000/api',
     // 設(shè)置請求頭
     headers: {
       Accept: 'application/json',
       'Content-Type': 'application/json',
     },
   });
   
   // 定義一個用于獲取數(shù)據(jù)的函數(shù)
   export default {
     getData() {
       // 向 '/data' 路由發(fā)送 GET 請求
       return apiClient.get('/data');
     },
   };
   

**請求頭（Request Headers）**是在發(fā)送 HTTP 請求時，客戶端向服務(wù)器發(fā)送的一組鍵值對。它們提供有關(guān)請求的元數(shù)據(jù)，例如請求類型、內(nèi)容類型以及客戶端想要接收的響應(yīng)格式等。請求頭有助于服務(wù)器了解如何處理傳入的請求，并提供相應(yīng)的響應(yīng)。

在上面的代碼片段中，請求頭包含兩個鍵值對：

1. Accept: 'application/json'：這個鍵值對表示客戶端（這里是您的 Vue.js 應(yīng)用程序）希望從服務(wù)器接收 JSON 格式的數(shù)據(jù)。服務(wù)器可以根據(jù)此信息返回適當(dāng)格式的數(shù)據(jù)。此外，如果服務(wù)器無法提供 JSON 格式的數(shù)據(jù)，它還可以返回一個適當(dāng)?shù)腻e誤消息。
2. 'Content-Type': 'application/json'：這個鍵值對表示客戶端發(fā)送給服務(wù)器的數(shù)據(jù)的類型是 JSON。這有助于服務(wù)器了解如何解析請求中包含的數(shù)據(jù)，并根據(jù)需要進(jìn)行處理。

這些請求頭在 DataService.js 文件中的 axios 實例中設(shè)置，以確保與 Flask 后端服務(wù)器之間的通信遵循這些規(guī)則。當(dāng)您的應(yīng)用程序向后端發(fā)送請求時，axios 會自動包含這些請求頭。

3.2 顯示后端數(shù)據(jù)

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

2. 刪除 <script> 標(biāo)簽內(nèi)的 props 部分。

3. 導(dǎo)入 DataService 并在 created 鉤子中調(diào)用 getData 函數(shù)。修改后的 <script> 標(biāo)簽如下：

   // 導(dǎo)入 DataService
   // 導(dǎo)入 ref 和 onMounted
   import { ref, onMounted } from 'vue';
   import DataService from '../services/DataService.js';
   
   export default {
     name: 'HelloWorld',
     setup() {
       // 初始化數(shù)據(jù)
       const message = ref('');
       const items = ref([]);
   
       //定義一個異步函數(shù)來獲取數(shù)據(jù)
       const fetchData = async () => {
         try {
           const response = await DataService.getData();
           // 將獲取的數(shù)據(jù)設(shè)置為組件的 data 屬性
           message.value = response.data.message;
           items.value = response.data.items;
         }catch(error){
           console.error(error);
         }
       };
   
       // 在組件掛載時調(diào)用 fetchData 函數(shù)
       onMounted(fetchData);
   
       // 返回數(shù)據(jù)，以便在模板中使用
       return {message, items};
     },
   };
   

   • export default：這是一個 JavaScript 模塊導(dǎo)出，使得其他文件可以導(dǎo)入和使用這個組件。
   • name: 'HelloWorld'：這是組件的名稱，有助于在調(diào)試和組件樹中識別組件。
   • setup() {}：這是 Vue 3 Composition API 的核心函數(shù)。它在組件實例創(chuàng)建之前運行，用于設(shè)置組件的響應(yīng)式數(shù)據(jù)和邏輯。
   • const message = ref('') 和 const items = ref([])：這里，我們使用 ref() 函數(shù)創(chuàng)建了兩個響應(yīng)式引用，分別用于存儲從服務(wù)器獲取的消息和項目列表。ref() 是 Vue 3 Composition API 的一部分，用于創(chuàng)建響應(yīng)式數(shù)據(jù)。
   • const fetchData = async () => {}：這是一個異步函數(shù)，用于從服務(wù)器獲取數(shù)據(jù)。它使用 async/await 語法處理異步操作。
   • const response = await DataService.getData()：此行代碼調(diào)用 DataService.js 中定義的 getData() 函數(shù)，發(fā)送請求到服務(wù)器以獲取數(shù)據(jù)。因為這是一個異步操作，所以使用了 await。
   • message.value = response.data.message 和 items.value = response.data.items：這兩行代碼將從服務(wù)器獲取的數(shù)據(jù)分別賦值給 message 和 items 響應(yīng)式引用。
   • onMounted(fetchData)：這里，我們使用 onMounted() 生命周期鉤子，在組件掛載后（即插入 DOM 之后）調(diào)用 fetchData 函數(shù)。onMounted() 是 Vue 3 Composition API 的一部分，用于在特定生命周期階段執(zhí)行函數(shù)。
   • return {message, items}：在 setup() 函數(shù)的最后，我們返回一個對象，包含響應(yīng)式引用 message 和 items。這使得它們可以在組件的模板中使用。例如，<h1>{{ message }}</h1> 和 <li v-for="item in items" :key="item.id">{{ item.name }}</li>。

4. 修改 <template> 標(biāo)簽，顯示后端數(shù)據(jù)。修改后的 <template> 標(biāo)簽如下：

   <template>
     <div class="hello">
       <h1>{{ message }}</h1>
       <ul>
         <!-- 遍歷 items 數(shù)組，顯示每個元素的內(nèi)容 -->
         <li v-for="item in items" :key="item.id">{{ item.name }}</li>
       </ul>
     </div>
   </template>
   

5. 將App.vue <template> 標(biāo)簽中HelloWorld的msg刪除，修改后的 <template> 標(biāo)簽如下：

   <template>
     <HelloWorld />
   </template>
   

現(xiàn)在，打開兩個終端，一個在myapp-backend文件夾下的命令行輸入python app.py啟動前端項目，另一個在myapp-frontend文件夾下的命令行輸入npm run serve啟動后端項目，訪問 http://localhost:8080，你應(yīng)該可以看到從后端獲取的數(shù)據(jù)顯示在頁面上。

文件夾下的命令行輸入npm run serve啟動后端項目，訪問http://localhost:8080`，你應(yīng)該可以看到從后端獲取的數(shù)據(jù)顯示在頁面上。

最后效果如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-857884.html

到了這里，關(guān)于Vue 和 Flask 前后端分離教程（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！