第2周 Day 2：前端转型AI，Flask 后端接口详解🎯

PILIPALAPENG
1 阅读5分钟

我们昨天第一次使用了Flask框架，但是作为前端，很难理解Flask是什么，以及怎么定义一个规范的接口。现在让我们探索下！

学习目标

  • 理解 Flask 后端框架的基本概念（搞定！✅）
  • 搞懂 @app.route 装饰器是什么、怎么用（搞定！✅）
  • 学会后端定义接口的标准流程和规范（搞定！✅）
  • 理解前后端接口是怎么对应的（搞定！✅）

一、Flask 是什么？

Flask 是 Python 的 Web 框架，用来写后端。

类比前端：

  • Vue/React 是前端框架，用来写页面
  • Flask 是后端框架，用来写接口

二、最简单的 Flask 程序

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello():
    return "你好，这是我的第一个 Flask 程序！"

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

运行后，访问 http://127.0.0.1:5000 就能看到返回的内容。

三、逐行拆解

3.1 导入框架

from flask import Flask

就像前端 import React from 'react'，导入一个框架来用。

3.2 创建应用实例

app = Flask(__name__)

这行代码创建了一个 Flask 应用实例，命名为 app。

  • Flask(__name__) 是调用 Flask 类的构造函数
  • __name__ 是 Python 内置变量，值是当前文件名
  • Flask 需要知道当前文件名来找静态文件、模板文件等

类比前端：

// 前端创建 Vue 应用
const app = createApp(App)

// 前端创建 Express 应用
const app = express()

都是创建一个应用实例，后续所有操作都基于这个实例。

3.3 定义路由（核心）

@app.route("/")
def hello():
    return "你好..."

这里用到了 装饰器，可能前端不熟悉，详细解释一下。

四、什么是装饰器 @app.route？

装饰器是 Python 的语法糖，写在函数定义的上面，用来"修饰"这个函数。

@app.route("/")
def hello():
    return "你好"

等价于这样的逻辑：

# 1. 先定义一个普通函数
def hello():
    return "你好"

# 2. 然后把它"注册"到 app 上，路径是 "/"
app.route("/")(hello)

@app.route("/") 做的事情：

  1. 告诉 Flask：当浏览器访问 / 这个路径时
  2. 执行下面的 hello() 函数
  3. 把函数的返回值发给浏览器

类比前端路由：

// Vue Router
const routes = [
  { path: '/', component: Home },      // 路径 / → 渲染 Home 组件
  { path: '/about', component: About } // 路径 /about → 渲染 About 组件
]

// Flask 等价的写法
@app.route('/')           # 路径 / → 执行 hello 函数
def hello():
    return "首页"

@app.route('/about')      # 路径 /about → 执行 about 函数
def about():
    return "关于页面"

五、定义一个接口的标准流程

第一步：指定路径和方法

@app.route("/chat", methods=["POST"])
  • "/chat"：接口路径，前端调 fetch('/chat')
  • methods=["POST"]：只接受 POST 请求，如果是 GET 请求会返回 405 错误

第二步：定义处理函数

def chat():
    # 这里写业务逻辑
    return "返回给前端的内容"

第三步：获取请求参数

from flask import request

def chat():
    # GET 请求的参数（URL 问号后面的）
    name = request.args.get("name")  # /chat?name=张三

    # POST 请求的 JSON 数据
    data = request.json              # { "message": "你好" }
    message = data.get("message")

    # POST 请求的表单数据
    username = request.form.get("username")

第四步：返回响应

from flask import jsonify

def chat():
    # 返回 JSON
    return jsonify({ "reply": "你好", "code": 200 })

    # 返回字符串
    return "成功"

    # 返回 HTML 页面
    return render_template("index.html")

    # 返回带状态码
    return jsonify({ "error": "参数错误" }), 400

六、完整示例：定义多个接口

from flask import Flask, request, jsonify, render_template

app = Flask(__name__)

