创建启动前端vue与后端python/flask，前后端分离，相互传递参数

创建启动vue

确保你已经安装了Node.js和npm

安装vue
npm install -g @vue/cli

创建vue项目：
vue create my-project
cd my-project

启动vue
npm run serve

如果安装vue报错：管理员权限模式打开powershell

Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。

安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows

PS C:\WINDOWS\system32> C:\Windows\System32\WindowsPowerShell\v1.0\powershell.exe -Command "Set-ExecutionPolicy RemoteSigned"
>>
PS C:\WINDOWS\system32> Set-ExecutionPolicy RemoteSigned
>>

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”): y
PS C:\WINDOWS\system32>

App.vue里写vue代码

vue代码: 需要更改requestUrl 对应的 ip:端口/接口

<template>
  <div>
    <button @click="sendTestRequest">Send Test Request</button>
    <p  v-if="response">{{ response }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      response: ''
    };
  },
  methods: {
    sendTestRequest() {
      const requestUrl = 'http://127.0.0.1:5000/test';
      const requestData = { a: 12 };

      fetch(requestUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(requestData)
      })
        .then(response => response.json())
        .then(data => {
          this.response = JSON.stringify(data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

启动python/flask

python main.py

from flask import Flask, request
from flask_cors import CORS
import json
import math
app = Flask(__name__)
CORS(app)

@app.route('/')
def login():
    return "hello"

@app.route('/test', methods=['POST'])
def test():
    data = request.json  # 接收通过POST请求发送的JSON数据
    a = data['a']  # 获取参数a的值
    print(a)
    b = math.pow(a, 2)  # 设置参数b的值
    response = {
        "a": a,
        "b": b
    }
    return response  # 返回包含两个数据的JSON字符串

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