Skip to content

Vibe Vibe

Main Navigation 首页

0. 序章

主题

Sidebar Navigation

基础篇

写在最前面：这份教程是写给谁的

写给不同的你

自测清单：你应该从哪里开始？

学完这份教程，你将获得什么

第 1 章：觉醒 —— 为什么现在是编程最好的时代

1.1 编程已死，编程永生：从 Coder 到 Commander

1.1.1 2025 年，编程世界发生了什么

1.1.2 从 Coder 到 Commander 的角色转变

1.1.3 一个类比帮你理解

1.1.4 这对你意味着什么

1.2 核心概念：Vibe Coding 与 Spec Coding 详解

1.2.1 什么是 Vibe Coding

1.2.2 什么是 Spec Coding（规范驱动开发）

1.2.3 Vibe vs Spec：什么时候用什么

1.2.4 其他你需要知道的概念

1.3 破除迷信：不懂英文、数学不好也能写代码吗？

1.3.1 迷信一："编程需要数学很好"

1.3.2 迷信二："要先学好英文"

1.3.3 迷信三："需要懂很多技术名词"

1.3.4 迷信四："Vibe Coding 只是玩具"

1.3.5 迷信五："AI 会抢走程序员的工作"

1.4 工具初探：AI 编程工具选型指南

1.4.1 AI 编程工具全景图（2025 年版）

1.4.2 所有工具的共同能力

1.4.3 按你的情况选择

1.4.4 本教程的工具策略

1.4.5 各工具快速上手指南

1.5 Hello World：你的第一个 3 分钟 AI 网页

1.5.1 目标与准备

1.5.2 Step by Step 操作

1.5.3 恭喜你！你已经完成了什么

1.5.4 常见问题 FAQ

第 2 章：心法 —— 像产品经理一样思考

2.1 拒绝功能堆砌：为什么你的 AI 写不出复杂的 App？

2.1.1 最常见的错误

2.1.2 背后的思维误区

2.1.3 真实案例对比

2.1.4 正确的思维方式

2.2 MVP 思维：如何设计一个"能跑的最小版本"

2.2.1 什么是 MVP

2.2.2 为什么 AI 时代 MVP 更重要

2.2.3 MVP 设计三步法

2.2.4 MVP 设计模板

2.2.5 常见 MVP 设计错误

2.3 灵魂三问：用户是谁？痛点在哪？为何用你？

2.3.1 问题一：用户是谁？

2.3.2 问题二：痛点在哪？

2.3.3 问题三：为什么用你的？

2.3.4 灵魂三问检查清单

2.4 实战演练：拆解一个"背单词软件"的想法

2.4.1 原始想法

2.4.2 用灵魂三问分析

2.4.3 用 MVP 思维设计

2.4.4 写给 AI 的 Prompt

2.4.5 举一反三：其他想法的拆解思路

第 3 章：技法 —— 与 AI 对话的艺术

3.1 提示词工程基础：Context is King

3.1.1 核心理解

3.1.2 好的 Prompt 四要素：WHAT WHO HOW NOT

3.1.3 对比示例

3.1.4 提升效果的技巧

3.1.5 Prompt 模板库

3.2 用户旅程地图：把想法变成 AI 能懂的路径

3.2.1 什么是用户旅程地图

3.2.2 用户旅程的基本结构

3.2.3 用户旅程模板

3.2.4 实例：背单词软件的用户旅程

3.2.5 如何把用户旅程转化为 Prompt

3.3 编写第一份 PRD：让 AI 不再胡编乱造

3.3.1 什么是 PRD

3.3.2 简化版 PRD 模板（适合 AI 编程）

3.3.3 用户故事的写法

3.3.4 实例：背单词软件 PRD

3.3.5 让 AI 帮你写 PRD

3.4 功能优先级 P0/P1/P2：学会对 AI 说"这个先不做"

3.4.1 什么是 P0/P1/P2

3.4.2 为什么优先级很重要

3.4.3 如何划分优先级

3.4.4 在 Prompt 中使用优先级

3.4.5 优先级划分练习

第 4 章：实战 —— 从 0 到 1 开发个人工具

4.1 环境准备：无需命令行的开发环境搭建

4.1.1 方案 A：纯网页方案（推荐新手）

4.1.2 方案 B：本地 + AI 对话方案

4.1.3 方案 C：专业 IDE 方案（有编程基础）

4.1.4 本章使用的方案

4.2 第一轮：生成静态页面 —— 先看"脸"

4.2.1 项目选择：「每日一句」网页

4.2.2 Step 1：描述基本页面

4.2.3 Step 2：查看效果，调整样式

4.2.4 Step 3：确认静态页面 OK

