概述
使用 Flask + Vue 开发 Web 网页系统是一种常见的前后端分离架构:Flask 作为后端提供 RESTful API 接口,Vue 作为前端构建单页面应用(SPA)。下面将提供一个详细的安装与使用范例,包括项目结构、环境搭建、接口通信、跨域处理等关键步骤。
一、项目结构规划
flask-vue-web-system/
├── backend/ # Flask 后端
│ ├── app.py # 主程序
│ ├── models.py # 数据模型(可选)
│ └── requirements.txt # Python 依赖
└── frontend/ # Vue 前端
├── public/
├── src/
│ ├── views/
│ ├── components/
│ ├── services/ # API 请求服务
│ ├── App.vue
│ └── main.js
├── package.json
└── vue.config.js # 配置代理解决跨域
二、后端:Flask 搭建 API 服务
1. 安装 Flask 并创建后端项目
mkdir flask-vue-web-system
cd flask-vue-web-system
mkdir backend
cd backend
python -m venv venv
source venv/bin/activate # Linux/Mac
# 或 venv\Scripts\activate # Windows
安装依赖:
pip install flask flask-cors
保存依赖:
pip freeze > requirements.txt
2. 编写 app.py
# backend/app.py
from flask import Flask, jsonify, request
from flask_cors import CORS
# 解决跨域问题
app = Flask(__name__)
CORS(app) # 允许前端访问(开发时)
# 模拟数据
users = [
{"id": 1, "name": "Alice", "email": "[email protected]"},
{: , : , : }
]
():
jsonify(users)
():
data = request.get_json()
new_id = (u[] u users) + users
user = {: new_id, : data[], : data[]}
users.append(user)
jsonify(user),
__name__ == :
app.run(host=, port=, debug=)