# 接口1：返回 HTML 页面（GET 请求）
@app.route("/")
def index():
    return render_template("index.html")

# 接口2：返回 JSON 数据（GET 请求）
@app.route("/user")
def get_user():
    return jsonify({ "name": "张三", "age": 18 })

# 接口3：接收数据并返回（POST 请求）
@app.route("/chat", methods=["POST"])
def chat():
    message = request.json.get("message", "")

    # 业务逻辑...
    reply = f"你说了：{message}"

    return jsonify({ "reply": reply })

# 接口4：带路径参数
@app.route("/user/<int:user_id>")
def get_user_by_id(user_id):
    return jsonify({ "id": user_id, "name": f"用户{user_id}" })

# 启动服务器
if __name__ == "__main__":
    app.run(debug=True)

对应的前端调用：

// 接口1：打开页面
window.location.href = '/'

// 接口2：获取用户信息
fetch('/user')

// 接口3：聊天
fetch('/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message: '你好' })
})

// 接口4：获取指定用户
fetch('/user/123')

七、RESTful 接口规范

RESTful 是一种常见的接口设计风格：

方法路径含义
GET/users获取用户列表
GET/users/1获取 ID 为 1 的用户
POST/users创建一个用户
PUT/users/1更新 ID 为 1 的用户
DELETE/users/1删除 ID 为 1 的用户

对应的 Flask 写法：

@app.route("/users", methods=["GET"])
def list_users():
    return jsonify([{ "id": 1, "name": "张三" }])

@app.route("/users/<int:id>", methods=["GET"])
def get_user(id):
    return jsonify({ "id": id, "name": "张三" })

@app.route("/users", methods=["POST"])
def create_user():
    data = request.json
    return jsonify(data), 201

@app.route("/users/<int:id>", methods=["PUT"])
def update_user(id):
    data = request.json
    return jsonify({ "id": id, **data })

@app.route("/users/<int:id>", methods=["DELETE"])
def delete_user(id):
    return "", 204

八、前后端接口对应关系

┌────────────────────────────────────────────────────────────┐
│  前端                                                       │
│                                                            │
│  fetch('/chat', {                                          │
│      method: 'POST',                                       │
│      body: JSON.stringify({ message: '你好' })             │
│  })                                                        │
└──────────────────────────┬─────────────────────────────────┘
                           │
                           ▼
┌────────────────────────────────────────────────────────────┐
│  后端 Flask                                                 │
│                                                            │
│  @app.route("/chat", methods=["POST"])   ← 路径和方法匹配   │
│  def chat():                                               │
│      message = request.json.get("message")  ← 获取请求参数  │
│      return jsonify({ "reply": "..." })     ← 返回响应      │
└────────────────────────────────────────────────────────────┘

对应表：

前端后端
fetch('/chat')@app.route("/chat")
method: 'POST'methods=["POST"]
body: { message: '你好' }request.json.get("message")
data.replyjsonify({ "reply": "..." })

九、启动服务器

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

这段代码的意思：

  • if __name__ == "__main__"：只有直接运行这个文件时才执行（被 import 时不执行）
  • app.run()：启动 Flask 内置的开发服务器
  • debug=True：开启调试模式，代码改动自动重启

开发模式 vs 生产模式：

模式命令特点
开发模式app.run(debug=True)自动重启、显示详细错误信息、单线程
生产模式用 gunicorn/uwsgi性能好、多线程、稳定

开发阶段用 debug=True 就行，上线再换生产服务器。

十、知识点总结

概念是什么
FlaskPython 的 Web 框架，用来写后端
app = Flask(name)创建应用实例
@app.route装饰器，定义路由（哪个路径执行哪个函数）
request.json获取 POST 请求的 JSON 数据
request.args获取 GET 请求的 URL 参数
jsonify()返回 JSON 响应
render_template()返回 HTML 页面
methods=["POST"]指定接口接受的请求方法

记于 2026-04-10，Flask 后端接口详解。

image.png

avatar
文章
阅读
粉丝