From 50a9da4c95b969471b7cd980f64623f2e40943bc Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 26 Apr 2026 19:34:51 +0800
Subject: [PATCH] vault backup: 2026-04-26 19:34:51

---
 金山办公作业/Week06/summary.md | 255 +++++++++++++++++++++++++++++++++
 1 file changed, 255 insertions(+)
 create mode 100644 金山办公作业/Week06/summary.md
diff --git a/金山办公作业/Week06/summary.md b/金山办公作业/Week06/summary.md
new file mode 100644
index 0000000..c929e9c
--- /dev/null
+++ b/金山办公作业/Week06/summary.md
@@ -0,0 +1,255 @@
+---
+tags: [前端, 全栈, 学习总结, 阶段性回顾]
+create time: 2026-04-26 14:30
+---
+
+# 前端开发学习阶段性总结
+
+> **声明**：本文档由 AI 助手（Obsidian 知识管理自动化工作流）自动生成。
+> 生成方式：遍历 vault 中与【前端开发】相关的笔记文件，按既定学习路径（HTML → CSS → JavaScript → TypeScript → 工程化 → 实战）自动提取核心知识点，结构化整合后输出。
+> 生成时间：2026-04-26
+> 数据来源：`FRONTEND/`、`DEV/VITE/`、`金山办公作业/Week06/` 共 16 篇笔记文件。
+> 如需修正或补充内容，请直接编辑本文件或修改源笔记。
+
+## 概述
+
+本总结梳理了从网页骨架到工程化构建的完整前端学习路径，涵盖六大阶段的知识积累。所有知识点分布在以下三个区域：
+
+| 区域 | 路径 | 阶段 |
+|------|------|------|
+| 基础层 | `FRONTEND/` | HTML → CSS → JavaScript → TypeScript |
+| 工程层 | `DEV/VITE/` | Vite 构建工具架构与优化 |
+| 实战层 | `金山办公作业/Week06/` | 前端项目实战：路由、API 封装、登录安全 |
+
+---
+
+## 阶段一：HTML 基础 — 网页骨架
+
+**核心知识点：**
+
+- HTML 文档结构（`<!DOCTYPE html>`、`<html>`、`<head>`、`<body>`）
+- 常用标签：文本标签（`<h1>`~`<h6>`、`<p>`、`<span>`）、列表标签（`<ul>`、`<ol>`）、链接与图片
+- **表单元素**：`<input>` 各类 type、`<select>`、`<textarea>`、`<button>`
+- **语义化标签**：`<header>`、`<nav>`、`<main>`、`<article>`、`<section>`、`<footer>`
+
+> 这是所有前端知识的起点，决定了页面的结构和可访问性。
+
+---
+
+## 阶段二：CSS 基础 — 网页样式
+
+**核心知识点：**
+
+- **选择器优先级**：`!important` > 内联 > ID > 类/属性/伪类 > 标签/伪元素
+- **盒模型**：content → padding → border → margin，`box-sizing: border-box` 的重要性
+- **Flexbox 布局**：`flex-direction`、`justify-content`、`align-items`、`flex-wrap`
+- **Grid 布局**：`grid-template-columns/rows`、`gap`、`grid-area`
+- **响应式设计**：媒体查询（`@media`）、响应式单位（`rem`、`vw`、`vh`）
+
+> CSS 是前端最容易被低估的部分，Flexbox 和 Grid 需要多动手练习。
+
+---
+
+## 阶段三：JavaScript 基础 — 交互逻辑
+
+**核心知识点：**
+
+- **变量与数据类型**：`let` / `const`、原始类型与引用类型
+- **函数与作用域**：函数声明 vs 函数表达式、箭头函数、闭包、作用域链
+- **DOM 操作**：`document.querySelector`、事件绑定、事件委托
+- **事件处理**：事件冒泡与捕获、`addEventListener`
+- **异步编程**：`Promise`、`async/await`、`fetch` API
+
+> React 的 Hooks 本质就是 JS 闭包 + 状态管理，理解 JS 是理解框架的前提。
+
+---
+
+## 阶段四：TypeScript 基础 — 类型保障
+
+**核心知识点：**
+
+- **类型注解**：基础类型标注、函数参数/返回值类型
+- **接口（Interface）**：对象结构约束、可选属性、只读属性
+- **泛型（Generics）**：类型参数化、泛型约束
+- **联合类型与交叉类型**：`|`、`&`
+- **工具类型**：`Partial`、`Required`、`Pick`、`Omit` 等
+
+> TypeScript 是现代前端项目的工业标准，越早适应越好。
+
+---
+
+## 阶段五：Vite 工程化 — 构建工具
+
+**文件索引：** `DEV/VITE/架构原理.md`、`DEV/VITE/配置详解.md`、`DEV/VITE/优化实践.md`
+
+### 5.1 核心设计理念
+
+Vite 的核心创新在于**分层优化策略**——开发环境和生产环境采用完全不同的处理方式：
+
+```
+开发环境 → ESM 按需编译 → 即时返回
+生产环境 → Rollup 预构建 → 高质量产物
+```
+
+### 5.2 开发环境架构
+
+| 机制 | 说明 |
+|------|------|
+| **ESM 按需编译** | 只编译浏览器请求的文件，而非全量打包 |
+| **依赖预构建** | 使用 esbuild 预打包 npm 依赖，转 ESM 格式 |
+| **文件监听** | FSWatcher 监听文件变更，触发 HMR |
+
+### 5.3 热模块替换（HMR）
+
+```
+文件变更 → 监听器 → 服务端失效 → 重新编译 → WebSocket → 浏览器替换
+```
+
+- JS 模块：通过浏览器原生 `import()` 重新导入
+- CSS 模块：直接替换 `<style>` 标签
+- React 组件：React Fast Refresh 保持状态的前提下重新渲染
+
+### 5.4 生产构建系统
+
+```
+入口文件 → 依赖图构建 → 模块解析 → 代码转换 → 代码分割 → Tree Shaking → 压缩 → 输出
+```
+
+- 基于 **Rollup** 进行最终打包
+- 支持手动代码分割（`manualChunks`）、vendor 提取
+- 使用 terser 进行压缩混淆
+
+### 5.5 插件系统
+
+插件生命周期：`Config` → `ConfigResolved` → `ConfigureServer` → `BuildStart` → `Transform` → `Load` → `BuildEnd` → `CloseBundle`
+
+核心钩子：
+- **resolveId**：解析模块路径
+- **load**：加载模块内容
+- **transform**：转换模块源码
+
+### 5.6 Vite vs 传统构建工具对比
+
+| 特性 | Vite | Webpack | Parcel |
+|------|------|---------|--------|
+| 启动原理 | ESM 按需编译 | 全量打包 | 零配置打包 |
+| HMR 机制 | 模块级更新 | 全局重编译 | 智能更新 |
+| 配置复杂度 | 低 | 高 | 极低 |
+| 开发体验 | 优秀 | 可优化 | 良好 |
+
+---
+
+## 阶段六：前端项目实战（Week06）
+
+**文件索引：** `金山办公作业/Week06/` 目录
+
+### 6.1 前端项目依赖清单
+
+梳理了现代前端项目的完整依赖体系，包括框架依赖（React、React Router）、构建工具（Vite）、UI 组件库等。
+
+### 6.2 路由原理
+
+理解了前端路由的核心机制：
+
+- **History API**：`pushState` / `replaceState` / `popstate` 事件
+- **Hash 路由**：`#` 锚点变化触发 `hashchange` 事件
+- **SPA 路由**：单页面应用如何在不刷新页面的情况下切换视图
+
+### 6.3 统一封装请求
+
+对前端 HTTP 请求进行了系统化的封装：
+
+- **请求拦截器**：统一添加 Token、超时控制
+- **响应拦截器**：统一错误处理、401 自动跳转登录
+- **类型安全**：使用 TypeScript 定义 API 响应类型
+- **Axios 封装**：基于 Axios 构建统一请求模块
+
+### 6.4 登录安全流程
+
+从普通登录到安全登录的完整演进：
+
+```
+普通 HTTPS 登录 → 盐值挑战 → 客户端密钥派生
+```
+
+**三层安全防护：**
+1. **HTTPS 加密传输** — 基础保障
+2. **盐值挑战（Salt Challenge）** — 后端下发一次性随机盐值
+3. **客户端 PBKDF2 派生** — 前端用盐值 + 密码做密钥派生，传输层不出现原始密码
+
+### 6.5 客户端密钥派生（进阶安全）
+
+> 盐值挑战方案的进阶实现，适用于金融类高安全场景。
+
+**完整流程：**
+
+| 步骤 | 前端操作 | 生活类比 |
+|------|----------|----------|
+| 第一步 | 向 `GetChallenge` 接口请求盐值 | 服务员递给你一张一次性餐巾纸 |
+| 第二步 | 用 PBKDF2 算法将密码+盐值做派生 | 用暗语写在餐巾纸上 |
+| 第三步 | 发送派生密钥而非原始密码 | 厨房对暗语，用完即撕 |
+
+**安全性保证：** 即使 HTTPS 被绕过，攻击者只能看到客户端派生的密钥，无法还原原始密码。
+
+### 6.6 Outlet 组件模式
+
+理解 React 中 Outlet 组件的使用——用于嵌套路由的场景，父路由通过 `<Outlet />` 渲染子路由的视图内容，是构建多级导航布局的核心模式。
+
+### 6.7 题目：在线管理平台
+
+通过实际项目题目将所学知识综合运用，涵盖了路由配置、API 封装、安全认证等完整前端开发流程。
+
+### 6.8 验收任务清单
+
+Week06 的最终验收目标，确保每个知识点都落实到代码实现中。
+
+---
+
+## 学习路径全景图
+
+```mermaid
+graph LR
+    A[HTML 基础] --> B[CSS 基础]
+    B --> C[JavaScript 基础]
+    C --> D[TypeScript 基础]
+    D --> E[Vite 工程化]
+    E --> F[前端项目实战 Week06]
+    F --> G[React 框架]
+```
+
+---
+
+## 关键认知与心得
+
+1. **不要跳过基础直接学框架。** React 的 Hooks 本质就是 JS 闭包 + 状态管理，不懂 JS 就看不懂 Hooks。
+
+2. **CSS 是前端最难的部分之一。** Flexbox 和 Grid 需要多动手练习，不是看几篇文章就能掌握的。
+
+3. **TypeScript 不是可选的。** 现代前端项目中，TS 是标配，越早适应越好。
+
+4. **理解工具原理比会用工具更重要。** 深入 Vite 架构原理后，能更好地进行性能优化和插件开发。
+
+5. **安全是前端的重要课题。** 从 HTTPS 到盐值挑战再到客户端密钥派生，每一层都在增加攻击者的成本。
+
+6. **工程化思维贯穿始终。** 从依赖管理 → 路由设计 → API 封装 → 构建优化，前端不只是写页面，更是一套系统工程。
+
+---
+
+## 关联笔记
+
+- [[FRONTEND/HTML 基础]]
+- [[FRONTEND/CSS 基础]]
+- [[FRONTEND/JavaScript 基础]]
+- [[FRONTEND/TypeScript 基础]]
+- [[DEV/VITE/架构原理]]
+- [[DEV/VITE/配置详解]]
+- [[DEV/VITE/优化实践]]
+- [[金山办公作业/Week06/前端项目依赖清单]]
+- [[金山办公作业/Week06/路由原理]]
+- [[金山办公作业/Week06/统一封装请求]]
+- [[金山办公作业/Week06/登录安全流程]]
+- [[金山办公作业/Week06/客户端密钥派生]]
+- [[金山办公作业/Week06/Outlet]]
+- [[金山办公作业/Week06/bcrypt成本因子]]
+- [[金山办公作业/Week06/题目-在线管理平台]]
+- [[金山办公作业/Week06/验收任务清单]]
