零基础后台入门教程 —— 从 FastAPI 到前后端联调
前置要求：已掌握 Python 基础语法、已了解 Vue 基本使用
目标：理解后台是什么、能用 FastAPI 搭建服务并操作数据库完成增删改查、能用 Vue 前端调用后台接口
第一章 理解”后台”到底是什么
1.1 生活中的类比
- 餐厅模型：顾客（前端）→ 服务员（接口）→ 厨房（后台）→ 仓库（数据库）
- 你每天都在用后台：打开微信、刷抖音、点外卖，数据从哪来？
1.2 前端 vs 后端 vs 数据库
- 前端：用户看到的界面（Vue / 小程序 / App）
- 后端/后台：处理业务逻辑的服务程序，运行在服务器上
- 数据库：持久化存储数据的地方
1.3 一次请求的完整旅程
- 用户点击按钮 → 前端发出 HTTP 请求 → 后端接收并处理 → 读写数据库 → 返回结果 → 前端展示
- 画一张流程图帮助理解
1.4 什么是 API / 接口
- API = 前后端之间的”约定”
- URL + 请求方法（GET/POST/PUT/DELETE）+ 参数 + 返回值
- JSON：前后端沟通的通用语言
第二章 环境搭建
2.1 需要安装什么
- Python 3.10+（已有）
- pip install fastapi uvicorn sqlmodel
- 可选：安装 DB Browser for SQLite 可视化查看数据库
2.2 推荐的项目目录结构
my_backend/
├── main.py # 入口文件
├── models.py # 数据模型
├── database.py # 数据库配置
├── requirements.txt # 依赖清单
└── test.http # 接口测试文件（可选）2.3 第一次启动服务
- 写一个最简单的 FastAPI 程序
uvicorn main:app --reload启动- 浏览器打开
http://127.0.0.1:8000，看到返回结果 - 打开
http://127.0.0.1:8000/docs，认识自动生成的接口文档
第三章 FastAPI 核心概念（快速上手）
3.1 路由：URL 和函数的对应关系
@app.get("/")—— 定义一个 GET 接口@app.post("/")—— 定义一个 POST 接口- 路径参数：
/users/{user_id} - 查询参数：
/users?name=xxx
3.2 请求与响应
- 接收 JSON 数据：使用 Pydantic 模型定义请求体
- 返回 JSON 数据：直接 return 字典或模型对象
- 状态码的含义：200 成功 / 404 找不到 / 500 服务器出错
3.3 用 /docs 页面测试接口
- Swagger UI：不用写前端也能测试后台接口
- 动手练习：写几个简单接口并在
/docs里调用
第四章 数据库入门 —— 数据存到哪里？
4.1 为什么需要数据库
- 变量存在内存里，程序一关数据就没了
- 数据库 = 帮你持久化保存数据的工具
4.2 选择 SQLite + SQLModel
- SQLite：最简单的数据库，一个文件就是一个数据库，无需安装服务
- SQLModel：用 Python 类来描述数据库表，不用写 SQL 语句
4.3 定义数据模型（建表）
- 用 Python 类定义一张表：字段名、类型、是否可选
- 示例：定义一个
Todo待办事项表（id, title, done）
4.4 连接数据库
- 创建数据库引擎（engine）
- 创建表（create_all）
- 获取数据库会话（Session）
第五章 增删改查（CRUD）—— 后台的核心工作
这是整个教程最重要的一章，一切后台业务的本质就是 CRUD
5.1 什么是 CRUD
| 操作 | 含义 | HTTP 方法 | SQL 对应 |
|---|---|---|---|
| Create | 新增 | POST | INSERT |
| Read | 查询 | GET | SELECT |
| Update | 修改 | PUT/PATCH | UPDATE |
| Delete | 删除 | DELETE | DELETE |
5.2 Create —— 新增一条数据
- 接口：
POST /todos - 接收前端传来的 JSON → 创建模型实例 → 存入数据库 → 返回新数据
5.3 Read —— 查询数据
- 查询全部：
GET /todos→ 获取列表 - 查询单条：
GET /todos/{id}→ 根据 id 查找 - 找不到时返回 404
5.4 Update —— 修改数据
- 接口：
PUT /todos/{id} - 先查到数据 → 修改字段 → 保存到数据库 → 返回更新后的数据
5.5 Delete —— 删除数据
- 接口：
DELETE /todos/{id} - 先查到数据 → 删除 → 返回成功提示
5.6 完整代码走读
- 把增删改查四个接口的完整代码放在一起，逐行讲解
第六章 前后端联调 —— Vue 调用后台接口
6.1 跨域问题（CORS）
- 什么是跨域：浏览器的安全策略，前后端端口不同就会被拦截
- FastAPI 一行代码解决：添加 CORS 中间件
6.2 Vue 中使用 axios / fetch 调用接口
- 安装 axios：
npm install axios - GET 请求获取列表
- POST 请求新增数据
- PUT 请求修改数据
- DELETE 请求删除数据
6.3 实战：Todo 待办应用的前后端联调
- 前端 Vue 页面：输入框 + 列表 + 完成/删除按钮
- 后端 FastAPI：提供增删改查四个接口
- 完整闭环演示：前端操作 → 后端处理 → 数据库变化 → 前端更新
第七章 常见问题与调试技巧
7.1 看报错信息
- 终端里的错误日志怎么看
- 浏览器控制台的网络请求（Network 面板）
7.2 常见坑
- 端口被占用怎么办
- 接口返回 422：通常是请求参数格式不对
- 接口返回 500：后端代码报错，看终端日志
- CORS 报错：检查是否添加了跨域中间件
7.3 推荐工具
- Apifox / Postman：专业的接口测试工具
- DB Browser for SQLite：可视化查看数据库内容
- 浏览器 F12 Network 面板：查看请求详情
第八章 总结与延伸
8.1 本教程学到了什么
- 理解了前端、后端、数据库的关系
- 能用 FastAPI 搭建一个后台服务
- 能用 SQLModel 操作数据库完成增删改查
- 能实现 Vue 前端与后台的接口对接
8.2 进阶方向（了解即可）
- 用户认证：登录 / 注册 / Token 验证
- 更强大的数据库：MySQL / PostgreSQL
- 部署上线：把后台放到云服务器上
- AI + 后台：调用大模型 API，做 AI 应用的后台
附录
A. 完整项目代码参考
- 后端完整代码（main.py / models.py / database.py）
- 前端关键代码（axios 调用示例）
B. 常用命令速查
| 命令 | 作用 |
|---|---|
pip install fastapi uvicorn sqlmodel | 安装依赖 |
uvicorn main:app --reload | 启动后台服务（热重载） |
uvicorn main:app --host 0.0.0.0 --port 8000 | 指定地址和端口启动 |