4.2.5 阶段性成果

4.3 第二轮：注入逻辑与交互 —— 再长"脑"

4.3.1 Step 1：添加多条名言

4.3.2 Step 2：测试交互

4.3.3 Step 3：添加动画效果（可选）

4.3.4 阶段性成果

4.4 第三轮：数据存储基础

4.4.1 为什么需要数据存储

4.4.2 从 LocalStorage 开始（最简单）

4.4.3 理解 LocalStorage 的工作原理

4.4.4 进阶：云端存储简介（了解即可）

4.4.5 阶段性成果

4.5 Debug 指南：当 AI 报错时，如何用 AI 修复 AI

4.5.1 最常用的方法：复制粘贴大法

4.5.2 如何打开浏览器控制台

4.5.3 错误类型速查表

4.5.4 当 AI 反复修不好时

4.5.5 Debug 心态

第 5 章：进阶 —— 真实世界的开发流程

5.1 版本管理：为什么我改崩了回不去？

5.1.1 问题场景：改崩了回不去的痛

5.1.2 什么是版本管理

5.1.3 入门方案：手动版本管理

5.1.4 正规方案：Git 图形化工具

5.1.5 用 GitHub Desktop 的基本流程

5.1.6 版本管理最佳实践

5.2 部署上线：把你的网页发给全世界

5.2.1 为什么要部署

5.2.2 最简单的部署方案：Vercel

5.2.3 其他部署选择

5.2.4 部署后的自定义域名（可选）

5.2.5 部署常见问题

5.3 安全意识：不要把密码告诉 AI

5.3.1 绝对不能做的事情

5.3.2 为什么这很危险

5.3.3 正确的做法

5.3.4 初学阶段的简单建议

5.3.5 安全检查清单

5.4 局限性：Vibe Coding 搞不定的时刻

5.4.1 "Vibe Coding 宿醉"现象

5.4.2 Vibe Coding 适合什么

5.4.3 什么时候需要专业支持

5.4.4 Vibe Coding 的正确定位

5.4.5 从 Vibe Coding 到专业开发的进阶路径

第 6 章：不同人群的学习路径与资源

6.1 文科生/商科生路径

6.1.1 你的优势

6.1.2 推荐发展方向

6.1.3 推荐项目清单

6.1.4 进阶学习建议

6.1.5 案例：HFT 协会金融专业学生的故事

6.2 理工科学生路径

6.2.1 你的优势

6.2.2 推荐发展方向

6.2.3 推荐项目清单

6.2.4 进阶学习建议

6.2.5 从 Vibe 到专业开发的桥梁

6.3 职场人士路径

6.3.1 你的优势

6.3.2 推荐发展方向

6.3.3 推荐项目清单

6.3.4 与技术同事协作的建议

6.3.5 职场应用案例

6.4 推荐学习资源

6.4.1 官方文档

6.4.2 优质中文社区

6.4.3 推荐关注的人/账号

6.4.4 推荐书籍/课程

6.5 持续学习建议

6.5.1 建立学习习惯

6.5.2 保持更新

6.5.3 输出倒逼输入

6.6 进入进阶版的准备

6.6.1 自测清单：你准备好进阶了吗？

6.6.2 推荐的过渡项目

6.6.3 基础版到进阶版的知识桥梁

6.6.4 进阶版内容预览

结语：给未来的你

下部预告：Vibe Coding 全栈实战教程

进阶版核心内容详解

附录

A.1 项目创建类

A.2 代码修改类

A.3 问题解决类

A.4 文档生成类

B.1 JavaScript 错误

B.2 CSS/样式问题

B.3 交互问题

B.4 工具问题

C.1 AI 编程相关

C.2 开发相关

C.3 技术相关

D.1 对话式 AI 对比

D.2 IDE 集成式对比

D.3 专用 AI IDE 对比

D.4 部署平台对比

E.1 个人工具类（10 个）

E.2 效率工具类（10 个）

E.3 内容创作类（10 个）

E.4 数据可视化类（10 个）

进阶篇

0 ｜Bootcamp（概念打底）

0.0 进阶版要学什么

0.0.1 到底什么才算全栈

0.0.2 为什么 Vibe 一下就能编程

0.0.3 学完这门课我能做什么

0.1 计算机基础知识

0.1.1 文件系统：电脑的数字图书馆

0.1.2 进程与端口：餐厅里的服务员和电话分机

0.1.3 权限：谁能动我的数字资产

0.2 命令行：与计算机的直接对话

0.2.1 导航：在数字世界里自由穿梭

0.2.2 文件操作：数字世界的建筑师

0.2.3 权限管理：数字资产的守护神

