28天0基础前端工程师完成Flask接口编写

如何28天完成Flask从0到1编写接口供前端调用，这里进行了四个阶段供28天的一个拆解，拆成可落地的 每天任务清单，每一步都给出完整代码、逐行注释，以及“为什么要这么做”的讲解。你只要按顺序复制-粘贴即可跑通。
（假设你在 macOS / Linux / WSL，Python≥3.8 已装好）

---

🔧 阶段1：环境搭建与基础路由（1-3 天）

Day1　安装 Flask & 跑起最小应用

# 1) 创建干净目录
mkdir flask-api-demo && cd flask-api-demo# 2) 建虚拟环境（防止污染全局）
python -m venv venv
source venv/bin/activate          # Windows 用 venv\Scripts\activate# 3) 装包
pip install Flask==2.*            # 14 版本是旧写法，现在写 2.* 即可

Day2　写最小应用 app.py

# app.py
from flask import Flask, jsonifyapp = Flask(__name__)@app.route("/api/hello", methods=["GET"])
def hello():"""浏览器访问 http://127.0.0.1:5000/api/hello返回 {"message": "Hello Frontend!"}"""return jsonify({"message": "Hello Frontend!"})if __name__ == "__main__":# debug=True：代码改动自动重启；5000 端口被占用可改成 5001app.run(debug=True)

运行：

python app.py
# * Running on http://127.0.0.1:5000

浏览器打开上面地址，看到 JSON 即成功。

讲解

• @app.route 相当于给函数“贴”了一个 URL。
• jsonify 会自动加 Content-Type: application/json 头，前端 fetch 直接 response.json() 即可。

---

🧩 阶段2：请求处理与响应规范（3-7 天）

Day3　安装额外依赖 & 统一响应格式

pip install flask-cors           # 解决跨域

在 app.py 里继续：

from flask import Flask, jsonify, request
from flask_cors import CORSapp = Flask(__name__)
CORS(app)      # 一行解决跨域# ---------- 统一响应格式 ----------
def success(data=None, msg="OK"):return jsonify({"code": 0, "msg": msg, "data": data}), 200def fail(msg="Bad Request", code=400):return jsonify({"code": code, "msg": msg, "data": None}), code

Day4　GET 参数获取示例

@app.route("/api/sum", methods=["GET"])
def get_sum():"""请求示例：GET /api/sum?a=3&b=7返回：{"code":0,"data":10,"msg":"OK"}"""try:a = float(request.args.get("a"))b = float(request.args.get("b"))except (TypeError, ValueError):return fail("参数必须是数字", 400)return success(a + b)

浏览器直接访问 http://127.0.0.1:5000/api/sum?a=3&b=7 测试。

Day5　POST JSON 获取示例

@app.route("/api/user", methods=["POST"])
def create_user():"""POST /api/userbody: {"name":"alice","age":20}"""data = request.get_json(silent=True)  # silent=True 防止不是 JSON 时报 400if not data:return fail("请求体必须是 JSON", 400)name = data.get("name")age = data.get("age")if not name or not isinstance(age, int):return fail("name 缺失或 age 不是整数", 400)# 假装写库成功return success({"id": 123, "name": name, "age": age})

测试：

curl -X POST http://127.0.0.1:5000/api/user \-H "Content-Type: application/json" \-d '{"name":"alice","age":20}'

Day6　文件上传示例（Excel/图片通用）

import os
UPLOAD_FOLDER = "uploads"
os.makedirs(UPLOAD_FOLDER, exist_ok=True)@app.route("/api/upload", methods=["POST"])
def upload_file():"""前端 formData.append("file", fileInput.files[0])"""file = request.files.get("file")if not file:return fail("请选择文件", 400)filename = file.filenamesave_path = os.path.join(UPLOAD_FOLDER, filename)try:file.save(save_path)except Exception as e:return fail(f"保存失败：{e}", 500)return success({"filename": filename, "size": os.path.getsize(save_path)})

测试：

curl -F "file=@test.xlsx" http://127.0.0.1:5000/api/upload

Day7　异常捕获 + 自定义 404 / 500

# 放在所有路由之后
@app.errorhandler(404)
def not_found(e):return fail("接口不存在", 404)@app.errorhandler(500)
def server_error(e):return fail("服务器内部错误", 500)

---

🔁 与前端联调小提示

• 前端 fetch 时记得加 credentials:"include" 如需携带 cookie。
• 如果前端端口是 5173（Vite），CORS(app) 已允许所有来源；正式环境可改为 CORS(app, origins=["http://localhost:5173"]).
• 返回体统一用 {"code":0, "data":..., "msg":"OK"}，前端就能封装一个公共响应拦截器。

至此，阶段1+2 的全部知识点已落地。你可以继续在第8天接入数据库（SQLAlchemy），把 create_user 真正写进表。
下面给出「阶段3 + 阶段4」的每日任务清单（从第8天开始）

📦 阶段3：数据持久化（第8天–第14天）

第8天　安装依赖 & 初始化 SQLAlchemy

# 在阶段2的虚拟环境里继续
pip install Flask-SQLAlchemy==3.*  psycopg2-binary   # 如用 PostgreSQL
# 开发阶段先 SQLite

新建 models.py

# models.py
from flask_sqlalchemy import SQLAlchemydb = SQLAlchemy()class User(db.Model):__tablename__ = "users"id   = db.Column(db.Integer, primary_key=True)name = db.Column(db.String(80), nullable=False)age  = db.Column(db.Integer)# 把 ORM 对象 -> 字典，方便序列化def to_dict(self):return {"id": self.id, "name": self.name, "age": self.age}

