如何将前端Vue3和后端Flask App连接起来并发送数据

今天上上签

已于 2022-09-26 17:09:23 修改

阅读量4.5k

点赞数 1

分类专栏：前端项目实战文章标签： vue vue.js 前端框架前端 flask

于 2022-09-26 17:02:22 首次发布

本文链接：https://blog.csdn.net/bradyM/article/details/127055497

版权

前端项目实战专栏收录该内容

11 篇文章 4 订阅

订阅专栏

前言

我们在上两篇讲解了如何搭建一个vue项目，以及如何配置本地路由；本篇继续讲解如何将前端Vue3和后端Flask App连接起来并发送数据。

步骤一：修改flask中的app.py文件

(假设你现在已经创建好了一个基本的flask项目)

① 在你的flask项目文件夹下安装相关py包：

pip install flask-cors

② 在app.py文件中引入CORS：

from flask_cors import CORS

③ 添加两行代码：

app.config.from_object(__name__)
CORS(app, resources={r'/*': {'origins': '*'}}, supports_credentials=True)

最终我的flask代码如下(示例)：

from flask import Flask, jsonify
from flask_cors import CORS

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}}, supports_credentials=True)

# sanity check route
@app.route('/')
def index():
    return


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

步骤二：修改Vue项目代码

(假设你现在已经按照上两篇文章，创建好了一个vue项目)

① 安装axios（运行npm命令之前，确保当前路径是项目文件夹下）

npm install axios --save

② 更改vue页面中的< script>部分，如下：

<script lang="ts" setup>
  import { reactive } from 'vue'
  import axios from 'axios'  //导入axios工具

  const FPath = 'http://localhost:5000/login'  //定义你要连接到flask的路由的路径
  const mqttM = reactive({
    id: '',
    ip: '',
    port: '',
    user: '',
    psw: '',
    topic:''
  })
  const onSubmit = () => {
    console.log('submit!')
    axios.post(FPath,mqttM)  // axios发送post请求到Fpath路径，mqttM是发送的数据
    	.then(res=>{console.log(res.data)})  //将从flask收到的返回值打印到控制台
} 
  </script>

整体页面代码(示例)：

步骤三：分别启动vue项目和flask项目

在浏览器输入vue启动server的地址，并填写信息提交，在flask项目中就可以看到输出，证明前端Vue3和后端Flask App已经连接起来了
vue3前端页面提交：
flask后端接收：

特别说明：

本文所展示的是符合Element Plus官网的样例写法，用了typescript语法糖，如果你项目中没有使用该语法糖，可以参考如下两篇文章：
[1] https://blog.csdn.net/yuelizhe4774/article/details/124320679
[2] https://zhuanlan.zhihu.com/p/311510196