0.2.4 跨平台：命令行的“方言”

0.3 前端基础：构建用户眼中的世界

0.3.1 搭建网页的骨架——HTML：结构与语义化标签

0.3.2 给网页穿上衣服——CSS：样式与布局基础

0.3.3 让网页动起来——JavaScript：变量/函数/事件基础

0.3.4 为什么骨架、衣服和动作要分开——三者协作：分离关注点的设计思想

0.3.5 你的电脑如何上网——网络基础：HTTP/HTTPS/域名/端口/API 概念

0.3.5.1 浏览器在说什么——HTTP 协议基础：请求/响应/状态码

0.3.5.2 为什么网址会有把锁——HTTPS 与安全：SSL/TLS 证书配置

0.3.5.3 https://www.baidu.com/search?q=www.baidu.com 是什么——域名与 DNS：域名解析与配置

0.3.5.4 电脑上的门牌号——端口与服务：常用端口与服务映射

0.3.5.5 程序间的通用语言——API 设计基础：RESTful 与 GraphQL 概念

0.4 搭建你的编程工作室——开发环境配置：Node.js、包管理器与工具链

0.4.1 工具箱该选哪一个——包管理器选择：npm vs pnpm vs yarn

0.4.2 为什么我的 Node 版本不对——Node.js 版本管理与 nvm

0.4.3 给 JS 代码请个语法保镖——TypeScript 配置与最佳实践

0.5 从随心所欲到规行矩步——JS → TS 思维转换

0.5.1 动态与静态到底在说什么——JavaScript/TypeScript 思维转换：从动态到静态类型

0.6 别让你的网站裸奔——开发安全底线

0.6.1 像保安一样思考——安全设计原则

0.6.2 你的密码放对地方了吗——环境变量与密钥管理：安全存储的最佳实践

0.7 把程序装进集装箱——Docker 核心概念

0.7.1 模具与标准零件——镜像与容器：构建/运行/生命周期管理

0.7.2 给集装箱贴上标签——Docker 环境变量配置

0.7.3 集装箱之间如何对话——网络与端口

0.7.4 程序关了数据还在吗——数据卷

0.7.5 可视化的集装箱港口——1Panel 核心理念：运行环境 = 预配置 Docker

1 ｜概念与准备（从思维到工具）

1.1 先让 Hello World 跑起来——工具装配与最小项目验证

1.1.1 神器如何选——编辑器选择：VSCode vs Cursor 功能对比

1.1.2 给你的 IDE 装上大脑——AI 助手集成：Trae/Cursor 配置

1.1.3 一键生成项目骨架——Next.js 项目初始化：create next app 详解

1.1.4 亲眼看到第一个页面——Hello World 验证：本地开发服务器启动

1.2 你不是一个人在战斗——Vibe Coding 心法：从"写代码"到"指挥 AI 写代码"

1.2.1 从编码员到指挥官——AI 辅助编程的核心思维转变

1.2.2 让 AI 听懂人话——AI Native 应用特点：自然语言交互与智能化工作流

1.2.3 如何向 AI 下达指令——提示工程基础：如何与 AI 有效沟通

1.2.4 AI 写的代码靠谱吗——代码审查：人机协作的质量保证

1.2.5 这么多 AI 工具该用谁——模型选择指南：Claude/GPT/Cursor 等工具的适用场景

1.3 让全世界看到你的作品——最小上线实战与 Vercel/EdgeOne 部署

1.4 如何让 AI 成为真·队友——AI 协作工作流实战与最佳实践

1.5 全副武装你的开发环境——工具链与环境：IDE/Git/Node.js/数据库/部署平台

1.5.1 磨刀不误砍柴工——IDE 选择：VS Code 配置与插件推荐

1.5.2 团队协作如何不打架——Git 工作流：分支策略与协作规范

1.5.3 数据仓库怎么选——数据库选择：PostgreSQL vs MySQL vs SQLite

1.5.4 项目最终落户在哪——部署平台：容器化与云服务选择

1.5.5 零配置的前端部署——Vercel：Next.js 应用的最佳部署平台

1.5.6 国内访问更快的选择——腾讯云 EO：边缘优化与 CDN 加速

2 ｜技术选型与架构蓝图

2.0 选对工具，事半功倍——技术栈全景

2.1 为什么我们选这套装备——架构全景

2.1.1 选它们图什么——技术栈选择理由

2.1.2 文件目录就是网页路由——App Router 架构

2.1.3 前后端代码写一起？——RSC 渲染策略

2.1.4 在前端直接调后端——Server Actions

2.1.5 图片和文件放哪里最快——OSS 对象存储

2.2 你的网页何时被创建——Next.js 渲染策略全景

