创建启动前端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与后端python/flask,前后端分离,相互传递参数_第1张图片

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




启动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()

运行结果

a是vue传递的参数,b是python平方运算的结果

创建启动前端vue与后端python/flask,前后端分离,相互传递参数_第2张图片

你可能感兴趣的:(vue,flask,vue.js,前端,javascript)