flowchart LR
N0["01 网页结构"]
N1["02 样式与布局"]
N2["03 事件与异步"]
N3["04 类型与组件"]
N4["05 接口与认证"]
N5["06 测试与交付"]
N0 --> N1 --> N2 --> N3 --> N4 --> N5
前端与全栈交付
现代 Java Backend Engineering 学习路线：前端与全栈交付
0 子目录10 文档
CHAPTER OVERVIEW · 章节概览
从网页结构、样式和交互开始，再使用 TypeScript 与 Vue 组织界面，最后与后端契约和部署环境连通。
本章学习路线
箭头表示建议的学习顺序；先理解问题，再逐步进入实现与实践。
按顺序学习
10前端基础与全栈交付：从零开始的阶段导学会写后端接口之后，可以亲手做一个能提交表单、显示列表的小页面。这样就能理解浏览器怎样组织内容、发送请求和保存界面状态。先用 HTML、CSS 和 JavaScript 搞清基本行为，再引入 Vue 与 TypeScript。Web、HTML、CSS、JavaScript 与 TypeScript 基础一个按钮从显示到点击生效，涉及内容结构、样式和事件三个层面。下面用这些具体行为理解 HTML、CSS 与 JavaScript，再说明 TypeScript 怎样帮助检查代码。它们协作完成页面，不是彼此的替代品。HTML：语义结构、表单、媒体与可访问性一个看起来像按钮的 div，不一定能像真正的按钮那样用键盘操作。HTML 元素不仅决定外观起点，也提供语义和默认交互。先选合适的元素，再加样式和脚本，往往能少写很多补救代码。CSS：级联、盒模型、布局、响应式与动画样式没有生效时，继续加 !important 可能暂时解决问题，却让后续更难调整。先查哪条规则生效，再看盒模型和布局。下面从浏览器怎样决定尺寸与位置讲起，再处理手机布局和动画。JavaScript 基础：类型、函数、集合、DOM 与事件页面上的数据变化，最终要由 JavaScript 响应事件并更新界面。先把值、函数、作用域和对象讲清，再操作 DOM，会更容易理解回调为什么拿到某个值，以及事件怎样传递。JavaScript 高级：异步、模块、网络与性能用户快速切换筛选条件，旧请求却比新请求晚返回，界面该显示哪一份结果？这类问题需要理解异步执行、取消和状态更新。下面从事件循环出发，再联系模块、网络和页面性能。Vue 3、TypeScript 与后台管理界面管理页面常常同时有筛选条件、分页、表单和弹窗。难点不只是把控件画出来，而是数据变化后哪些区域该更新、请求失败后怎样反馈。下面用组件和状态的关系组织这些交互。TypeScript、Vue 工程化、测试与性能引入 Vue 和 TypeScript 之后，组件更好组织了，但接口数据仍可能格式错误，页面也仍可能卡顿。本章把类型检查、运行时校验、测试和构建放在各自的位置，再看怎样验证用户实际看到的页面。全栈交付：契约、认证、上传下载、WebSocket 与 Nginx前端发出请求、后端返回成功，用户却没拿到文件或没有保持登录，问题常在两端约定或代理配置上。下面沿着认证、上传下载和实时连接分别检查，让整条用户操作都能完成。前端基础与全栈交付推荐阅读前端资料很多，后端学习者可以先围绕一个页面选读：HTML 表达内容，CSS 安排布局，JavaScript 响应操作，再通过接口与后端通信。遇到框架封装时，仍能回到这些基本能力上理解。