4.1 AI 时代的前后端核心概念
一、本节你会做出什么
你会拿到一张定位表：页面出问题时，照着它判断问题在哪一层，并把话说到对的地方。
📷 效果位：一个网页被拆成三层（内容 / 外观 / 行为）的分解图
先说清这一章的定位。第 4 章不是要教你写代码。 写代码是 AI 的活儿。这一章要让你具备三件事：
| 你要能 | 为什么 |
|---|---|
| 看懂 AI 写了什么 | 不然你的“验收”只能停留在看效果（3.5 讲的四种验收里，你只会第一种） |
| 定位 问题出在哪 | 你说“页面坏了”，AI 瞎猜；你说“按钮点了没反应，控制台报 undefined”，它一次就修对 |
| 准确下指令 | 能说出“把那个 <header> 里的间距调大”，比“上面那块看着挤”有效十倍 |
这一节是整章的地基：先搞清一个网页到底是怎么出现在屏幕上的。
二、开始前你需要
三、跟着做
第 1 步：你按下回车之后，发生了四件事
在地址栏输入 example.com 按回车，到页面显示出来，中间是这样一条流水线：
①你的浏览器 ②网络 ③服务器┌──────────────┐ ┌──────────────┐│ "我要看 │ ──────── 请求 (Request) ─────────────► │ 找到对应内容 ││ 这个网页" │ │ ││ │ ◄─────── 响应 (Response) ───────────── │ 打包发回去 ││ ④拿到一堆 │ （HTML / CSS / JS / 图片） └──────────────┘│ 文件，拼成 ││ 页面画出来 │└──────────────┘四个词，你以后会天天听到：
| 词 | 大白话 |
|---|---|
| 客户端（Client） | 你这一端。浏览器、手机 App 都算 |
| 服务器（Server） | 对面那台一直开着的电脑。放着网页文件、数据 |
| 请求（Request） | 你说“我要这个” |
| 响应（Response） | 对面说“给你”，附带内容 |
💡 1.3 的
localhost:3000现在能解释了：那是你自己电脑同时扮演客户端和服务器——浏览器找的“对面那台电脑”就是本机。所以别人打不开。
现在动手，亲眼看一次这个过程：
- 打开任意一个网站
- 按 F12（Mac：Command+Option+I）打开开发者工具
- 切到 Network（网络） 标签页
- 按 F5 刷新页面
你会看到哗啦一长串条目滚出来。那一条就是一次请求。 第一条通常就是网页本身，后面跟着一堆 CSS、JS、图片、字体。
点开第一条，右侧能看到 Status（状态码）。两个你必须认得：
| 状态码 | 意思 |
|---|---|
| 200 | 成功 |
| 404 | 没找到（地址写错了，或东西不存在） |
| 500 | 服务器自己出错了（不是你的锅，但如果服务器是你的，就是你的锅） |
📷 截图位 1：Network 面板，第一条请求与 Status 200
第 7 章会把请求响应讲透（7.1、7.2）。这里你只要建立一个画面：网页不是“打开”的，是“要来的”。
第 2 步：拿到的东西分三层——这是本章最重要的一张图
浏览器拿到的不是一张图片，而是三类文件各管一件事：
┌─────────────────────────────────────────────────┐│ ③ JavaScript → 行为：点了之后会怎样 │├─────────────────────────────────────────────────┤│ ② CSS → 外观：什么颜色、多大、排哪儿 │├─────────────────────────────────────────────────┤│ ① HTML → 内容：有哪些文字、图片、按钮 │└─────────────────────────────────────────────────┘用盖房子来理解，这个类比本章会一直用：
| 文件 | 房子类比 | 没有它会怎样 | |
|---|---|---|---|
| ① | HTML | 毛坯房：墙在哪、门在哪、几个房间 | 什么都没有，一片空白 |
| ② | CSS | 装修：墙刷什么色、家具怎么摆、尺寸多大 | 内容都在，但丑得像 1998 年的网页 |
| ③ | JavaScript | 电器与开关：按一下灯亮、水龙头出水 | 好看但点什么都没反应 |
三个关键认知：
- 顺序是固定的。先有内容，才能装修，最后才通电。所以 HTML 坏了，后面两层全完蛋。
- 它们可以独立坏掉。这正是定位问题的基础（第 3 步）。
- AI 写的也是这三样。不管它用了多先进的框架，最后吐给浏览器的还是这三类东西。
现在动手，亲眼看见“只有 HTML”的样子：
在任意网页上，开发者工具 → Network 面板 → 第一条请求 → 右侧切到 Response 标签页。
你看到的那一大堆尖括号 <...>，就是纯粹的第 ① 层。没有颜色、没有排版，只有内容和结构。
📷 截图位 2：Response 面板里的原始 HTML
第 3 步：前端和后端，到底谁管什么
上面三层全都在你的浏览器里运行，它们合起来叫前端。
那后端呢？用餐厅来分：
| 前端 | 后端 | |
|---|---|---|
| 餐厅类比 | 前厅：菜单、餐桌、服务员 | 后厨：食材、冰箱、厨师 |
| 在哪运行 | 用户的浏览器里 | 服务器上 |
| 管什么 | 页面长什么样、怎么交互 | 数据存哪、算什么、谁有权限 |
| 用户看得到吗 | 看得到，还能看源码 | 看不到 |
| 本课哪里讲 | 第 4 章（本章） | 第 7 章 |
一句话分界：
凡是“换个人来看也一样”的，归前端；凡是“得记住点什么、每个人不一样”的，归后端。
| 需求 | 归谁 | 为什么 |
|---|---|---|
| 景点介绍页面 | 前端 | 谁来看都一样 |
| 点击卡片跳转详情 | 前端 | 浏览器自己能干 |
| 用户登录 | 后端 | 要记住账号密码 |
| 用户收藏的景点 | 后端 | 每个人不一样，还得存住 |
| 调用 AI 生成文案 | 后端 | 要用密钥（2.4 讲过为什么不能放前端） |
🔑 这个分界的实用价值：你描述需求时先判断它属于哪边，第 5 章的项目全是前端，所以你会很快；等到第 8、9 章要做“能记住东西”的功能时，你就知道那是另一套活儿了。
第 4 步：定位表（本节交付物）
前面都是为了这张表。页面出问题时，先对照它判断在哪一层，再开口。
| 症状 | 大概率在哪一层 | 怎么跟 AI 说 |
|---|---|---|
| 页面一片空白 | HTML 没出来，或 JS 报错把渲染拦住了 | 「页面空白，控制台报错原文如下：【整段粘贴】」 |
| 内容都在但样式全没了（像纯文本） | CSS 没加载上 | 「样式完全没生效，Network 里 css 文件状态是【404 / 200】」 |
| 文字图片都对，就是位置/颜色不对 | CSS 写得不对 | 「【哪个元素】的【间距/颜色/对齐】不对，我想要的效果是【具体描述】」 |
| 按钮点了没反应 | JS（事件没绑上，或函数报错） | 「点击【哪个按钮】没反应，控制台报错是【粘贴】」 |
| 图片裂了，显示破图标 | 图片路径错或文件不存在 | 「图片加载失败，Network 里它的状态是 404，路径是【粘贴】」 |
| 点进去是 404 页面 | 路由/链接地址不对 | 「点【哪个链接】跳到 404，地址栏显示的是【粘贴】」 |
| 数据不对 / 数据没出来 | 后端或数据源 | 「页面结构正常但数据是空的，Network 里那个接口返回的是【粘贴】」 |
| 本地好的，上线就坏 | 环境差异（第 11 章） | 「本地正常，部署后【具体症状】，部署平台的构建日志是【粘贴】」 |
三条使用规矩：
- 先说症状，别说诊断。 说「按钮点了没反应」比说「JS 坏了」好——后者如果猜错，会把 AI 带进沟里。
- 带上控制台红字（1.3 教的）和 Network 状态码（本节第 1 步教的）。这两样是全课性价比最高的两个证据。
- 说清“我期望看到什么”。「这里应该显示 6 张卡片，现在只有 1 张」远胜于「卡片不对」。
把这张表存下来。第 6 章整章都在展开它，这里是它的第一版。
第 5 步：还有两个词你会撞上
不用深究，认得就行，第 4.6 和 4.7 会用到。
① 静态 vs 动态
| 静态网站 | 动态网站 | |
|---|---|---|
| 内容什么时候定的 | 提前就做好了，每个人看到的一样 | 访问时才拼出来，可以因人而异 |
| 例子 | 景点介绍页、课程网站 | 带登录的后台、社交动态 |
| 本课 | 第 5 章 | 第 9 章 |
② 这个页面是谁拼出来的
同样一个页面，可以由服务器先拼好再发给你，也可以发一个空壳过来、由浏览器自己拼。两种做法各有利弊（速度、SEO、交互）。
现在不用懂。 你只需要知道这件事存在——4.6 讲 React、4.7 讲 Next.js 时会回到它。
四、完成的标志是
- 我说得出「客户端 / 服务器 / 请求 / 响应」四个词分别指什么
- 我在 Network 面板里看过一次刷新时的请求列表
- 我认得状态码 200 / 404 / 500
- 我说得出 HTML / CSS / JS 三层各管什么（内容 / 外观 / 行为）
- 我在 Response 面板里看过一次原始 HTML
- 我能用「换个人来看是否一样」判断一个需求归前端还是后端
- 我存好了第 4 步那张定位表
- 我知道报问题时要带上「控制台红字 + Network 状态码」
五、卡住了看这里
Q：Network 面板打开后是空的。 它只记录“打开之后”的请求。打开面板后按 F5 刷新，就有了。
Q：请求太多了，几十上百条，看不过来。 不用全看。面板上方有筛选按钮（Doc / CSS / JS / Img），点 Doc 只看网页本身。排错时常用的是看有没有红色的条目——那些是失败的请求。
Q：我分不清控制台（Console）和网络（Network）面板。 一句话区分：
- Console 看代码运行时出的错（JS 报错、警告）
- Network 看文件要没要到（404、超时、接口返回了什么）
页面出问题时，这两个都瞄一眼，是全课最值的习惯。
Q：前端后端的分界，我判断不了怎么办？ 问 AI。本节提示词 ③ 就是干这个的。判断错了也没关系——AI 会告正你，而且提问本身就在训练你的判断力。
Q：知道这些概念，对我做项目有什么实际用处？ 举个真实对比。同样是页面出问题：
❌ 「我的网站坏了，帮我修一下」→ AI 问你一堆，或者乱猜一通乱改 ✅ 「页面样式全没了，像纯文本。Network 里 CSS 文件是 404，路径显示
/style.css」→ AI 一次定位到路径问题
后面这句话，你学完本节就能说出来了。 这就是这一章的价值。
六、本节提示词
① 分层定位（页面出问题时第一句话）：
我的网页出问题了。**现象**：【具体描述，比如"页面空白"/"按钮点了没反应"/"样式全没了"】**我期望看到的是**：【比如"首页应该显示 6 张景点卡片"】
证据：- 浏览器控制台的报错原文：【整段粘贴，没有就写"没有报错"】- Network 面板里失败的请求（红色那些）：【粘贴请求地址和状态码，没有就写"没有失败请求"】
请你：1. 判断问题最可能在哪一层（HTML 内容 / CSS 样式 / JS 行为 / 后端数据）；2. 说明你的判断依据；3. **先不要改代码**，告诉我接下来该检查什么，按最可能的排在前面。② 让 AI 拆解一个真实网页（练眼力，很有效）：
我在学前端基础，想搞懂一个网页是怎么构成的。这是我在某个网站上看到的一段 HTML：【粘贴你从 Response 面板或 Elements 面板里复制的一段】
请用零基础能懂的话告诉我：1. 这段里哪些部分属于"内容"，哪些是"外观"，哪些是"行为"；2. 它在页面上对应的是哪一块？3. 如果我想改掉其中的【某个具体东西】，该动哪一部分？③ 判断需求归前端还是后端：
我想做这个功能：【具体描述】
请告诉我：1. 这个功能属于前端还是后端？如果两边都要，分别要做什么？2. 判断依据是什么（用"换个人来看是否一样""需不需要记住东西"这类大白话解释）；3. 如果涉及后端，我是不是现在还做不了？大概要用到什么东西？上一节 ← 3.5 和 AI 一起写代码的正确姿势 下一节 → 4.2 HTML 基础：网页的内容骨架