Web开发
一、前端工程化核心工具
1.1 Vue、Vite、npm 的职责划分
- Vue（前端框架）：提供组件化与响应式编程模型，将页面拆分为可复用的组件，管理视图层状态。
- npm（包管理器）：Node.js 的默认包管理工具，托管全球最大的 JavaScript 代码仓库，通过
npm install下载项目依赖。 - Vite（构建工具）：利用原生 ES Module 实现开发时秒级启动，生产构建时使用 Rollup 打包，输出优化后的静态资源。
1.2 构建输出（npm run build）的本质
执行npm run build后，Vite 会生成dist目录，包含：
.html入口文件- 合并压缩后的
.css样式文件 - 经过代码混淆、压缩的
.js文件（非二进制，仍为 JavaScript 文本）
构建过程完成：代码拆分（Code Splitting）、Tree Shaking、资源指纹（Hash）命名、压缩等优化，减少网络传输体积。
二、部署与 Web 服务器
2.1 静态部署与反向代理
生产环境通常将dist目录部署到 Web 服务器（如 Nginx、Apache）。Web 服务器监听公网端口（80/443），直接响应静态资源请求，无需 Node.js 运行时参与。
2.2 Nginx 的反向代理与路由分流
Nginx 作为反向代理服务器，承担以下职责：
- 静态资源直接返回：请求路径匹配
/static/时，直接读取本地文件。 - API 请求转发：请求路径匹配
/api/时，转发给内网后端服务（如127.0.0.1:8080）。 - 负载均衡：可将请求分发到多个后端实例。
- SSL 终止：处理 HTTPS 加密和解密，减轻后端服务压力。
- 安全防护：支持限流、IP 黑白名单、防 DDoS 等。
2.3 浏览器 → Nginx → 后端的完整链路
浏览器发起请求 → Nginx（公网 IP:443） → 静态资源：直接返回 HTML/CSS/JS → API 请求：转发至内网后端服务 → 后端处理业务逻辑、操作数据库 → 返回 JSON 响应 → Nginx 将响应返回浏览器 → 浏览器解析 JSON，更新界面三、网络基础设施：IP、MAC、端口
3.1 IP 地址的分配与管理
全球 IPv4 地址由 IANA 统一分配，由各区域注册机构（如 APNIC 负责亚太区）管理。中国机构（如 CNNIC）从 APNIC 申请地址段，再分配给国内运营商和云厂商。
IP 地址需按年缴纳维护费用，并非一次性买断。
3.2 MAC 地址的唯一性保证
MAC 地址（48 位）由 IEEE 统一管理。IEEE 将前 24 位（OUI，组织唯一标识符）分配给网络设备制造商，后 24 位由厂商自行分配，确保同一厂商内部不重复，从而实现全球唯一。
3.3 端口的作用与范围
端口是传输层（TCP/UDP）的逻辑概念，用于区分同一 IP 上的不同服务。端口号范围为 0~65535（16 位），常见约定：80（HTTP）、443（HTTPS）、22（SSH）、3306（MySQL）等。
端口并无物理实体，仅由操作系统内核管理数据包分发。
四、网络安全：防火墙与 SSL/TLS
4.1 状态防火墙的工作原理
防火墙通过维护连接状态表（State Table）来决策：
- 出站主动连接：记录源 IP、目标 IP、端口，允许对应回包进入。
- 入站未匹配连接：直接丢弃。
但传统防火墙不检查数据包内容，无法防御“恶意回包”或“伪装攻击”。实际防护需结合：
- HTTPS 证书验证（确保通信对端身份）
- 深度包检测（DPI）或下一代防火墙（NGFW）
- 终端杀毒软件（对落地文件进行扫描）
4.2 SSL/TLS 证书体系
- SSL（Secure Sockets Layer）已被TLS（Transport Layer Security）替代，但习惯仍称 SSL 证书。
- 证书颁发机构（CA）负责签发数字证书，中国有 CFCA、GDCA、沃通等具备资质的 CA。
- 操作系统信任链：Windows、macOS、Linux 等预置约 100~200 个根证书。新 CA 的根证书通过系统更新补丁（如 Windows 月度更新）添加，而非仅靠编号。
4.3 证书验证的性能优化
浏览器验证证书时：
- 根据证书中的“颁发者（Issuer）”字段，直接查找本地信任列表（索引查询，极快）。
- 进行 RSA/ECC 非对称解密，验证签名（数学运算，较慢，但仅 TLS 握手时执行一次）。
- 握手完成后，会话使用对称加密（AES），速度快。
五、后端服务与 BaaS 平台
5.1 后端服务的典型职责
- 暴露 RESTful API 或 GraphQL 接口
- 处理业务逻辑、权限校验
- 操作数据库（SQL/NoSQL）
- 返回 JSON/XML 数据
后端语言可选 Java、Python、Node.js、Go、Rust 等，各有适用场景。
5.2 Supabase 等 BaaS 平台
Supabase 是开源的后端即服务（Backend-as-a-Service）平台，提供：
- PostgreSQL 数据库（自动生成 REST API）
- 实时 WebSocket 订阅
- 内置用户认证（Auth）
- 文件存储
开发者只需调用前端 SDK 或 HTTP 接口，无需自行编写后端代码，适合快速原型开发。
六、跨平台桌面应用技术选型
6.1 React 与 Vue 的核心差异
| 维度 | React | Vue |
|---|---|---|
| 设计哲学 | 视图层库，灵活组合 | 渐进式框架，内置路由、状态管理 |
| 模板语法 | JSX（JavaScript 内嵌 XML） | 基于 HTML 的模板语法 |
| 数据流 | 单向数据流，需手动触发更新 | 响应式代理（Proxy），自动更新 |
| 学习曲线 | 较陡，需熟悉 Hooks、副作用 | 较平缓，官方文档详尽 |
6.2 Electron 与 Tauri 的对比
| 维度 | Electron | Tauri |
|---|---|---|
| 原理 | 内置 Chromium + Node.js | 使用操作系统原生 WebView（系统自带） |
| 安装包大小 | ~70–100 MB | ~5–10 MB |
| 内存占用 | 较高（~200 MB） | 较低（<50 MB） |
| 后端语言 | Node.js（JavaScript） | Rust |
| 系统能力 | 直接通过 Node.js 访问文件、网络 | 通过 Rust 提供的 IPC 接口调用系统 API |
| 典型项目 | VS Code、Slack、Figma（早期） | 微信开发者工具（部分）、Lane、CC Switch |
Tauri 更适合需要轻量、高性能且对包体积敏感的应用。
七、浏览器缓存与 Cookie
7.1 缓存目录位置
浏览器将下载的 HTML、CSS、JS、图片等缓存到本地磁盘，默认路径：
- Windows（Chrome/Edge）：
C:\Users\<用户名>\AppData\Local\Google\Chrome\User Data\Default\Cache - macOS（Chrome/Edge）：
/var/folders/.../T/.../Cache/ - Linux（Chrome/Edge）：用户临时目录
缓存用于减少重复网络请求，加速页面加载。
7.2 Cookie 的用途与特性
Cookie 是服务器通过Set-Cookie响应头写入浏览器的小型文本（≤4KB），在后续同源请求中自动携带。
主要用途：
- 会话管理（保持登录状态）
- 个性化设置（主题、语言）
- 用户追踪（分析、广告）
与缓存的区别：
- 缓存存资源，Cookie 存状态标识
- 缓存由浏览器管理，Cookie 由服务器控制（通过属性如
HttpOnly、Secure、SameSite）
现代应用更倾向使用LocalStorage或SessionStorage存储非敏感数据，身份认证则使用 JWT Token，手动添加到请求头，避免 Cookie 的自动携带带来的 CSRF 风险。
（支持资料、图片参考_相关定制）_)