2.2.1 用户浏览器自己渲染——CSR 客户端渲染

2.2.2 服务器渲染好再发——SSR 服务器端渲染

2.2.3 提前渲染好所有页面——SSG 静态站点生成

2.2.4 半静态半动态渲染——ISR 增量静态再生

2.2.5 具体页面具体分析——混合渲染

2.3 Next.js 核心概念深入

2.3.1 并行路由与拦截路由

2.3.2 客户端边界与数据流

2.3.3 Server Actions 最佳实践

2.3.4 缓存策略详解

2.4 前后端如何高效协作——接口契约

2.4.1 先商量好再动手——契约先行

2.4.2 假数据也能开发——Mock 数据

2.4.3 你写你的，我写我的——并行开发

2.4.4 为什么接口对不上——联调测试

2.5 代码为什么会越写越乱——架构分层

2.5.1 用户能看见的层——表现层

2.5.2 前后端沟通的层——接口层

2.5.3 处理复杂业务的层——业务层

2.5.4 和数据库打交道的层——数据层

2.5.5 层与层如何对话——层间通信

2.6 全家桶服务好不好用——Supabase 适用与取舍

2.6.1 Supabase 服务概览

2.6.2 适用场景：快速原型 vs 生产环境

2.6.3 成本考量：免费额度与付费计划

2.6.4 迁移策略：从 Supabase 到自建服务

3 ｜前端到后端（把页面跑起来）

3.1 你的文件目录就是网站地图——App Router：文件路由与数据获取

3.1.1 页面放哪，路由就在哪——文件系统路由

3.1.2 如何给成千上万的页面做路由——动态路由

3.1.3 整理乱糟糟的路由——路由组

3.1.4 数据该何时获取——数据获取策略

3.2 像搭乐高一样构建页面——前端构建块

3.2.1 积木的插槽怎么设计——Props 类型定义

3.2.2 积木的状态谁来管——State 管理

3.2.3 复杂状态的全局管理——全局状态管理

3.2.4 积木的副作用怎么办——Effect 副作用

3.2.5 封装你自己的积木——自定义 Hooks

3.2.6 积木该多大才合适——组件设计

3.3 能不能让 AI 看懂设计稿——Figma 集成实战与 AI 协作

3.4 告别选择困难症——Tailwind + shadcn/ui

3.4.1 不用想名字的 CSS——Tailwind CSS

3.4.2 复制粘贴就能用的组件——shadcn/ui

3.4.3 告别五颜六色的黑——设计系统

3.4.4 手机和电脑都能看——响应式设计

3.5 别靠猜来找 Bug——Debug 实战

3.5.1 看看网络请求慢在哪——Network 面板

3.5.2 代码到底跑没跑——Console 调试

3.5.3 为什么页面这么卡——Performance 分析

3.5.4 组件状态对不对——React DevTools

3.6 别把厨房建在客厅——API Route 与服务层分离

3.6.1 你的 API 长啥样——API Route 结构

3.6.2 非法请求怎么拦住——请求验证

3.6.3 业务逻辑放哪里——服务层设计

3.6.4 统一处理报错——错误处理

3.7 可用性设计

3.7.1 错误边界

3.7.2 空态设计

3.7.3 加载状态

3.7.4 错误重试

3.8 可访问性与国际化

3.8.1 WCAG 标准

3.8.2 设计令牌

3.8.3 颜色对比度

3.8.4 国际化 i18n

3.8.5 本地化 l10n

4 ｜数据库与数据生命周期

4.1 数据关系要先理清——数据建模与 ER 图：实体/关系/约束；面向变更与演进

4.1.1 你的数据有哪些主角——实体识别：业务对象抽象与属性定义

4.1.2 主角之间什么关系——关系设计：一对一/一对多/多对多

4.1.3 数据表的设计规则——范式理论：1NF/2NF/3NF 规范化过程

4.1.4 规则可以被打破吗——反规范化：性能优化的权衡考虑

4.2 数据库到底在忙什么——关系型数据库：CRUD/索引/事务

4.2.1 增删改查的背后——CRUD 操作：Create/Read/Update/Delete 基础

4.2.2 为什么查询这么快——索引原理：B Tree 索引与查询优化

4.2.3 转账为什么是安全的——事务特性：ACID 属性与隔离级别

4.2.4 同时操作数据怎么办——并发控制：锁机制与死锁预防

4.2.5 张三为什么看不了李四的数据——行级安全：PostgreSQL 核心安全特性

4.3 如何命令数据库干活——SQL 基础操作：表/行/列、主键/外键、索引、事务、JOIN、CRUD

4.3.1 如何创建一张表——DDL 数据定义：CREATE/ALTER/DROP 语句

