提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言一、前端准备1.前端配置2.前端页面代码

二、后端准备1.Flask安装与测试2.后端代码

三.结果展示总结

前言

最近在尝试做一个前后端交互的效果，期望将前端的数据提交给后端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，因为原文是做一个登录界面，这里我就不做更改了，可以根据实际需要更改命名。 同时在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页面中写好即可