使用vite+vue+flask实现一个简单的前后端交互效果

---

前言

最近在尝试做一个前后端交互的效果，期望将前端的数据提交给后端python脚本处理后返回给前端做数据展示。本文主要参考[如何将前端Vue3和后端Flask App连接起来并发送数据]这篇文章并且做了进一步改进。由于我从来未使用过python本文主要用作自己的学习记录，其中难免有错误之处。(https://blog.youkuaiyun.com/bradyM/article/details/127055497)

一、前端准备

1.前端配置

首先使用npm init vite命令新建一个vue3项目，同时安装本次项目所使用的库，包括element-plus（用作前端界面制作）、Axios（数据传输）、Router（路由）。确保这里使用安装命令时在控制台使用cd命令到项目文件夹下。这里我的项目命名为App，效果如下其中router使用需要单独配置，在src下新建router文件夹在其中新建index.js文件，做如下配置代码如下（示例）：

import { createRouter, createWebHistory } from "vue-router";  //导入路由
const routes = [
    {
        path:'/login', // 要路由到的url路径
        name:'login',
        component:()=>import('../components/login.vue'), //导入路由页面的路径
    }
];

const router = createRouter({    // 定义一个路由器
    history:createWebHistory(),
    routes
});

export default router;

这里我参考的上面的文章命名的路由是login，因为原文是做一个登录界面，这里我就不做更改了，可以根据实际需要更改命名。
同时在main.js中需要引入以上安装好的库代码如下

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index.js'  //引入定义好的路由
import axios from 'axios'

createApp(App).use(ElementPlus).use(router).mount('#app') //使用路由

2.前端页面代码

完成以上配置，这里需要写一个获取前端两个输入数字提交后端处理并返回相加结果展示的页面，login.vue文件放置位置如下

在login页面中写好即可

<template>
    <el-form v-model="mqttM" ref="mqqtRef" label-width="120px" method="post">
    <el-col :span="8">
    <el-form-item label="num1"><el-input v-model="mqttM.num1" placeholder="" type="number"></el-input></el-form-item>
    <el-form-item label="num2"><el-input v-model="mqttM.num2" placeholder="" type="number"></el-input></el-form-item>
    <el-form-item><el-button type="primary" @click="onSubmit()">提交</el-button></el-form-item>
    <el-form-item label="count"><el-input v-model="count" placeholder="" type="number"></el-input></el-form-item>

    </el-col>
    </el-form>
</template>
<script lang="ts" setup>

import { reactive, ref } from 'vue'
import axios from 'axios'
const FPath='http://localhost:5000/login'
const mqttM = reactive({
    num1:'',
    num2:'',
})
const count = ref('')
const onSubmit = () => {
    axios.post(FPath,mqttM).then(res=>{
        console.log(res.data.count)
        count.value = res.data.count
//通过axios发送post请求，将mqttM发送给后端，FPath是定义了一个常量表示服务器登录接口的URL地址。
    })
}

需要注意的是这里的FPath是后端端口地址，所以是localhost：5000.我这里前端运行的端口为5173.在App.vue文件中只需要以下代码

<template>
  <router-view/>
</template>

最后使用npm run dev命令运行
打开页面会发现是空白的,因为这里的东西都写在login页面中,手动在地址后加上/login后即可访问.效果如下

二、后端准备

1.Flask安装与测试

按照Flask中文文档在pycharm中安装即可,Flask中文文档,最终要实现一个Hello页面的效果,注意这里文档里的示例要求
但是我在这里命名为hello.py后执行教程里的
export命令总是报错,将hello.py改为默认的app.py以后却可行了.在终端运行flask run命令后点击端口确认成功即可.

2.后端代码

from flask import Flask, jsonify,request
from flask_cors import CORS
import json

# 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 jsonify({"message": "Hello, this is a CORS-enabled Flask application!"})

@app.route('/login', methods=['POST'])
def login():
    data = request.get_data()
    json_data = json.loads(data)
    print(data)
    num1 = float(json_data['num1'])
    num2 = float(json_data['num2'])
    print(num1)
    print(num2)
    count = num1 + num2
    print(count)
    return jsonify({"message": "Success","count":count})

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

其中cors是为了解决跨域问题,@app.route(‘/’) 是 Flask 中的装饰器，用于定义路由规则。当用户访问应用的根路径（即“/”）时，将会调用 index 函数,也就是这里访问5000端口将展示Hello, this is a CORS-enabled Flask application!
效果如下

而另一个装饰器 @app.route(‘/login’, methods=[‘POST’]) 定义了一个新的路由规则，这次针对的是 “/login” 路径，并且只接受 POST 方法的请求。
最后需要将count return出去便于前端接收展示.
这里前端的代码如下

 axios.post(FPath,mqttM).then(res=>{
        console.log(res.data.count)
        count.value = res.data.count

根据接收到的返回值格式将res.data.count赋值给count.value即可展示

三.结果展示

左侧是flask中打印的num1,num2,count,右侧接收count并做展示

总结

以上就是今天要讲的内容，本文仅仅简单介绍了vue3与flask实现的前后端两数求和交互,但是要实现更为复杂的数据处理想必原理也是相同的。