4.3.2 如何操作表里的数据——DML 数据操作：INSERT/UPDATE/DELETE/SELECT

4.3.3 如何给数据上规矩——约束定义：主键/外键/唯一/检查约束

4.3.4 如何关联多张表——JOIN 查询：INNER/LEFT/RIGHT/FULL JOIN

4.3.5 如何统计数据——聚合函数：COUNT/SUM/AVG/MAX/MIN

4.4 告别手写 SQL——Prisma 实战应用

4.4.1 Prisma 安装配置：CLI 工具与依赖管理

4.4.2 Schema 文件结构：generator/datasource/model

4.4.3 模型定义：字段类型与关系映射

4.4.4 数据库连接：连接字符串与环境配置

4.4.5 迁移与类型生成：db:generate / db:migrate

4.4.6 种子数据：prisma/seed.ts 与 npm run db:seed

4.4.7 复杂关系如何设计——数据建模最佳实践

4.4.8 查询如何更高效——高级查询技巧：关联查询与性能优化

4.4.9 数据如何保证一致——事务处理：数据一致性保证

4.5 线上数据库动手术——数据库迁移策略：生产环境的变更管理

4.5.1 开发和生产环境如何同步——迁移策略：开发/测试/生产环境同步

4.5.2 手术失败了怎么办——回滚机制：迁移失败的恢复方案

4.5.3 改表结构时数据怎么办——数据迁移：结构变更时的数据处理

4.6 如何批量制造假数据——种子数据高级应用：多环境数据管理

4.6.1 重复执行也不怕——多环境与幂等造数

4.6.2 测试前后的清理——与测试/E2E 的执行顺序与清理

4.6.3 生产数据不能明文给测试——生产数据脱敏与测试数据生成

4.7 数据打架了怎么办——数据同步：幂等/冲突处理

4.7.1 重复提交了怎么办——幂等性设计：重复请求的安全处理

4.7.2 同时修改了怎么办——冲突检测：并发修改的识别机制

4.7.3 冲突了听谁的——冲突解决：最后写入胜利 vs 合并策略

4.7.4 数据不一致了怎么办——数据一致性：最终一致性与强一致性

4.8 拓展：Supabase 为何如此强大——存储与认证联动

4.8.1 拓展：文件怎么和权限挂钩——存储桶：文件上传与权限控制

4.8.2 拓展：数据一变就通知我——实时订阅：数据变更推送

4.8.3 拓展：离用户最近的计算——Edge Functions：边缘计算函数

5 ｜产品与文档（让人和 AI 都读得懂）

5.1 先把想做的说明白——AI 时代产品开发理念

5.1.1 为什么 AI 应用不一样——AI Native 应用特点

5.1.10 把 AI 变成专家顾问——批判性专家角色

5.1.2 AI 如何包办开发——AI 协助产品开发全流程

5.1.3 告别繁琐的点击——AI 重塑交互方式

5.1.4 Vibe 如何改变产品设计

5.1.5 怎么和 AI 好好说话——Prompt 工程核心原则

5.1.6 如何让 AI 记住你的项目——上下文管理策略

5.1.7 别把 AI 累死——工具调用策略

5.1.8 哪家 AI 最懂我——模型选择与应用

5.1.9 AI 写的代码能用吗——代码质量控制

5.2 为什么说先写文档再编码——PRD 基础

5.2.1 这份文档算数吗——文档状态管理

5.2.2 到底改了啥——更新记录格式

5.2.3 去哪里找相关资料——相关文档索引

5.2.4 别让黑话搞晕团队——术语表维护

5.3 不会提需求怎么办——让 AI 帮你问对问题

5.3.1 如何看透题目要求——AI 辅助需求拆解

5.3.2 我该做什么功能——AI 辅助头脑风暴

5.3.3 用户到底想要什么——AI 协助用户洞察

5.3.4 从想法到功能列表——AI 辅助功能梳理

5.3.5 哪些功能最重要——MVP 视角收敛

5.4 你写的文档 AI 看得懂吗——AI 可读的 PRD

5.4.1 为什么格式很重要——结构化 PRD

5.4.2 数据从哪来，到哪去——输入输出定义

5.4.3 万一...怎么办——边界条件与异常处理

5.4.4 为什么 AI 偏爱 Markdown——Markdown 格式优化

5.5 先讲故事再列清单——用户故事与优先级

5.5.1 像用户一样描述需求——用户故事格式

5.5.2 我们要解决什么——问题陈述

5.5.3 哪些该做，哪些不做——范围界定

5.5.4 到底先做哪个——优先级矩阵

5.6 方案是用来减风险的——技术方案

