Vue-21-利用Vue3的axios+Python的flask实现前后端交互功能

文章目录

• 1 任务需求
• 2 前端
• • 2.1 模板template
  • 2.2 JS代码script
  • 2.3 Calculate.vue(子组件)
  • 2.4 App.vue(根组件)
• 3 后端
• • 3.1 导入模块
  • 3.2 创建应用实例
  • 3.3 配置CORS
  • 3.4 定义路由
  • 3.5 处理请求
  • 3.6 main.py
• 4 附录
• • 4.1 CORS
  • • 4.1.1 全局启用CORS
    • 4.1.2 限制允许的域名（更安全）
    • 4.1.3 按路由控制（使用装饰器）
  • 4.2 参考附录

方式一:使用vue/cli脚手架CMD>vue create 项目名称方式二:使用vite创建Vue3项目注意node.js的版本要是最新的CMD>npm create vue@latest

1 任务需求

功能：在网页中输入两个数字后，点击计算按钮在线计算获得两数之和。
实现：前端使用vue3的axios向服务器发送post请求，利用flask框架使python服务器返回计算后的数值，赋给前端的变量，最终在浏览器上显示。

2 前端

CMD>vue create vue3_cal
CMD>npm install axios

2.1 模板template

<template> <div>