宝塔面板创建Python项目并使用Flask框架搭建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.
当前为开发服务器,在后续开发中切换为生产环境服务器。

posted @ 2024-10-14 06:46  xiins  阅读(130)  评论(0编辑  收藏  举报