5.6.1 程序如何互相调用——接口设计

5.6.2 数据该怎么存——数据表设计

5.6.3 哪里归我管——系统边界

5.6.4 提前想想会出什么错——风险评估

5.6.5 我一个人搞得定吗——单人自评

5.7 别让文档烂尾——文档即代码

5.7.1 文档该放哪里——文档目录结构

5.7.2 改了代码必须改文档——PR 流程

5.7.3 文档也需要后悔药——文档版本控制

5.7.4 让机器提醒你更新文档——自动化检查

6 ｜认证与安全（Web 安全高级）

6.1 别再从零开始写登录注册——NextAuth 快速上手

6.1.1 开箱即用的认证——NextAuth 配置

6.1.2 Google 登录怎么接——Google OAuth 实战

6.1.3 GitHub 登录怎么接——GitHub OAuth 实战

6.1.4 用户登录状态怎么保持——会话管理

6.1.5 登录失败了怎么办——常见问题排查

6.2 你是谁与你能做什么——认证与授权安全

6.2.1 JWT 安全：密钥管理与过期策略

6.2.2 Session 安全：存储与传输安全

6.2.3 Cookie 安全：HttpOnly/Secure/SameSite 属性

6.2.4 OAuth 2.0：授权码模式与安全配置

6.2.5 多因素认证：增强账户安全性

6.3 守好程序的大门——API 安全防护实践

6.3.1 认证与授权：JWT/Session/OAuth 选择与实现

6.3.2 预检不是麻烦是保护：CORS 机制

6.3.3 脚本别跑野路子：XSS 攻击

6.3.4 身份被借用的防线：CSRF 攻击

6.3.5 API 限流与防护

6.4 认识常见的网络小偷——常见 Web 安全威胁与防护

6.4.1 XSS：输入验证与输出编码

6.4.2 CSRF：令牌验证与 SameSite

6.4.3 CORS：跨域请求安全策略

6.4.4 同源策略：浏览器安全基础

6.4.5 输入验证：防止注入攻击

6.5 接入微信/QQ 登录——第三方登录集成深度

6.5.1 OAuth 2.0 流程：授权码模式详解

6.5.2 微信登录：微信开放平台与公众号登录

6.5.3 QQ 登录：QQ 互联平台接入

6.5.4 钉钉登录：企业内部应用与第三方应用

6.5.5 多平台账号如何统一——用户账号绑定与解绑

6.5.6 登录异常怎么办——错误处理

7 ｜API 设计与开发规范

7.1 接口是合同不是暗语——HTTP 与 API

7.1.1 HTTP 方法语义

7.1.2 JSON 数据格式

7.1.3 分页策略

7.1.4 过滤与排序

7.1.5 幂等性保证

7.2 REST 与错误处理

7.2.1 REST 约束

7.2.2 资源设计

7.2.3 HTTP 状态码

7.2.4 错误响应格式

7.2.5 追踪 ID

7.3 API 文档

7.3.1 文档格式选择

7.3.2 Swagger UI

7.3.3 Postman 集合

7.3.4 文档同步

7.4 API 版本管理

7.4.1 语义化版本

7.4.2 版本控制策略

7.4.3 向后兼容

7.4.4 变更日志

8 ｜项目规则与协作

8.1 你的时光机和安全网——Git 基本流程

8.1.1 后悔药怎么吃——Git 基础命令

8.1.2 平行世界里写代码——分支操作

8.1.3 代码打架了怎么办——冲突解决

8.1.4 一键还原到昨天——版本回滚

8.1.5 哪些文件不该被穿越——.gitignore 的作用

8.2 为什么不能随便提交代码——分支策略

8.2.1 专业团队的工作流——Git Flow

8.2.2 小团队的敏捷工作流——GitHub Flow

8.2.3 主分支不是谁都能动——分支保护

8.2.4 同事帮你看代码——代码审查

8.3 让你(和 AI)看懂改了什么——提交规范

8.3.1 提交信息的标准格式

8.3.2 feat 和 fix 是什么意思——类型分类

8.3.3 机器人帮检查格式——自动化检查

8.3.4 自动生成更新日志——CHANGELOG 生成

8.4 哪些文件不该进仓库——Gitignore 进阶

8.4.1 黑名单第一条——依赖与构建产物

8.4.2 密码千万别提交——敏感文件管理

8.4.3 电脑垃圾和编辑器配置——系统与 IDE 文件

8.4.4 代码提交前自动检查——防误提交

8.5 开工前对齐了吗——工作流程

8.5.1 做之前先确认——需求对齐

8.5.2 技术方案靠不靠谱——技术评审

8.5.3 做完了怎么算——验收标准