修改 app.py（初始化 & 建表）

from flask import Flask
from models import dbapp = Flask(__name__)
# 生产环境换成 postgresql://user:pwd@host/db
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///demo.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
db.init_app(app)@app.before_first_request
def create_tables():db.create_all()

第9天　把 create_user 写进表

from flask import request, jsonify
from models import db, User
from app import app   # 避免循环导入，实际项目用蓝图@app.route("/users", methods=["POST"])
def add_user():data = request.get_json(silent=True) or {}name = data.get("name")age  = data.get("age")if not name or not isinstance(age, int):return jsonify({"error": "name/age 非法"}), 400user = User(name=name, age=age)db.session.add(user)db.session.commit()# 201 Created 规范return jsonify(user.to_dict()), 201

测试

curl -X POST http://127.0.0.1:5000/users \-H "Content-Type: application/json" \-d '{"name":"Alice","age":18}'

第10天　查 & 改 & 删

@app.route("/users/<int:user_id>", methods=["GET"])
def get_user(user_id):user = User.query.get_or_404(user_id)return jsonify(user.to_dict())@app.route("/users/<int:user_id>", methods=["PUT"])
def update_user(user_id):user = User.query.get_or_404(user_id)data = request.get_json(silent=True) or {}user.name = data.get("name", user.name)user.age  = data.get("age", user.age)db.session.commit()return jsonify(user.to_dict())@app.route("/users/<int:user_id>", methods=["DELETE"])
def delete_user(user_id):user = User.query.get_or_404(user_id)db.session.delete(user)db.session.commit()return "", 204   # No Content

---

🔑 阶段4：进阶功能与生产部署（第15天–第28天）

第15-16天　Blueprint 模块化

目录结构：

flask-api-demo/
├─ app/
│  ├─ __init__.py
│  ├─ models.py
│  └─ routes/
│     ├─ __init__.py
│     └─ users.py
├─ run.py
└─ requirements.txt

app/__init__.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_cors import CORSdb = SQLAlchemy()def create_app():app = Flask(__name__)app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///demo.db"db.init_app(app)CORS(app)from app.routes.users import bp as user_bpapp.register_blueprint(user_bp, url_prefix="/api")return app

app/routes/users.py

from flask import Blueprint, request, jsonify
from app.models import User, dbbp = Blueprint("users", __name__)@bp.route("/users", methods=["POST"])
def add_user():...@bp.route("/users/<int:user_id>", methods=["GET"])
def get_user(user_id):...

run.py

from app import create_app
app = create_app()if __name__ == "__main__":app.run(debug=True)

第17-18天　JWT 登录保护

pip install Flask-JWT-Extended

app/__init__.py

from flask_jwt_extended import JWTManager
app.config["JWT_SECRET_KEY"] = "dev-secret-change-me"
jwt = JWTManager(app)

app/routes/auth.py

from flask import Blueprint, request, jsonify
from flask_jwt_extended import create_access_token, jwt_required, get_jwt_identity
from werkzeug.security import check_password_hash, generate_password_hash
from app.models import User, dbauth_bp = Blueprint("auth", __name__)@auth_bp.route("/login", methods=["POST"])
def login():data = request.get_json()username, pwd = data.get("username"), data.get("password")user = User.query.filter_by(name=username).first()if not user or not check_password_hash(user.password_hash, pwd):return jsonify({"msg": "用户名或密码错误"}), 401token = create_access_token(identity=user.id)return jsonify(token=token)@auth_bp.route("/protected", methods=["GET"])
@jwt_required()
def protected():uid = get_jwt_identity()user = User.query.get(uid)return jsonify(user.to_dict())

第19-20天　自动生成 Swagger

pip install flasgger

app/__init__.py

from flasgger import Swagger
Swagger(app)

在路由函数里加 docstring 即可：

@bp.route("/users", methods=["POST"])
def add_user():"""创建用户---tags:- usersparameters:- in: bodyname: bodyschema:type: objectrequired:- name- ageproperties:name:type: stringage:type: integerresponses:201:description: 创建成功"""...

浏览器访问 http://127.0.0.1:5000/apidocs 即见 Swagger UI。

第21-22天　Gunicorn 本地预演

pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:8000 "app:create_app()"

• -w 4：4 个 worker，充分利用多核。
• Flask 自带开发服务器 仅用于调试，Gunicorn 才是生产级 WSGI。

第23-24天　Nginx 反向代理

/etc/nginx/conf.d/flask.conf

server {listen 80;server_name api.example.com;location / {proxy_pass         http://127.0.0.1:8000;proxy_set_header   Host $host;proxy_set_header   X-Real-IP $remote_addr;}location /static/ {alias /var/www/flask/static/;}
}

启动：

sudo nginx -t && sudo systemctl reload nginx

第25-26天　Docker 容器化

Dockerfile

FROM python:3.11-slimWORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txtCOPY . .
ENV FLASK_APP=run.py
CMD ["gunicorn", "-w", "4", "-b", "0.0.0.0:8000", "app:create_app()"]

.dockerignore

venv/
__pycache__/
*.db

构建 & 运行：

docker build -t flask-api .
docker run -p 8000:8000 flask-api

第27-28天　CI/CD 与云部署（可选）

• GitHub Actions → Docker Hub → 云服务器拉取镜像
• 或使用 Heroku / Render / AWS ECS 一键部署

---

✅ 交付物

至此，你拥有：

1. 全功能 RESTful API（CRUD + JWT + Swagger）
2. 工程化目录（Blueprint）
3. 可容器化、可云部署的完整脚本

拿这份代码就能直接上线！