FastAPI 快速上手教程（MySQL + 前端 CRUD 简单的开发）

整体流程：安装Python环境 → 部署FastAPI相关依赖 → 借助小皮面板搭建MySQL数据库 → 代码实现数据库连接 → 编写增删改查4个基础接口 → 前端页面对接接口完成联调。

部署Python运行环境

前往python官网下载3.10及以上版本的安装包，安装时务必勾选Add Python to PATH，自动配置环境变量。安装结束后打开命令行工具校验，执行两条命令： python –version pip –version 两条命令都正常输出版本信息，代表环境安装成功。

新建项目文件夹，命名例如fastapi-demo，使用VS Code或者PyCharm打开这个目录。在项目终端内执行安装命令，一次性装好三个核心库： pip install fastapi uvicorn pymysql fastapi：接口开发核心框架 uvicorn：ASGI服务启动器，用来运行接口服务 pymysql：Python连接MySQL数据库驱动

依赖安装完成后，在项目目录新建3个文件，

目录结构如下：

fastapi-demo/

├── db.py # 数据库连接封装

├── main.py # 接口主逻辑

└── index.html # 测试前端页面

小皮面板启动MySQL，新建库和数据表

打开小皮面板，启动MySQL服务，默认端口3306。切换到数据库板块，点击创建数据库：

数据库名称：user_demo

账号：root

密码：root（如果自行修改过密码，需要记录下来，后续代码配置要用）

创建完成后点击管理，跳转phpMyAdmin，直接执行下方SQL语句，也可以手动建表添加测试数据：

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    age INT NOT NULL
);
INSERT INTO users (name, age) VALUES ('张三', 22), ('李四', 25), ('王五', 28);

SQL执行完毕，数据表就预置好了3条测试数据。

封装数据库连接代码

db.py 文件代码：

import pymysql
def get_conn():
    return pymysql.connect(
        host="127.0.0.1",
        port=3306,
        user="root",
        password="root",  # 修改为你自己的数据库密码
        database="user_demo",
        charset="utf8mb4",
        cursorclass=pymysql.cursors.DictCursor
    )

重点说明cursorclass=pymysql.cursors.DictCursor：查询返回的数据自动封装成字典格式，FastAPI可以直接返回JSON，不用手动做格式转换。

编写CRUD四个接口

main.py 文件代码：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from db import get_conn

app = FastAPI()

# 开启跨域，允许前端页面访问接口
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

# 请求参数校验模型
class User(BaseModel):
    name: str
    age: int

# 查询全部用户列表
@app.get("/users")
def get_users():
    conn = get_conn()
    cursor = conn.cursor()
    cursor.execute("SELECT * FROM users ORDER BY id")
    rows = cursor.fetchall()
    conn.close()
    return rows

# 新增用户
@app.post("/users")
def add_user(user: User):
    conn = get_conn()
    cursor = conn.cursor()
    cursor.execute(
        "INSERT INTO users (name, age) VALUES (%s, %s)",
        (user.name, user.age)
    )
    conn.commit()
    conn.close()
    return {"msg": "新增数据成功"}

# 根据id更新用户信息
@app.put("/users/{user_id}")
def update_user(user_id: int, user: User):
    conn = get_conn()
    cursor = conn.cursor()
    cursor.execute(
        "UPDATE users SET name=%s, age=%s WHERE id=%s",
        (user.name, user.age, user_id)
    )
    conn.commit()
    conn.close()
    return {"msg": "修改数据成功"}

# 根据id删除用户
@app.delete("/users/{user_id}")
def delete_user(user_id: int):
    conn = get_conn()
    cursor = conn.cursor()
    cursor.execute("DELETE FROM users WHERE id=%s", (user_id,))
    conn.commit()
    conn.close()
    return {"msg": "删除数据成功"}

开发注意要点：执行INSERT、UPDATE、DELETE这类修改数据的SQL，必须调用conn.commit()，否则改动不会持久化到数据库； SQL语句里的%s是参数占位符，就算只传一个参数，也要写成元组格式 (user_id,)；数据库连接使用结束后，一定要调用conn.close()释放连接。

启动服务命令，在项目终端运行： uvicorn main:app –reload 控制台输出 Uvicorn running on http://127.0.0.1:8000 代表服务启动成功。浏览器访问 http://127.0.0.1:8000/docs，FastAPI自带交互式接口文档，可以直接在线调试各个接口，不用前端页面也能验证功能。

前端页面使用fetch对接接口

index.html 和main.py放在同一个文件夹，直接双击文件就能在浏览器打开运行：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户管理Demo</title>
</head>
<body>
    <h3>用户数据列表</h3>
    <ul id="list"></ul>

    <input id="name" placeholder="请输入姓名">
    <input id="age" placeholder="请输入年龄" type="number">
    <button onclick="addUser()">添加用户</button>

    <script>
        const API_BASE = "[http://127.0.0.1:8000](http://127.0.0.1:8000)";

        // 加载全部用户
        async function loadUsers() {
            const res = await fetch(API_BASE + "/users");
            const data = await res.json();
            const listDom = document.getElementById("list");
            listDom.innerHTML = "";
            data.forEach(item => {
                const li = document.createElement("li");
                li.innerHTML = `
                    ${item.id}｜${item.name}｜${item.age}
                    <button onclick="editUser(${item.id})">编辑</button>
                    <button onclick="removeUser(${item.id})">删除</button>
                `;
                listDom.appendChild(li);
            });
        }

        // 新增用户
        async function addUser() {
            const nameVal = document.getElementById("name").value;
            const ageVal = document.getElementById("age").value;
            await fetch(API_BASE + "/users", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: nameVal, age: Number(ageVal) })
            });
            loadUsers();
        }

        // 编辑用户
        async function editUser(id) {
            const newName = prompt("输入新姓名");
            const newAge = prompt("输入新年龄");
            if (!newName || !newAge) return;
            await fetch(API_BASE + "/users/" + id, {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: newName, age: Number(newAge) })
            });
            loadUsers();
        }

        // 删除用户
        async function removeUser(id) {
            if (!confirm("确认要删除这条记录吗？")) return;
            await fetch(API_BASE + "/users/" + id, { method: "DELETE" });
            loadUsers();
        }

        // 页面加载自动拉取数据
        loadUsers();
    </script>
</body>
</html>

前端高频踩坑点：请求头必须携带 Content-Type: application/json，缺少这个头部，FastAPI无法解析请求体，直接返回422校验错误；后端一定要配置CORS跨域中间件，否则浏览器会拦截请求，抛出跨域报错；输入框获取到的值默认是字符串类型，age字段需要转成数字，不然后端int类型校验失败。

全部调试完成后，访问 http://127.0.0.1:8000/users 可以直接查看JSON数据，前端页面也能正常完成新增、查询、修改、删除操作，一套最简的前后端交互demo就完成了。