8.5.4 上线的标准流程——部署流程

9 ｜测试与质量

9.1 懒人的测试金字塔——优先测服务层与 API

9.1.1 测试也分三六九等——测试分层：单元/集成/端到端测试

9.1.2 时间花在刀刃上——测试优先级：投入产出比分析

9.1.3 业务逻辑是核心——服务层测试：业务逻辑验证重点

9.1.4 接口是门面——API 测试：接口契约与边界条件

9.2 在沙盒里跑测试——测试环境与隔离：.env.test、迁移、数据清理

9.2.1 测试不能影响生产——测试环境配置：独立的数据库与服务

9.2.2 测试专用的配置——环境变量：测试专用配置管理

9.2.3 测试前初始化数据库——数据库迁移：测试数据库的初始化

9.2.4 每次测试都是全新的——数据清理：测试间的状态隔离

9.3 给你的代码上保险——单元测试/集成测试：Jest + Test DB；seed 前置

9.3.1 测试框架怎么选——Jest 配置：测试框架与断言库

9.3.2 测试数据放哪——测试数据库：内存数据库 vs 真实数据库

9.3.3 测试前准备好数据——Seed 数据：测试用例的数据准备

9.3.4 外部依赖怎么办——Mock 策略：外部依赖的模拟

9.4 出了错如何快速定位——错误处理与日志规范：级别/上下文/脱敏；修复 → 文档同步

9.4.1 错误也分等级——日志级别：ERROR/WARN/INFO/DEBUG 使用

9.4.2 谁在什么时间干了啥——上下文信息：请求 ID/用户 ID/操作类型

9.4.3 日志里不能泄露密码——敏感信息脱敏：实施指南与安全设计原则

9.4.4 崩了也要优雅——错误恢复：异常处理与用户提示

9.4.5 错误要记录在案——文档同步：错误码文档与处理指南

9.5 让机器人帮你守住质量——CI 质量门禁与 GitHub Actions

9.5.1 TS 编译通不过——类型检查：TypeScript 编译验证

9.5.2 代码风格统一了吗——代码规范：ESLint/Prettier 自动检查

9.5.3 项目能打包成功吗——构建验证：生产构建成功性检查

9.5.4 测试覆盖了多少代码——测试覆盖率：代码覆盖率阈值设置

9.5.5 不合格的代码不准合并——门禁策略：失败阻断与通知机制

10 ｜部署与运维

10.1 上线前必须知道的事——云服务/网络/域名/证书

10.1.1 服务器放哪——云服务选择：计算/存储/网络资源规划

10.1.2 网站要备案吗——合规要求：ICP 备案与公安备案

10.2 点点鼠标就上线——1Panel 可视化部署：从零到上线

10.2.1 应用商店还是自定义——界面操作：应用商店 vs 自定义应用

10.2.2 部署到底要填什么——配置要素：镜像/启动命令/端口/卷/环境变量

10.2.3 Next.js 项目怎么部署——Next.js 部署示例：生产构建与端口配置

10.2.4 NestJS 项目怎么部署——NestJS 部署示例：API 服务与数据库连接

10.2.5 部署失败了怎么办——常见问题：端口冲突/环境变量/权限问题

10.3 一键启动所有服务——Docker Compose 编排：多服务协同

10.3.1 编排文件怎么写——Compose 文件结构：服务定义与依赖关系

10.3.2 服务之间如何对话——网络与卷：服务间通信与数据共享

10.3.3 开发和生产用一套配置吗——环境隔离：开发/测试/生产配置差异

10.3.4 服务挂了能自动重启吗——健康检查：服务可用性监控与自动重启

10.4 网站的交通指挥官——反向代理与负载均衡：Nginx 配置实战

10.4.1 请求该转发给谁——反向代理：upstream 配置与请求转发

10.4.2 HTTPS 证书怎么配——SSL 终止：HTTPS 证书配置与自动续期

10.4.3 用户太多了怎么办——负载均衡：多实例分发策略

10.4.4 图片如何加速访问——静态资源：缓存策略与 CDN 集成

10.5 网站生病了怎么办——监控与日志：可观测性体系

10.5.1 网站还活着吗——应用监控：健康检查端点与指标收集

10.5.2 日志太多了怎么办——日志管理：结构化日志与日志轮转

10.5.3 一出错就通知我——错误追踪：异常捕获与告警机制

10.5.4 性能瓶颈在哪——性能分析：响应时间与资源使用监控

11 ｜发布、复盘与教学沉淀

11.1 语义化版本与发布流

11.1.1 SemVer 规范：主版本/次版本/修订版本

11.1.2 Release 分支：发布准备与稳定化

11.1.3 Git Tag：版本标记与发布点

