前端知识体系

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

为什么后端要补前端

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

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

补齐前端基础，本质是打通全链路视角，让后端能独立完成「改页面 → 联调 → 验证」的闭环。

学习路线

HTML（结构） → CSS（样式/布局） → JavaScript（行为）
                                      ↓
                            异步编程（Promise / async-await）
                                      ↓
                         框架二选一：Vue 3  /  React

路线刻意「先基础、后框架」：框架只是把基础概念组件化、工程化。跳过基础直接学框架，遇到样式、事件、异步问题时依然无从下手。

文档清单

基础

• HTML 基础：语义化标签、表单、文档头、无障碍。
• CSS 基础与布局：盒模型、Flex、Grid、BFC、响应式。
• JavaScript 基础：类型、闭包、this、原型链、事件循环。
• JavaScript 异步编程：Promise、async/await、宏任务微任务、请求取消。

框架

• Vue 3
  • Vue 3 基础：模板语法、响应式、生命周期、组合式 API。
  • Vue 3 组件化：Props / Emits、插槽、v-model、组合式函数。
• React
  • React 基础：JSX、状态、受控组件、列表渲染。
  • React Hooks：useState / useEffect / useRef、自定义 Hook 与规则。

后端概念对照表

把前端概念映射到熟悉的后端概念，能显著降低理解门槛：

前端概念	类比的后端概念	说明
DOM 树	服务端对象树 / JSON 反序列化后的模型	HTML 是「序列化后的对象结构」
CSS 盒模型	排版引擎的布局计算	决定元素占据的空间
事件循环	单线程 + 任务队列（类似 NIO event loop）	同步代码优先，异步任务排队
Promise	CompletableFuture	表示「未来会有结果」的容器
async/await	CompletableFuture 的同步写法	用同步语法写异步流程
原型链	继承（对象级、动态）	属性查找沿原型向上委托
Vue 响应式	观察者模式 / 事件监听	数据变更自动触发视图更新
React 状态	不可变对象 + 重新渲染	状态变则相应子树重算

怎么用这套文档

1. 顺着看：按「基础 → 异步 → 框架」顺序读，每篇末尾都有小结。
2. 带着问题看：遇到 CORS、跨域 Cookie、字段对不齐，直接跳到对应小节。
3. 动手验证：每篇代码块都可在浏览器控制台或自建 .html 文件里直接试跑。

学习目标

能看懂前端项目结构、能独立改页面与样式、能自己发起并调试接口请求。