3.1 · 客户端 vs 服务器端

目标： 决定什么在浏览器跑、什么在服务器跑。

代码在哪跑

边	跑在	语言
客户端	用户浏览器	HTML、CSS、JavaScript
服务器端	Web 服务器	PHP（Python、Node.js、Ruby、Java…）

各自擅长

工作	客户端	服务器端
UI 互动（点击、动画）	✓	✗
提交前实时表单反馈	✓	✗
认证、密码哈希	✗	✓
数据库访问（带凭证）	✗	✓
上传到储存	✗	✓
必须可信的业务逻辑	✗	✓
搜索引擎优化（渲染页面）	部分	✓（服务器渲染）

黄金安全规则

永不信任客户。 任何到服务器的东西都可被改或伪造。服务器端再校验一切。

客户端校验 ：用户便利
服务器端校验：你最后的防线

简单流程

浏览器 (JS)                   服务器 (PHP)                  DB (MySQL)
   │                              │                              │
   │ ── 点击「注册」 ─────────▶  │                              │
   │                              │ 检输入、哈希密码              │
   │                              │ ──── INSERT INTO users ────▶ │
   │                              │  ◀── ok ─────────────────────│
   │ ◀── 「欢迎」响应 ────────── │                              │

实例 · 计算器

客户端瞬间算 2 + 3 = 5 —— 无需服务器往返。许多小 UI 任务（切深色模式、排序表、快校验表单）属客户端。

一旦需保存结果以便下次（或他人）取，必须谈服务器。

学生常见错误

• 关键校验只放客户端（任何人都能禁 JS）。
• 在 JavaScript 里存凭证。
• 因 UI 没筛把巨 JSON 送服务器。
• 在 JS 跑服务器能更快做的重算。

考试式题目

题（4 分）： 区分客户端与服务器端脚本。识别下列各由哪边处理：

(a) 输入时显示「密码太弱」提示。 (b) 储存前验证同密码是否符合策略。 (c) 查产品当前库存。 (d) 给下拉菜单做动画。

参考答案：

• 客户端在浏览器用 JavaScript 跑；能瞬时响应用户动作，但不可信（用户可改）。
• 服务器端在 web 服务器用 PHP/Python/… 跑；有数据库与可信秘密的访问。

(a) 客户端 —— 输入时即时 UI 反馈。 (b) 服务器端 —— 不论客户做什么都要强制；客户校验只为便利。 (c) 服务器端 —— 须查数据库，客户直接访问不了。 (d) 客户端 —— 纯视觉动画；无需服务器参与。

关键要点

• 客户端给 UI / 便利；服务器端给信任 / 数据。
• 总要服务器端校验。

➡️ 下一节：3.2 JavaScript 基础