一套为 Java 后端工程师设计的前端补齐路线：目标不是「会造轮子」，而是能看懂前端工程、改得动页面、联得通 API。

为什么后端要补前端

在后端主导的系统里，页面往往是联调、排障、演示的第一现场。后端同学即便不写复杂交互，也几乎一定会遇到：

• 页面调接口报 CORS、跨域 Cookie 丢失，需要和前端一起定位到底是谁的问题；
• 表单提交后字段对不上，前端 name 与后端 DTO 字段名不一致；
• 页面加载慢、接口「瀑布流」，无法判断是前端串行请求还是后端慢查询；
• 只想改个文案、加个按钮，却不想为一行改动拉着前端同学排期。

CSS（Cascading Style Sheets，层叠样式表）描述页面的表现：元素多大、什么颜色、摆在哪里。如果 HTML 是结构、JS 是行为，CSS 就是「把结构画出来」的那一层。

1. 从后端视角理解 CSS

CSS 是一套声明式规则：你只描述「希望长什么样」，不写「怎么算坐标」。这类似用 SQL 做声明式查询——你不关心数据库怎么走索引（那是优化器的事），CSS 里你也不关心排版引擎怎么算出每个元素的位置。

一条 CSS 规则由「选择器 + 声明块」组成：

HTML（HyperText Markup Language，超文本标记语言）描述页面的结构：页面由哪些元素组成、谁包含谁、各自承担什么语义。

1. 从后端视角理解 HTML

后端返回 JSON，前端 JSON.parse 得到对象树；浏览器把 HTML 文本解析成一棵 DOM 树（Document Object Model，文档对象模型），之后的 CSS 渲染、JS 操作都围绕这棵树进行。可以把 HTML 看成「对象树的文本序列化形式」：

前端几乎所有耗时操作——请求接口、读文件、定时器——都是异步的。理解 Promise、async/await 与事件循环的宏微任务，是写好前端代码的分水岭。

1. 为什么必须异步

JS 是单线程的：同一时刻只跑一段代码。如果请求接口是同步阻塞的，整个页面就会卡死——网络往返可能几百毫秒到几秒，期间用户点不动、界面不刷新。

所以 JS 的做法是：发请求不阻塞，先把控制权交回浏览器，拿到结果后再执行回调。这就是「非阻塞 I/O + 事件循环」。

JavaScript（JS）是页面的行为层：响应用户操作、请求后端、更新 DOM。它和 Java 名字相似，语言模型却完全不同——动态类型、单线程、基于原型。

1. 从后端视角理解 JS

Java 是静态类型 + 编译期检查：变量类型写死在声明里，编译不过就发不出去。JS 是动态类型 + 运行期决定：变量不绑类型，赋值时就地决定，运行时才暴露类型错误。

let x = 1;        // 数字
x = "hello";      // 立刻变成字符串，不报错
x = { a: 1 };     // 又变成对象

Hooks 让函数组件拥有状态、生命周期与逻辑复用能力。理解 Hooks 的关键，是两条铁律，以及「每次渲染都是一次函数调用」这个前提。

1. 为什么有 Hooks

Hooks 之前，只有类组件能有状态，逻辑复用靠高阶组件 / render props，导致「层层包裹」和 this 之痛。Hooks 把状态与副作用直接搬进函数组件，并把复用单位从「组件」变成「函数」。

后端类比：Hooks 像切面 / 拦截器——在函数组件的调用链上按顺序登记「状态」「副作用」「缓存」等能力。

React 的心智模型只有一句：UI 是状态的函数，即 UI = f(state)。状态变了，React 重新计算并更新对应的界面。它用 JavaScript（而非模板）描述结构，灵活度和类型友好度高。

1. 心智模型：UI = f(state)

不用框架时，界面靠手动操作 DOM。React 把关注点从「怎么改 DOM」转成「当前状态应该长什么样」：

// 声明：给定 state，返回 UI
function Counter({ count }) {
  return <button>点击了 {count} 次</button>;
}

组件是可复用的 UI 单元：把一块「结构 + 逻辑 + 样式」封装起来，对外暴露清晰的接口（props 进、事件出）。组件化的本质是前端版的「模块化 + 接口设计」。

1. 组件作为接口

一个好组件，对外的契约只有两件事：

• 输入：props（父传子）；
• 输出：emits（子通知父）。

内部实现（DOM 结构、状态、样式）应当私有。这和后端设计一个 Service 接口是一样的：依赖接口，不依赖实现。

Vue 是一个渐进式前端框架：核心只负责「数据 → 视图」的声明式绑定，路由、状态管理等按需引入。它上手快、模板直观，是国内业务系统采用率最高的框架之一。

1. 心智模型：数据驱动视图

命令式的前端操作是这样的：

// 命令式：手动找元素、改内容
const el = document.getElementById("count");
el.textContent = count;