前言
我们在上两篇讲解了如何搭建一个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