前端与全栈交付
现代 Java Backend Engineering 学习路线：前端与全栈交付
0 子目录10 文档
文档
10前端基础与全栈交付推荐阅读前端基础与全栈交付推荐阅读 Java 后端开发者需理解浏览器、TypeScript 和现代前端交付边界，以便设计契约、认证、错误、上传下载和实时通信。 官方资料优先顺序 Vue.js Guide TypeScript Handbook MDN Web Docs 阅读方法 1. 先阅读概念与快速开始，建立最小可运行闭环。 2. 再阅读 reference 中与当前项目直接相关的章节，记录默认值、异常语义和版本要求。 3. 每个关键结论都用前端基础与全栈交付：从零开始的阶段导学前端基础与全栈交付：从零开始的阶段导学 这一页是本阶段的入口，不假设读者已经接触过对应框架。先建立“为什么需要它、它在链路中的位置、如何验证”的心智模型，再进入各专题。 1. 本阶段解决什么问题 让后端学习者理解浏览器如何解析 HTML、应用 CSS、执行 JavaScript、调用 API 并维护界面状态。学习目标是构建可访问、响应式、类型安全、可测试的管理界面，并准确处理认证、错误、上传下载与实时连接。 前置知识 理解 HTTP、JWeb、HTML、CSS、JavaScript 与 TypeScript 基础Web、HTML、CSS、JavaScript 与 TypeScript 基础 浏览器通过 HTML 语义、CSS 布局和 JavaScript 事件/异步模型呈现应用；TypeScript 在构建期提供类型检查。 1. 本文覆盖范围 HTTP 与浏览器安全模型 语义 HTML 与可访问性 CSS 布局与响应式 JavaScript/TypeScript 模块、事件循环和类型 2. 核心知识详解 1. 浏览器和 HTTP 导航和 fetVue 3、TypeScript 与后台管理界面Vue 3、TypeScript 与后台管理界面 后台界面以组件、状态和 API 契约组织表格、表单、分页、对话框和权限反馈，重点是可维护状态流与可访问交互。 1. 本文覆盖范围 Composition API 与响应式 组件和状态 表格/表单/分页/对话框 路由、权限与错误体验 2. 核心知识详解 1. 响应式和组件 ref/reactive/computed/watch 表达状态、派生值和副作用；props 向下、event 向上，全栈交付：契约、认证、上传下载、WebSocket 与 Nginx全栈交付：契约、认证、上传下载、WebSocket 与 Nginx 完整产品链路需要前后端对齐 API、身份、代理、文件和实时连接，并能以 HTTPS 和自动化部署交付。 1. 本文覆盖范围 OpenAPI 与错误模型 Cookie/BFF 与 token 文件导入导出 WebSocket/SSE、Nginx 与 HTTPS 2. 核心知识详解 1. 契约协作 OpenAPI 定义输入、响应、错误和安全方案，生成客户端类型但仍保留运行时HTML：语义结构、表单、媒体与可访问性HTML：语义结构、表单、媒体与可访问性 HTML 定义内容和交互控件的语义。浏览器据此构建 DOM 和可访问树，并提供表单、链接、媒体、焦点与键盘默认行为。语义正确的页面通常更容易测试、维护和被辅助技术使用。 1. 学习目标 掌握文档骨架和语义分区 掌握表单控件、校验与提交 理解图片、音视频与响应式资源 掌握键盘、焦点、名称和 ARIA 基础 2. 核心概念 1. 文档结构与语义元素 <!doctype html 启用标准模式； htCSS：级联、盒模型、布局、响应式与动画CSS：级联、盒模型、布局、响应式与动画 CSS 是一套声明式约束系统。浏览器为每个元素计算属性，再执行布局、绘制与合成。理解级联和布局算法，比不断增加选择器优先级更可靠。 1. 学习目标 掌握选择器、继承、级联层和自定义属性 掌握盒模型、常规流与定位 掌握 Flexbox、Grid 和容器/媒体查询 理解过渡、动画、性能与减少动态偏好 2. 核心概念 1. 级联与值处理 同一属性冲突时，来源与重要性、cascade layer、选择器JavaScript 基础：类型、函数、集合、DOM 与事件JavaScript 基础：类型、函数、集合、DOM 与事件 JavaScript 是动态类型、基于原型、拥有词法作用域和一等函数的语言。浏览器把它与 DOM、事件、网络和存储 API 组合成前端运行环境。 1. 学习目标 理解原始类型、对象、相等和类型转换 掌握作用域、闭包、函数和 this 掌握数组/对象不可变更新 掌握 DOM 查询、事件传播和委托 2. 核心概念 1. 值、类型与相等 原始值包括 undefined、null、bJavaScript 高级：异步、模块、网络与性能JavaScript 高级：异步、模块、网络与性能 高级前端的关键不是更多语法，而是正确管理并发、取消、错误、模块边界、缓存与主线程预算。浏览器事件循环保证一段 JavaScript 任务不会被另一段任务中途打断，但长任务会阻塞交互与渲染。 1. 学习目标 理解任务、微任务、Promise 和 async/await 掌握 ES Modules 与动态导入 正确使用 fetch、AbortController 与流 理解渲染性能、WebTypeScript、Vue 工程化、测试与性能TypeScript、Vue 工程化、测试与性能 TypeScript 在编译期检查 JavaScript 程序，Vue 用响应式系统与组件组织界面，Vite 等工具完成开发服务器和生产构建。可靠前端还需要运行时数据校验、状态边界、路由、测试、可访问性和性能预算。 1. 学习目标 掌握联合类型、窄化、泛型与类型守卫 掌握 Vue Composition API 与组件通信 理解路由、状态、表单和请求状态 建立单元、组件、E2E 与性能验