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

前言

最近在尝试做一个前后端交互的效果，期望将前端的数据提交给后端python脚本处理后返回给前端做数据展示。本文主要参考[如何将前端Vue3和后端Flask App连接起来并发送数据]这篇文章并且做了进一步改进。由于我从来未使用过python本文主要用作自己的学习记录，其中难免有错误之处。(https://blog.csdn.net/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，因为原文是做一个登录界面，这里我就不做更改了，可以根据实际需要更改命名。