WEB · 前端 / 常用参考
Web 前端速查
汇总 HTTP 状态码、常用正则表达式、npm/yarn 命令对照与 VS Code 快捷键，日常 Web 高频参考一页直达，随查随用。
15状态码
9正则模式
80速查条目
📖 速查表
点击展开各小节
🌐 HTTP 状态码速查
| 状态码 | 类别 | 说明 | 常见场景 |
|---|---|---|---|
| 200 | 成功 | 请求成功，服务器返回所请求的数据 | GET 请求获取资源成功、POST 返回数据 |
| 201 | 成功 | 请求成功并创建了新资源。响应头应包含 Location 字段指向新资源 | POST 创建用户成功、上传文件创建完成 |
| 204 | 成功 | 请求成功但无返回内容。常用于 DELETE 操作 | 删除资源成功、更新部分字段成功 |
| 301 | 重定向 | 永久重定向。搜索引擎会更新索引为新 URL | 域名变更、HTTP → HTTPS 永久跳转 |
| 302 | 重定向 | 临时重定向。搜索引擎仍保留原 URL | 用户登录后跳转、A/B 测试 |
| 304 | 缓存 | 未修改，可使用缓存版本。响应体为空 | 基于 ETag / Last-Modified 的协商缓存 |
| 400 | 客户端错误 | 请求语法错误或参数无效，服务器无法理解 | JSON 格式错误、缺少必填参数、参数类型不匹配 |
| 401 | 客户端错误 | 未认证，请求需要身份验证。响应头包含 WWW-Authenticate | 未提供 token、token 过期、未登录 |
| 403 | 客户端错误 | 服务器理解请求但拒绝执行（权限不足） | 普通用户访问管理员接口、IP 被封禁 |
| 404 | 客户端错误 | 请求的资源在服务器上不存在 | URL 拼写错误、资源已被删除 |
| 405 | 客户端错误 | 请求方法不被允许。响应头应包含 Allow 字段 | 只允许 GET 的接口收到了 POST 请求 |
| 429 | 客户端错误 | 请求速率超过限制（Rate Limiting） | API 调用频率超限、爬虫被限速 |
| 500 | 服务端错误 | 服务器内部错误，无法完成请求 | 代码抛出未捕获异常、数据库连接失败 |
| 502 | 服务端错误 | 网关或代理服务器收到上游服务器无效响应 | Nginx 代理的后端服务挂了、PHP-FPM 进程崩溃 |
| 503 | 服务端错误 | 服务暂时不可用（过载或维护中）。响应头可包含 Retry-After | 服务器重启、流量激增被限流、停机维护 |
🔤 正则表达式常用模式
| 用途 | 正则表达式 | 说明 |
|---|---|---|
| 邮箱 | ^[\w.-]+@[\w.-]+\.\w{2,}$ | 匹配标准邮箱格式，支持点号和中划线 |
| 手机号 | ^1[3-9]\d{9}$ | 匹配中国大陆 11 位手机号（13~19 开头） |
| URL | ^https?://[\w.-]+(:\d+)?(/[\w./%-]*)?(\?[\w=&.-]+)?(#\w+)?$ | 匹配 HTTP/HTTPS URL，含端口、路径、查询参数和锚点 |
| IP 地址 | ^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$ | 匹配 IPv4 地址（建议配合数值范围校验：0-255） |
| 日期 | ^\d{4}-\d{2}-\d{2}$ | 匹配 YYYY-MM-DD 格式日期（如 2026-06-29） |
| 密码强度 | ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$ | 至少 8 位，包含大小写字母、数字和特殊字符 |
| \d | [0-9] | 匹配任意数字 |
| \w | [a-zA-Z0-9_] | 匹配单词字符（字母、数字、下划线） |
| \s | [ \t\n\r\f] | 匹配空白字符（空格、制表符、换行等） |
📦 npm / yarn 命令对比
| 操作 | npm | yarn | 说明 |
|---|---|---|---|
| 初始化项目 | npm init | yarn init | 创建 package.json |
| 安装依赖 | npm install | yarn | 安装 package.json 中所有依赖 |
| 添加依赖 | npm install react | yarn add react | 安装并写入 dependencies |
| 添加 dev 依赖 | npm install -D jest | yarn add -D jest | 安装并写入 devDependencies |
| 全局安装 | npm install -g vue | yarn global add vue | 安装到全局 node_modules |
| 移除依赖 | npm uninstall react | yarn remove react | 移除并更新 package.json |
| 更新依赖 | npm update react | yarn upgrade react | 更新到符合 package.json 范围的最新版 |
| 运行脚本 | npm run dev | yarn dev | 执行 scripts 中定义的命令 |
| 发布包 | npm publish | yarn publish | 将包发布到 npm registry |
| 缓存目录 | ~/.npm | ~/.yarn/cache | 离线安装时 yarn 更快 |
| 锁定文件 | package-lock.json | yarn.lock | 确保所有环境安装相同版本 |
⚡ VS Code 常用快捷键
| 快捷键 | 功能 | 说明 |
|---|---|---|
| Ctrl + P | 快速打开文件 | 输入文件名跳转到任意文件 |
| Ctrl + Shift + P | 命令面板 | 打开所有可用命令的搜索面板 |
| Ctrl + D | 选中下一个相同词 | 多次按可多光标编辑 |
| Ctrl + / | 切换行注释 | 在当前行或选中行切换注释 |
| Alt + ↑/↓ | 移动行 | 上下移动当前行或选中行 |
| Shift + Alt + ↓ | 复制行 | 快速复制当前行或选中行到下方 |
| Ctrl + Shift + L | 全选所有匹配项 | 选中文档中所有当前选中词 |
| F2 | 重命名符号 | 智能重命名变量、函数、类等 |
| Ctrl + \` | 打开终端 | 切换显示内置终端 |
| Ctrl + B | 切换侧边栏 | 显示/隐藏资源管理器侧边栏 |
| Ctrl + Shift + F | 全局搜索 | 在整个项目中搜索文本 |
| Ctrl + G | 跳转到行 | 输入行号快速跳转 |
| Ctrl + Shift + K | 删除行 | 删除当前行而不复制到剪贴板 |
| Ctrl + . | 快速修复 | 显示当前错误的快速修复建议 |
| Ctrl + Space | 触发建议 | 手动触发代码补全建议 |
📡 HTTP 方法与缓存
| 方法 / 机制 | 幂等 / 类型 | 说明 |
|---|---|---|
| GET | 幂等 · 安全 | 获取资源，参数在 URL 上，可被缓存与收藏，不应产生副作用 |
| POST | 不幂等 · 不安全 | 提交数据创建资源，参数在请求体；重复提交可能产生多条数据，需防重 |
| PUT | 幂等 · 不安全 | 全量替换资源，多次调用最终状态一致 |
| DELETE | 幂等 · 不安全 | 删除资源，重复调用结果一致（首次后返回 404 仍符合幂等语义） |
| PATCH | 约定不定 · 不安全 | 部分更新字段；自增类操作多次调用结果会叠加，不算幂等 |
| 强缓存 | Cache-Control / Expires | 命中则不发请求（200 from memory/disk cache）；max-age 优先于 Expires |
| 协商缓存 | ETag / Last-Modified | 先问服务器资源是否变化：未变返回 304 用本地缓存，变了返回 200 新内容 |
🍪 浏览器存储对比
| 存储方式 | 容量 / 时效 | 特性与适用 |
|---|---|---|
| cookie | 约 4KB · 可设过期 | 每次请求自动随 header 发送；适合会话标识 / token；注意 SameSite 防 CSRF |
| localStorage | 约 5~10MB · 永久 | 不随请求发送，需手动清除；适合主题、语言等前端偏好 |
| sessionStorage | 约 5MB · 标签页级 | 关闭标签页即清除，不随请求发送；适合一次性表单草稿 |
| IndexedDB | 数百 MB+ · 永久 | 浏览器端结构化数据库，支持事务与索引；适合离线应用与大数据量缓存 |
| 选型一句话 | 会话标识放 cookie，前端偏好放 localStorage，离线大数据用 IndexedDB | 敏感信息避免明文落前端存储 安全 |
♻️ 跨域与编码
| 主题 | 说明 | 要点 / 示例 |
|---|---|---|
| CORS 关键响应头 | 服务端声明允许的跨域来源与方法 | Access-Control-Allow-Origin / -Methods / -Headers / -Credentials |
| CORS 预检 | 非简单请求先发 OPTIONS 探测是否允许 | 带 Authorization 或 JSON content-type 的请求会触发预检 |
| 携带 cookie | 前端 withCredentials = true 且后端 Allow-Credentials = true | 此时 Allow-Origin 不能为通配符 *，须回显具体来源 |
| 开发代理 | vite / webpack proxy 把 /api 转发到后端 | 借服务端转发绕过浏览器同源限制，仅本地生效 |
| URL 编码 · + 与 %20 | 查询串中 + 会被解析为空格，路径中空格应编码为 %20 | 前端传参先 encodeURIComponent，避免服务端收到意外空格 高频坑 |
| encodeURI vs encodeURIComponent | 整体 URL 编码 vs 参数组件编码 | 拼接查询参数一律用 encodeURIComponent（连 & = ? 一起编码） |
🔁 缓存与重定向联动
| 机制 / 要点 | 关键写法 | 说明 / 避坑 |
|---|---|---|
| 301 长期缓存风险 | 301 vs 302 | 301 会被浏览器长期记住且极少回头重新验证——设错很难挽回；跳转目标不确定时先用 302，确认永久后再换 301 慎用 |
| no-cache 真实语义 | Cache-Control: no-cache | 不是"不缓存"，而是"可以缓存但每次使用前必须回源验证"；要求彻底不落盘用 no-store，两者别混用 |
| ETag 协商 | If-None-Match → 304 | 浏览器带回上次的 ETag，服务器比对未变化直接回 304 空响应体——省的是流量，不是请求数 |
| HTML 与静态资源分工 | no-cache + hash 文件名 + immutable | HTML 用 no-cache 保证入口始终最新；app.a1b2c3.js 配 max-age=31536000, immutable 吃满长缓存，内容变了 hash 自然变 黄金组合 |
| Service Worker 缓存 | Cache Storage API | SW 拦截请求自行决定回缓存还是走网络，优先级高于 HTTP 缓存头；上线必须带版本号与旧缓存清理策略 |
🧰 curl 调试常用参数
| 参数 | 作用 | 示例 / 说明 |
|---|---|---|
| -i | 响应附带响应头 | curl -i https://example.com，先看状态码与响应头再决定下一步 |
| -H | 添加请求头 | -H 'Authorization: Bearer xxx'，可重复叠加多个头 |
| -d | 发送请求体 | 发 JSON 必须显式配 -H 'Content-Type: application/json'；-d 会默认把方法改为 POST |
| -X | 指定请求方法 | -X PUT / -X DELETE，非默认方法建议显式写明 |
| -o | 输出到文件 / 丢弃 | -o /dev/null 丢弃响应体（Windows 用 NUL），只关心状态与耗时 |
| -w | 自定义计时模板 | -w '%{http_code} %{time_total}s' 一次拿到状态码与总耗时 |
| -L | 跟随重定向 | 遇 3xx 自动请求新地址；配合 -s -o NUL -w '%{num_redirects}' 可数出跳转次数 |