LESSON 02 · 幕后之旅 / DIVISION OF LABOR
你点下的每个按钮，都是两个世界的一次握手。
情景
你让 AI 加一个保存功能。页面提示「保存成功」，你一刷新，数据没了。AI 问你：是前端提前报了成功，还是后端根本没写进去？你愣住了——前端、后端，到底谁管什么？
本课 18 个概念 · 约 5 分钟
浏览器里发生的一切，访问者都能看到、改到。
用户在网页、小程序和软件里直接看到、点击和输入的那一层。例如在注册页，输入框、提交按钮和「正在提交 / 注册成功 / 出错了」的提示属于前端；账号是否真正创建成功，要由后端处理后返回结果。
跟 AI 这么说
输入框、按钮和「保存中」的提示都属于前端；真正的校验和写入交给后端。不要把密钥和权限规则写进前端代码。
用标签描述页面骨架和内容的标记语言。
跟 AI 这么说
先确认页面的 HTML 结构是否正确：标题、表单和按钮是不是用合适的标签写的，再调整样式。
控制页面长什么样的样式语言，管颜色、间距、字体和布局。
跟 AI 这么说
按钮能点但颜色一直是灰色，帮我找出是哪条 CSS 把主题色覆盖了，只改那一处。
浏览器把 HTML 解析成的一棵树，JavaScript 操作的就是它。
跟 AI 这么说
点击新增后页面多了一条任务，但源 HTML 里找不到它。帮我确认运行时 DOM 里到底插入了什么。
把页面里重复出现的一块界面打包成可复用的单元，改一处就能同步更新所有用到的地方。
跟 AI 这么说
这个重复出现的商品区做成组件，标题、价格、图片作为属性传进去，改一处就能同步更新所有用到的地方。
界面当前记住的数据，数据一变，界面就跟着重新渲染。
跟 AI 这么说
提交按钮点下去先把状态设为「保存中」并禁用，成功或失败后再更新提示和状态，不要提前显示成功。
从点击到落库，中间只隔着一次约定好的通话。
前后端通信的标准接口，前端通过它获取或提交数据。
跟 AI 这么说
保存走 /api/profile 这个 API 接口，用 POST 方法，body 里只传昵称字段。
浏览器发给服务器的请求，包含 GET、POST 等方法。
跟 AI 这么说
在开发者工具里找到这次保存的 HTTP 请求，把状态码、请求方法和返回内容贴给我，再判断问题出在哪。
前后端交换数据的常用格式，轻量且易于解析。
跟 AI 这么说
接口统一用 JSON 传数据，出错时也返回 JSON：{ ok: false, message: 原因 }，前端按这个格式显示提示。
算和存都在这里发生，访问者看不到，也改不到。
跑在服务器上、用户看不见的那一层。例如注册页上，账号是否真的创建成功、密码如何校验、数据存到哪张表，都由后端处理后把结果返回给前端。
跟 AI 这么说
后端收到请求后按顺序处理：先确认已登录，再校验昵称长度，最后写入数据库，任何一步失败都返回明确的原因。
验证用户身份的过程，如登录、Token 验证。
跟 AI 这么说
给保存接口加上身份认证：未登录的请求直接返回 401，前端收到后跳转到登录页。
保存用户登录状态的两种常见方式。
跟 AI 这么说
登录状态用 Cookie + Session 维持：登录成功后种 Cookie，之后每个请求都带上，后端据此认出是谁。
控制用户能访问哪些资源、能做什么操作的系统。
跟 AI 这么说
认证之后再做权限管理：用户只能改自己的资料，改别人的数据时后端要拒绝并返回 403。
存储和管理数据的系统，如 MySQL、PostgreSQL。
跟 AI 这么说
资料存在数据库的 profiles 表里，字段是 id、昵称、更新时间；保存就是更新 id 对应的那一行。
用代码对象操作数据库的抽象层。
跟 AI 这么说
数据库操作统一走 ORM，不要手写拼接 SQL 字符串，避免注入风险。
能用之上，还有三层体面。
把上一步改动还原回动手之前的样子。
跟 AI 这么说
这个改动不对，把这一步撤销掉，回到我动手之前的样子，其他改动保持不动。
让所有人（包括只用键盘或使用读屏软件的人）都能顺利使用界面的设计与实现。
跟 AI 这么说
检查一下这个页面的无障碍：图片有没有替代文字、所有按钮能不能用 Tab 键点到、文字对比度够不够。
同一套页面适配从手机到桌面的不同宽度。
跟 AI 这么说
手机宽度下把三列改成一列、导航收成抽屉，桌面的布局保持不变，中间别出现横向滚动条。
全景图
1 / 5
前端 · 浏览器
填写昵称，点击保存。本页重点：前端读取输入，显示保存中。
试一试
选择题 · 选一个你认为最合适的答案