全栈开发全景：前端、后端、数据库如何协作
用餐厅比喻理解全栈
把 Web 应用想象成一个餐厅：
| 餐厅 | Web 应用 | 负责什么 | 运行在哪里 |
|---|---|---|---|
| 🍽️ 用餐区 | 前端 | 页面布局、交互、动画 | 用户浏览器 |
| 👨🍳 厨房 | 后端 | 处理请求、业务逻辑、权限 | 服务器 |
| 📦 仓库 | 数据库 | 存储数据、查询、更新 | 服务器 |
| 📋 菜单 | API | 定好”能点什么菜”的规则 | 前后端之间 |
一个完整的请求过程
用户在博客首页点击”发布文章”按钮：
1. 前端（浏览器）
"用户点击了发布按钮"
↓
2. 前端发送 POST 请求
POST /api/articles
Body: { title: "...", content: "..." }
↓
3. 后端（服务器）收到请求
"有人要发布文章，我来处理"
- 检查用户是否登录（认证）
- 检查标题是否为空（验证）
- 格式化内容
↓
4. 后端操作数据库
INSERT INTO articles (title, content, user_id)
VALUES ('...', '...', 1)
↓
5. 数据库返回结果
"文章已保存，ID 是 42"
↓
6. 后端返回响应
HTTP 201 Created
{ id: 42, title: "...", ... }
↓
7. 前端收到响应
"发布成功！"
- 跳转到文章详情页
- 显示成功提示前端：用户看到的一切
技术栈演进
纯 HTML+CSS+JS → jQuery → React/Vue → Next.js/Nuxt对于 AI 编程，推荐 Vue 3 + Vite：
- 学习曲线平缓
- 单文件组件（HTML+CSS+JS 在一起）
- 中文文档极好
- AI 支持度最高
前端核心概念
| 概念 | 大白话 | Vue 里的实现 |
|---|---|---|
| 组件 | 可复用的 UI 片段 | .vue 文件 |
| 路由 | URL → 显示哪个页面 | vue-router |
| 状态 | 数据存在哪，怎么变 | ref(), reactive() |
| Props | 父组件传数据给子组件 | defineProps() |
| 事件 | 子组件通知父组件 | emit(), @click |
| 生命周期 | 组件从创建到销毁 | onMounted() 等 |
后端：你看不到的大脑
后端做什么
接收请求 → 验证身份 → 处理逻辑 → 操作数据库 → 返回结果主流后端方案
| 方案 | 适合 | AI 开发难度 |
|---|---|---|
| Supabase（推荐） | 全栈应用 | ⭐ 极简 |
| Express (Node.js) | 自定义后端 | ⭐⭐ 简单 |
| Next.js API Routes | React 全栈 | ⭐⭐ 简单 |
| FastAPI (Python) | AI/数据分析 | ⭐⭐ 简单 |
| Spring Boot (Java) | 企业级 | ⭐⭐⭐⭐ 复杂 |
对于 AI 编程初学者，Supabase 是首选：
- 自带数据库
- 自带认证系统
- 自动生成 REST API
- 只需写前端代码
API 设计基础
// RESTful API 约定
GET /api/articles → 获取文章列表
GET /api/articles/42 → 获取 ID 为 42 的文章
POST /api/articles → 创建新文章
PUT /api/articles/42 → 更新 ID 为 42 的文章
DELETE /api/articles/42 → 删除 ID 为 42 的文章数据库：信息的组织者
关系型数据库模型
┌─────────────────┐ ┌──────────────────┐
│ users │ │ articles │
├────┬────────────┤ ├────┬─────────────┤
│ id │ username │────→│ id │ title │
│ 1 │ caesar │ │ 1 │ AI编程入门 │
│ 2 │ vibejack │ │ 2 │ Vue3实战 │
└────┴────────────┘ │ .. │ user_id: 1 │
└────┴─────────────┘
外键关联：user_id → users.idSQL 基础（让 AI 来写）
你只需要理解概念，具体 SQL 让 AI 写：
-- 查询（你描述需求，AI 写 SQL）
"帮我查所有 caesar 发布的文章"
→ SELECT * FROM articles WHERE user_id = 1;
-- 插入
"帮我在 articles 表里插入一篇文章"
→ INSERT INTO articles (title, user_id) VALUES ('新文章', 1);
-- 统计
"统计每个用户发了多少篇文章"
→ SELECT user_id, COUNT(*) FROM articles GROUP BY user_id;前后端通信的全貌
┌──────────┐ HTTP Request ┌──────────┐ SQL Query ┌──────────┐
│ 前端 │ ──────────────→ │ 后端 │ ───────────→ │ 数据库 │
│ (Vue) │ ←────────────── │ (Express │ ←─────────── │ (Postgres│
│ │ JSON Response │ /Supabase)│ Query Result│ │
└──────────┘ └──────────┘ └──────────┘数据流：
数据库 → 后端格式化 → JSON → 前端渲染 → HTML → 用户看到企业级架构简述（进阶了解）
当用户量变大（日活 10 万+），架构会变成：
CDN（加速静态资源）
↓
用户 → 负载均衡器 → 多台后端服务器
↓ ↓
缓存(Redis) 主数据库
↓
从数据库（只读）
↓
对象存储（图片/文件）这些你暂时不需要懂。AI 编程的优雅之处在于：一开始用最简单的架构，等真的需要了再扩展。
小结
你不需要同时精通前端、后端、数据库。作为 AI 编程者：
- 前端：理解组件、路由、状态
- 后端：理解 API 和请求处理流程
- 数据库：理解表和关系
- 具体实现：交给 AI
下一篇我们快速了解一下企业级开发的真实面貌——大厂的代码是怎么管理的。