利用Vue3的axios+Python的flask實現前後端互動功能

xiin發表於2024-10-13
VueiOSPythonFlask後端

1 功能實現

1.1 功能

在網頁中輸入兩個數字後，點選計算按鈕線上計算（注意不是在瀏覽器端）獲得兩數之和。

1.2 思路

前端使用vue3的axios向伺服器傳送post請求，利用flask框架使python伺服器返回計算後的數值，賦給前端的變數，最終在瀏覽器上顯示。

2 前端部分：

2.1 html

<div>
<input v-model="num1" type="number" placeholder="輸入第一個數字">
<input v-model="num2" type="number" placeholder="輸入第二個數字">
<button @click="calculateSum">計算和</button>
<p>結果：{{ sum }}</p>
</div>
  • 這裡在input中使用了vue3的v-model屬性，作用是雙向繫結，即將輸入框中的資料分別同步到變數num1和num2中。type屬性限制只能輸入數字，placeholder屬性在輸入框中顯示提示文字，引導使用者輸入。
  • button按鈕使用了vue3的v-on:click，繫結了事件calculateSum，當滑鼠點選按鈕時觸發該事件。
  • p結果中使用了雙層花括號，用變數的值來替換，以實現計算結果的顯示。

2.2 js

<script>
   import axios from 'axios';
   //import headBanner from './banner.vue';

   export default {
     name: 'WeatherComponent',
     components: {

        //headBanner,
     },
     data() {
        return {
        num1: null,
        num2: null,
        sum: null,
        };
    },
    methods: {
            calculateSum() {
        const num1Value = parseFloat(this.num1);
        const num2Value = parseFloat(this.num2);
        axios.post('http://127.0.0.1:8081/calculate', { num1: num1Value, num2: num2Value })
            .then(response => {
            this.sum = response.data.sum;
            })
            .catch(error => {
            console.error('發生錯誤：', error);
            });
        },
    },
   };
</script>
  • Axios是一個基於Promise的http客戶端，用於在瀏覽器和node.js中傳送HTTP請求。
  • 在js程式碼中，先匯入axios庫，然後在自定義元件中分別填寫資料和方法。
  • data()是一個函式，用於返回變數的初始值。method用於填寫各種函式方法，是網頁互動的核心。
  • 這裡定義函式calculateSum()，實現傳送請求。
  • 首先把num1和num2從字串轉換成浮點數值，利用parseFloat()函式，注意填寫引數時，要在變數前面加上this.，以明確作用域（類似於物件導向）。
  • 然後利用axios.post()函式向伺服器傳送請求，這裡要填寫兩個引數，第一個引數是請求的介面地址，用單引號包裹，第二個引數是 { num1: num1Value, num2: num2Value }物件字面量，是一個物件的兩個屬性組成的鍵值對。
  • .then()用於在傳送請求之後的執行。在其中填寫response()函式，將物件的sum變數賦值為後端傳送過來的sum變數，注意請求到的變數前面要加response.data.。.catch用於捕獲和處理請求發生錯誤時的情況。

3 後端部分：

後端利用了python的flask框架，在使用flask框架之前，要先配置python的虛擬環境，否則無法安裝和執行flask框架。

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允許所有源的跨源請求，可以根據實際情況進行配置
@app.route('/calculate', methods=['POST'])
def calculate_sum():
    data = request.get_json()
    num1 = data.get('num1')
    num2 = data.get('num2')
    if num1 is not None and num2 is not None:
        sum_result = num1 + num2
        return jsonify({'sum': sum_result})
    else:
        return jsonify({'error': '無效的輸入'}), 400

if __name__ == '__main__':
    app.run(port=8081)

3.1 python虛擬環境安裝

詳見另一篇文章。

3.2 匯入模組

  • from flask import Flask, request, jsonify：匯入 Flask 框架的核心元件。Flask 用於建立應用例項，request 用於獲取請求物件，jsonify 用於將 Python 字典轉換為 JSON 格式的響應。
  • from flask_cors import CORS：匯入用於處理跨源資源共享（CORS）的模組。

3.3 建立應用例項

app = Flask(__name__)：建立一個 Flask 應用例項。__name__ 引數用於確定應用的位置，以便 Flask 能夠找到相關的資源。

3.4 配置 CORS

  • CORS(app)：啟用 CORS，允許所有源的跨源請求。如果需要更精細的控制，可以傳入引數來指定允許的源、方法等。

3.5 定義路由

  • @app.route('/calculate', methods=['POST'])：使用裝飾器定義了一個路由，路徑為 /calculate，只接受 POST 請求方法。
  • def calculate_sum():：定義了與路由關聯的處理函式。這個函式將處理傳送到 /calculate 的 POST 請求。

3.6 處理請求

  • data = request.get_json()：從請求中獲取 JSON 資料。
  • num1 = data.get('num1') 和 num2 = data.get('num2')：從 JSON 資料中獲取 num1 和 num2 的值。
  • if num1 is not None and num2 is not None:：檢查 num1 和 num2 是否都不為 None。如果是，則進行求和操作並返回結果；否則，返回錯誤資訊和 400 狀態碼。
  • sum_result = num1 + num2：計算 num1 和 num2 的和。
  • return jsonify({'sum': sum_result})：如果輸入有效，返回包含求和結果的 JSON 響應。
  • return jsonify({'error': '無效的輸入'}), 400：如果輸入無效，返回包含錯誤資訊的 JSON 響應，並帶有 400 狀態碼。

3.7 執行應用

  • if __name__ == '__main__':：確保程式碼在直接執行指令碼時才執行以下程式碼塊。
  • app.run(port=8081)：啟動 Flask 應用，監聽在 8081 埠上。

相關文章