11.1.4 发布公告：变更日志与升级指南

11.2 GitHub Actions 质量门禁与生产部署

11.2.1 Workflow 配置：触发条件与执行环境

11.2.2 质量检查：测试/构建/安全扫描

11.2.3 部署流水线：自动化部署到生产环境

11.2.4 密钥管理：CI/CD 环境配置与安全存储

11.3 知识沉淀：课程化产出

11.3.1 文档结构：项目文档的组织方式

11.3.2 知识沉淀：经验总结与最佳实践

11.3.3 教学材料：案例研究与练习题

11.3.4 版本控制：文档与代码的同步更新

11.4 复盘模板：问题分析与闭环改进

11.4.1 问题识别：故障现象与影响范围

11.4.2 根因分析：技术原因与流程缺陷

11.4.3 修复方案：临时修复与根本解决

11.4.4 预防措施：流程改进与监控加强

12 ｜高级专题与优化

12.1 为什么 JS 能一心多用——Node 进程与事件循环：回调/Promise/async await

12.1.1 JS 的心脏——事件循环机制：Call Stack/Event Queue/Callback Queue

12.1.2 套娃式回调——异步编程模式：回调函数与回调地狱

12.1.3 链式调用——Promise 链式调用：then/catch/finally

12.1.4 像写同步一样写异步——async/await 语法：同步风格的异步编程

12.2 如何让谷歌/百度搜到你——SEO：SSR/Meta/站点地图/结构化数据

12.2.1 搜索引擎如何工作——搜索引擎优化基础：爬虫与索引原理

12.2.2 SSR 对 SEO 的好处——SSR 优势：首屏渲染与 SEO 友好

12.2.3 网页的身份证——Meta 标签：title/description/keywords

12.2.4 给爬虫画地图——站点地图：XML Sitemap 生成与提交

12.2.5 帮爬虫看懂内容——结构化数据：Schema.org 与 JSON LD

12.3 AI 应用的最后一公里——Vercel AI SDK 与流式响应：Streaming UI 实战

12.3.1 AI 应用的核心模式——流式响应原理：为什么需要 Streaming UI

12.3.2 官方工具包——Vercel AI SDK：安装配置与基础使用

12.3.3 实时生成内容——流式文本生成：useChat/useCompletion 实战

12.3.4 用户体验优化——加载状态与错误处理：优雅的 AI 交互设计

12.3.5 高级应用场景——RAG 与多模态：检索增强生成与图文混合

12.4 超越 HTTP 的实时世界——WebSockets 实时通信：在线聊天与协作功能

12.4.1 为什么需要实时通信——WebSocket vs HTTP：长连接的优势

12.4.2 建立实时连接——Socket.io 基础：服务端与客户端配置

12.4.3 构建在线聊天室——实时消息传递：房间管理与消息广播

12.4.4 处理连接异常——连接管理：断线重连与状态同步

12.4.5 现代化选择——PartyKit：边缘计算的实时通信方案

12.5 超大文件如何秒传——文件分片传输：断点续传/完整性校验

12.5.1 文件拆开传——分片上传原理：大文件切分与并行传输

12.5.2 网断了接着传——断点续传：上传进度保存与恢复

12.5.3 传的数据对不对——完整性校验：MD5/SHA256 哈希验证

12.5.4 上传失败怎么办——错误处理：网络异常与重试机制

12.6 如何友好地爬取数据——爬虫：速率/robots/反爬概要

12.6.1 爬虫的规矩——爬虫伦理：robots.txt 与网站条款

12.6.2 别把对方网站爬崩了——速率控制：请求频率与并发限制

12.6.3 网站如何防爬虫——反爬虫机制：验证码/IP 限制/User Agent

12.6.4 合法地获取数据——合规爬虫：API 优先与数据使用规范

12.7 功能下线的艺术——版本化与变更日志：兼容期与弃用路线图

12.7.1 API 版本的规则——API 版本策略：URL/Header 版本控制

12.7.2 别让升级搞坏旧应用——向后兼容：破坏性变更的避免

12.7.3 优雅地告别——功能下线的平滑过渡

12.7.4 变更要广而告之——开发者沟通机制

实践篇

文科生/商科生项目

理工科学生项目

职场人士项目

核心技能 (Core 1 4)

AI Agent 开发

全栈项目实战

工具与效率

优质文章篇

知名公司博客

优质播客

研究报告

优质 Newsletter

开发者社区

页面导航

4.2.3 Step 2：查看效果，调整样式

教程开发中

最后更新于:

Pager

上一篇4.2.2 Step 1：描述基本页面

下一篇4.2.4 Step 3：确认静态页面 OK