网站导航
> 技术文档 > 28天0基础前端工程师完成Flask接口编写

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

网友: 技术文档 2025-07-30 13:20:13

如何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 venvsource venv/bin/activate # Windows 用 venv\\Scripts\\activate# 3) 装包pip install Flask==2.* # 14 版本是旧写法，现在写 2.* 即可

Day2　写最小应用 app.py

# app.pyfrom 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 端口被占用可改成 5001 app.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, requestfrom 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/user body: {\"name\":\"alice\",\"age\":20} \"\"\" data = request.get_json(silent=True) # silent=True 防止不是 JSON 时报 400 if 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 osUPLOAD_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.filename save_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.pyfrom 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 Flaskfrom models import dbapp = Flask(__name__)# 生产环境换成 postgresql://user:pwd@host/dbapp.config[\"SQLALCHEMY_DATABASE_URI\"] = \"sqlite:///demo.db\"app.config[\"SQLALCHEMY_TRACK_MODIFICATIONS\"] = Falsedb.init_app(app)@app.before_first_requestdef create_tables(): db.create_all()

第9天　把 create_user 写进表

from flask import request, jsonifyfrom models import db, Userfrom 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 非法\"}), 400 user = 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/\", methods=[\"GET\"])def get_user(user_id): user = User.query.get_or_404(user_id) return jsonify(user.to_dict())@app.route(\"/users/\", 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/\", 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 Flaskfrom flask_sqlalchemy import SQLAlchemyfrom 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_bp app.register_blueprint(user_bp, url_prefix=\"/api\") return app

app/routes/users.py

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

run.py

from app import create_appapp = 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 JWTManagerapp.config[\"JWT_SECRET_KEY\"] = \"dev-secret-change-me\"jwt = JWTManager(app)

app/routes/auth.py

from flask import Blueprint, request, jsonifyfrom flask_jwt_extended import create_access_token, jwt_required, get_jwt_identityfrom werkzeug.security import check_password_hash, generate_password_hashfrom 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\": \"用户名或密码错误\"}), 401 token = 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 SwaggerSwagger(app)

在路由函数里加 docstring 即可：

@bp.route(\"/users\", methods=[\"POST\"])def add_user(): \"\"\" 创建用户 --- tags: - users parameters: - in: body name: body schema: type: object required: - name - age properties: name:  type: string age:  type: integer responses: 201: description: 创建成功 \"\"\" ...

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

第21-22天　Gunicorn 本地预演

pip install gunicorngunicorn -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 /appCOPY requirements.txt .RUN pip install -r requirements.txtCOPY . .ENV FLASK_APP=run.pyCMD [\"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. 可容器化、可云部署的完整脚本

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

网络标签：

相关问题