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>