Flask+Vue3前后端分离实战
好的，下面是一个使用 Python + Flask + Vue 3 实现前后端分离的案例学习，包含关键步骤和示例代码。
前后端分离案例：Python + Flask + Vue 3
1. 项目结构
project/
├── backend/ # Flask 后端
│ ├── app.py # 主应用文件
│ ├── requirements.txt
│ └── ...
├── frontend/ # Vue 3 前端
│ ├── src/
│ │ ├── components/
│ │ ├── App.vue
│ │ └── main.js
│ ├── package.json
│ └── ...
└── README.md
2. 后端实现（Flask）
安装依赖
pip install flask flask-cors
示例代码 (app.py)
from flask import Flask, jsonify, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app) # 解决跨域问题
# 示例数据
tasks = [
{"id": 1, "title": "学习 Vue 3", "done": False},
{"id": 2, "title": "开发 Flask API", "done": True}
]
@app.route('/api/tasks', methods=['GET'])
def get_tasks():
return jsonify(tasks)
@app.route('/api/tasks', methods=['POST'])
def add_task():
new_task = request.json
new_task["id"] = len(tasks) + 1
tasks.append(new_task)
return jsonify(new_task), 201
if __name__ == '__main__':
app.run(debug=True)
3. 前端实现（Vue 3）
创建 Vue 项目
npm create vue@latest
安装 Axios
npm install axios
示例组件 (src/components/TaskList.vue)
任务列表
-
{{ task.title }} - {{ task.done ? '已完成' : '未完成' }}
http://my.tv.sohu.com/us/442310284/699341624.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MTYyNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343200.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzIwMC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343697.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzY5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343855.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzg1NS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343908.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkwOC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343858.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzg1OC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344106.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDEwNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344114.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDExNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343926.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkyNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343935.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkzNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343940.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk0MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344022.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDAyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343983.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343994.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk5NC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344076.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDA3Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344266.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDI2Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344322.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344332.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMzMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344335.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMzNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344536.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDUzNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344542.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDU0Mi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344551.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDU1MS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344618.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDYxOC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344393.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDM5My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344397.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDM5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344474.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDQ3NC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344480.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDQ4MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344642.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDY0Mi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344726.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDcyNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344657.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDY1Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344734.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDczNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344737.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDczNy5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344911.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDkxMS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345011.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTAxMS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344973.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDk3My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344783.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDc4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344886.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg4Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344983.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDk4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344889.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg4OS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344795.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDc5NS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344897.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345203.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTIwMy5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345122.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTEyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345159.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE1OS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345402.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQwMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345405.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQwNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345416.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQxNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345180.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE4MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345186.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE4Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345724.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTcyNC5zaHRtbA==.html
4. 关键配置
跨域处理（Flask）
通过 flask-cors 自动处理跨域请求：
CORS(app, resources={r"/api/*": {"origins": "*"}})
前端代理（Vue 开发环境）
在 vite.config.js 中配置代理，避免跨域问题：
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:5000',
changeOrigin: true,
}
}
}
}
http://my.tv.sohu.com/us/442310284/699341624.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MTYyNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343200.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzIwMC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343697.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzY5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343855.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzg1NS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343908.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkwOC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343858.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzg1OC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344106.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDEwNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344114.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDExNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343926.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkyNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343935.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0MzkzNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343940.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk0MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344022.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDAyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343983.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699343994.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0Mzk5NC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344076.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDA3Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344266.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDI2Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344322.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344332.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMzMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344335.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDMzNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344536.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDUzNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344542.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDU0Mi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344551.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDU1MS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344618.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDYxOC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344393.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDM5My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344397.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDM5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344474.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDQ3NC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344480.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDQ4MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344642.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDY0Mi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344726.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDcyNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344657.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDY1Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344734.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDczNC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344737.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDczNy5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344911.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDkxMS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345011.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTAxMS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344973.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDk3My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344783.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDc4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344886.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg4Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344983.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDk4My5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344889.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg4OS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344795.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDc5NS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699344897.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NDg5Ny5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345203.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTIwMy5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345122.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTEyMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345159.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE1OS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345402.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQwMi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345405.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQwNS5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345416.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTQxNi5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345180.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE4MC5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345186.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTE4Ni5zaHRtbA==.html
http://my.tv.sohu.com/us/442310284/699345724.shtml
https://tv.sohu.com/v/dXMvNDQyMzEwMjg0LzY5OTM0NTcyNC5zaHRtbA==.html
5. 运行项目
-
启动后端：
cd backend python app.py -
启动前端：
cd frontend npm run dev
6. 功能验证
- 访问
http://localhost:5173（前端默认端口） - 页面展示任务列表，支持添加新任务
- 后端实时响应并更新数据
总结
- 前后端分离优势：职责清晰，独立开发部署。
- 技术栈组合：
- Flask：轻量级 RESTful API 开发。
- Vue 3：响应式前端框架 + Composition API。
- 核心问题解决：跨域请求（CORS/代理）。
通过这个案例，你可以快速掌握前后端分离的基础开发流程！
