3.1 技术基础扫盲

开一家"餐厅"需要什么？

你可能听说过"前端"、"后端"、"数据库"这些词，但总觉得模模糊糊的。别急，我用一个你每天都在经历的事情来解释——去餐厅吃饭。

想象你要开一家餐厅。客人进来看到的是什么？菜单、装修、服务员、桌椅——这些是你能看到、能摸到的东西。在互联网的世界里，这就是前端。客人点完单，菜单传到后厨，厨师做菜——后厨里发生的一切客人看不到，但没有后厨餐厅就开不了。这就是后端。餐厅每天要进货，食材得有仓库分门别类放好，需要时取出来。这就是数据库。

  👤 用户（客人）
      │ 打开浏览器（走进餐厅）
      ▼
  🍽️ 前端 Frontend
  │  HTML（菜单）+ CSS（装修）+ JS（服务员动作）
  │  用户看到的一切：按钮、图片、文字、动画
      │ 发送请求（服务员传单给后厨）
      ▼
  👨‍🍳 后端 Backend
  │  接单 → 验证身份 → 处理逻辑 → 调用数据
  │  用户看不到的业务规则和安全控制
      │ 读写数据（厨师从仓库拿食材）
      ▼
  📦 数据库 Database
  │  存储用户信息、订单记录、商品数据
  │  像仓库一样分类存放，随取随用

记住这三个词：前端 = 餐厅前厅，后端 = 厨房，数据库 = 仓库。

系统架构全景图

前端：客人看到的一切

前端就是用户打开你的网站或 App 时，屏幕上呈现的所有东西。它靠三个"语言"撑起来：

HTML——骨架。决定了页面上有什么内容，就像盖房子先搭框架。<h1> 是标题，<p> 是段落，<button> 是按钮。

CSS——衣服。决定了这些东西长什么样——颜色、大小、间距、圆角。同样一个按钮，CSS 可以让它变成红色圆角的，也可以变成蓝色方角的。

JavaScript——肌肉和大脑。让页面"活"起来。点击按钮弹出对话框、滚动加载更多内容、输入时实时检查——都是 JS 干的。没有它，网页就是一张静态海报。

