寶塔皮膚建立Python專案並使用Flask框架搭建api介面

xiin發表於2024-10-14
PythonFlask框架API

上傳原始碼檔案

main.py

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

app = Flask(__name__)
CORS(app)  # 允許所有來源的跨域請求


@app.route('/calculate', methods=['POST'])
def calculate():
    data = request.get_json()
    num1 = data.get('num1')
    num2 = data.get('num2')
    result = num1 + num2
    return jsonify({'result': result})


if __name__ == '__main__':
    app.run(host='0.0.0.0',port=2001)

前端的一部分（vue3）

<template>
     <div>
       <input v-model="num1" type="number" placeholder="輸入第一個數字">
       <input v-model="num2" type="number" placeholder="輸入第二個數字">
       <button @click="calculate">計算</button>
       <p>{{ result }}</p>
     </div>
   </template>

<script>
import axios from 'axios';

export default {
  name: 'HelloWorld',
  props: {
  },
  data() {
    return {
      num1: null,
      num2: null,
      result: null
    };
  },
  methods: {
    calculate() {
      axios.post('http://127.0.0.1:5000/calculate', { num1: this.num1, num2: this.num2 })
       .then(response => {
          this.result = response.data.result;
        })
       .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

寶塔皮膚專案的配置

如果用的是flask框架，寶塔皮膚會自動建立虛擬環境。

安裝依賴包

最終效果

最佳化

WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
當前為開發伺服器，在後續開發中切換為生產環境伺服器。

相關文章