下面这个例子，点按钮后文字会变：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding-top: 80px; }
    button { background: #ff6b35; color: white; border: none;
             padding: 12px 24px; border-radius: 8px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>你好，世界！</h1>
  <p id="msg">还没点呢...</p>
  <button onclick="changeText()">点我试试</button>
  <script>
    function changeText() {
      document.getElementById('msg').innerText = '🎉 你写出了第一行 JavaScript！';
    }
  </script>
</body>
</html>

保存成 .html 文件用浏览器打开，点一下按钮试试——这就是前端三件套配合工作的效果。

后端：厨房里的秘密

后端是用户看不到的逻辑。它通常做三件事：

处理业务逻辑：电商下单后计算价格、检查库存、扣优惠券、生成订单号
提供 API 接口：前端通过"接口"向后端要数据。就像你对服务员说"来一份红烧肉"
安全控制：谁能看什么数据、能做什么操作，都由后端说了算

请求/响应：一来一回

前端（客人）                    后端（厨房）
   │── "我要红烧肉" (Request) ──→ │
   │                              │ 处理中...
   │←── "红烧肉好了" (Response) ──│

REST API：标准化的点菜方式

REST API 用 HTTP 动词表示你想做什么：

动作	HTTP 方法	例子
查看	GET	`GET /api/users` 获取用户列表
创建	POST	`POST /api/users` 新建用户
修改	PUT	`PUT /api/users/123` 更新用户
删除	DELETE	`DELETE /api/users/123` 删除用户

就像餐厅的标准化菜单——每道菜有固定编号和做法，不管谁做出来味道都一样。常见后端语言有 Python、Node.js（JavaScript）、Java、Go。AI 编程最常用 Python 和 Node.js。

数据库：仓库管理大师

数据库帮你"记住一切"——用户信息、商品数据、订单记录，几乎所有需要持久保存的东西都在这里。

SQL vs NoSQL

关系型数据库（SQL）——MySQL、PostgreSQL，像 Excel 表格：

┌────┬──────┬─────────────────┬──────┐
│ ID │ 姓名 │ 邮箱            │ 年龄 │
├────┼──────┼─────────────────┼──────┤
│ 1  │ 张三 │ zhangsan@qq.com │ 25   │
│ 2  │ 李四 │ lisi@163.com    │ 30   │
└────┴──────┴─────────────────┴──────┘

每行是一条记录，每列是一个字段。多个表通过 ID 关联。查询用 SQL 语言：

SELECT * FROM users WHERE age > 25;

非关系型数据库（NoSQL）——MongoDB，像 JSON 文件，更灵活：

{ "name": "张三", "email": "zhangsan@qq.com", "hobbies": ["编程", "跑步"] }

SQL 像严整的表格，每条数据格式一样；NoSQL 更自由，每条数据可以有不同的字段。

新手建议：直接用 Supabase（基于 PostgreSQL）或 Firebase（基于 NoSQL），封装好了复杂操作，不需要学 SQL 也能上手。

用户登录：永远不要自己造轮子

登录的学名叫"认证"（Authentication）。它要处理的事情极多：密码哈希存储、验证邮件、忘记密码重置、第三方登录、Token 管理、防暴力破解、防 CSRF/XSS 攻击……每一个环节都有安全漏洞。

所以，千万不要自己写登录系统。 用现成的认证服务：

Supabase Auth：和 Supabase 数据库无缝集成，免费额度够个人项目用
NextAuth.js / Auth.js：Next.js 最佳搭档，内置几十种第三方登录
Clerk：UI 最漂亮，几乎零代码集成

OAuth 是什么？"用 Google 登录"的原理

用户点击"用 Google 登录"
跳转到 Google 页面确认授权
Google 发一个"通行证"（Token）回你的网站
你的网站拿通行证获取用户基本信息

整个过程用户从未把 Google 密码给你——这就是 OAuth 的精妙之处。

它们是怎么一起工作的？

以"用户点赞"为例，走一遍完整流程：

① 用户点击 "👍 点赞" 按钮（前端交互）
      │
② JS 捕获点击，发送请求：POST /api/posts/123/like
   请求头带上 Token 证明身份（前端 → 后端）
      │
③ 后端接收请求：
   - 验证 Token → 用户是谁？
   - 检查规则 → 是否已点过赞？
   - 写入数据库 → INSERT INTO likes (user_id, post_id)
      │
④ 数据库返回结果（数据库 → 后端）
      │
⑤ 后端返回响应：{ "success": true, "likeCount": 42 }
   （后端 → 前端）
      │
⑥ JS 收到响应，更新页面：按钮变"👍 已点赞"，数字 41→42
   ✅ 完成！

整个过程不到 1 秒。当你用 AI 写代码时，需要知道"点赞"涉及前端交互、网络请求、后端逻辑、数据库操作四个层面，才能给 AI 正确的指令。

常见的技术栈组合

"技术栈"就是你选的一整套工具组合，就像做菜选食材——中餐用炒锅和酱油，西餐用烤箱和黄油。

LAMP（老牌经典）：Linux + Apache + MySQL + PHP。2000 年代的主力，WordPress 基于此。现在新项目用得少了。

MEAN/MERN（全栈 JavaScript）：MongoDB + Express + Angular/React + Node.js。前后端都用 JS，一种语言走天下，适合小团队快速出活。

Next.js + Supabase（AI 编程首选）：

Next.js（前后端一体）
  ├── 前端：React 组件 + Tailwind CSS
  ├── 后端：API Routes / Server Actions
  └── 对接 Supabase
        ├── 数据库：PostgreSQL
        ├── Auth：用户认证
        └── Storage：文件存储

两个工具搞定从界面到数据库的全部事情，有免费额度。独立开发者和 AI 编程选手的首选组合。

技术术语速查表（20个）

术语	一句话解释
前端	用户看到和操作的一切界面
后端	服务器上运行的、用户看不到的逻辑
数据库	存储和管理数据的地方
API	程序之间沟通的"标准接口"
服务器	永远在线的电脑，跑着你的后端代码
框架	现成的工具和规则，帮你更快写代码
库	一组现成的功能代码，按需拿来用
部署	把代码放到服务器上，让全世界能访问
域名	网站的地址，比如 google.com
HTTPS	加密的安全连接，网址前的🔒
Token	登录后的"通行证"，证明"我是我"
组件	前端页面的独立模块，像积木拼装
路由	根据网址决定显示哪个页面
响应式	页面自动适配不同屏幕大小
SDK	某个服务提供的工具包，方便调用功能
包/依赖	别人写好的工具，装了就能用
终端	用文字输入命令操控电脑的工具
Git	代码版本管理工具，记录每次修改
开源	代码公开免费，谁都能看和用
异步	"你先干着，干完了告诉我"的编程方式

技术基础就像学开车前先认路——你不需要知道每条街叫什么名字，但你得知道城市大致是什么布局。前端是门面、后端是工厂、数据库是仓库，它们通过 API 协作完成一件事。有了这个底子，后面聊框架和工具的时候，你就不会迷路了。

开一家"餐厅"需要什么？​

系统架构全景图​

前端：客人看到的一切​

后端：厨房里的秘密​

请求/响应：一来一回​

REST API：标准化的点菜方式​

数据库：仓库管理大师​

SQL vs NoSQL​

用户登录：永远不要自己造轮子​

OAuth 是什么？"用 Google 登录"的原理​

它们是怎么一起工作的？​

常见的技术栈组合​

技术术语速查表（20个）​