Claude Code 入门教程
适合人群 :技术小白、编程初学者、对 AI 编程感兴趣的所有人
学习目标 :读完本文后,你能够独立使用 Claude Code 完成一个完整的 OCP 项目
阅读时间 :约 45-60 分钟
难度等级:★☆☆☆☆(零基础友好)
目录
- 前言:你即将拥有的"超能力"
- [什么是 Claude Code?------ 你的 AI 编程伙伴](#什么是 Claude Code?—— 你的 AI 编程伙伴)
- [安装 Claude Code ------ 3 步搞定](#安装 Claude Code —— 3 步搞定)
- [第一次对话 ------ 跟 AI 说"你好"](#第一次对话 —— 跟 AI 说"你好")
- [核心概念:理解 Claude Code 的"大脑"](#核心概念:理解 Claude Code 的"大脑")
- 基础操作:读、写、改、搜
- [实战演练一:用 Claude Code 写一个网页](#实战演练一:用 Claude Code 写一个网页)
- 实战演练二:管理一个完整项目
- [高级功能:让 Claude Code 更强大](#高级功能:让 Claude Code 更强大)
- [OCP 项目实战指南](#OCP 项目实战指南)
- 常见问题与排错指南
- 总结与下一步
1. 前言:你即将拥有的"超能力"
1.1 先讲一个故事
想象一下,你刚进入一家新公司,被分配了一个任务:在两周内完成一个 OCP 项目。
你打开项目文档,看到一堆陌生的技术名词:Java、Maven、Spring Boot、REST API、数据库、Docker......你感到头皮发麻,不知从何下手。
这时候,如果有人告诉你:
"你旁边坐着一个经验丰富的资深程序员 ,他精通所有编程语言,24 小时待命,永远不会不耐烦,而且你只需用中文跟他聊天,他就能帮你写代码、修 Bug、部署项目。"
你会不会觉得这是天方夜谭?
这,就是 Claude Code。
1.2 Claude Code 是什么(用一句话说清楚)
Claude Code 是一个运行在终端里的 AI 编程助手。 你用自然语言(中文、英文都行)告诉它你想做什么,它就能帮你完成。
打个比方:
| 传统编程 | 使用 Claude Code |
|---|---|
| 你像一个建筑工人,需要自己搬砖、砌墙、刷漆 | 你像一个建筑设计师,画出蓝图,AI 帮你施工 |
| 你要记住每一行代码的语法 | 你只需要清楚地描述你想要什么 |
| 遇到 Bug 要花几小时搜索和调试 | 直接把错误信息告诉 Claude Code,它帮你修 |
| 学习新技术要先看几百页文档 | 直接让 Claude Code 边做边教你 |
1.3 学完本教程你能做什么
学完本教程后,你将能够:
- ✅ 独立安装和配置 Claude Code
- ✅ 用自然语言让 AI 帮你写代码
- ✅ 读懂、修改、管理一个完整的软件项目
- ✅ 使用 Claude Code 的高级功能(MCP、Skills、Workflows)
- ✅ 独立完成一个 OCP 项目(从零到部署上线)
1.4 本教程的阅读方式
如果你是纯小白 ──→ 从头到尾按顺序阅读,每个练习都跟着做
如果你有点基础 ──→ 可以跳过第 3 章,从第 5 章开始
如果你想快速上手 ──→ 直接看第 7 章和第 10 章
2. 什么是 Claude Code?------ 你的 AI 编程伙伴
2.1 用最通俗的话解释
把 Claude Code 想象成一个住在你电脑终端里的智能助手:
┌─────────────────────────────────────────────────────────┐
│ 你(人类) │
│ "帮我写一个计算器程序" │
│ "这段代码为什么报错?" │
│ "把我的项目打包部署" │
└─────────────────────┬───────────────────────────────────┘
│
│ 你只需要用中文说话
▼
┌─────────────────────────────────────────────────────────┐
│ Claude Code(AI 助手) │
│ │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ 理解你的需求 │ │ 读取项目文件 │ │ 执行命令 │ │
│ │ │ │ │ │ │ │
│ │ "他想做计算器"│ │ "我来看看 │ │ "mvn compile"│ │
│ │ "需要加减乘除"│ │ 现有代码" │ │ 编译项目 │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
│ │ │ │ │
│ └─────────────────┼─────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ 生成代码 / 修复 Bug │ │
│ │ 运行测试 / 部署项目 │ │
│ └──────────────────────┘ │
└─────────────────────────────────────────────────────────┘
2.2 Claude Code 与 ChatGPT 有什么不同?
很多人会问:"我已经有 ChatGPT 了,为什么还要用 Claude Code?"
这是两个完全不同的工具:
| 对比维度 | ChatGPT(网页版) | Claude Code |
|---|---|---|
| 工作方式 | 在浏览器里一问一答 | 直接在终端里操作你的项目 |
| 读取文件 | 需要手动复制粘贴 | 自动读取你项目里的所有文件 |
| 修改代码 | 复制粘贴,容易出错 | 直接在文件里修改,精确无误 |
| 执行命令 | 不能 | 能执行编译、测试、部署等命令 |
| 项目理解 | 只看到你发给它的内容 | 能理解整个项目的结构和逻辑 |
| 适合场景 | 问问题、学知识 | 实际做项目、写代码 |
简单来说:ChatGPT 是你的"老师",Claude Code 是你的"同事"。
2.3 Claude Code 的核心能力一览
Claude Code 的能力全景图
═══════════════════════════════════════════════════════════
🔍 读取与搜索 ✏️ 编写与修改
┌─────────────────┐ ┌─────────────────┐
│ • 读取任何文件 │ │ • 创建新文件 │
│ • 搜索代码内容 │ │ • 精确修改代码 │
│ • 文件模式匹配 │ │ • 批量替换内容 │
│ • 理解项目结构 │ │ • 重构整个项目 │
└─────────────────┘ └─────────────────┘
⚡ 执行与运行 🧠 思考与规划
┌─────────────────┐ ┌─────────────────┐
│ • 运行终端命令 │ │ • 分析需求 │
│ • 编译项目 │ │ • 设计方案 │
│ • 运行测试 │ │ • 解释代码 │
│ • 安装依赖 │ │ • 教学指导 │
│ • Git 操作 │ │ • Debug 分析 │
└─────────────────┘ └─────────────────┘
🔗 扩展能力(高级) 🎯 自动化(高级)
┌─────────────────┐ ┌─────────────────┐
│ • MCP 工具集成 │ │ • 定时任务 │
│ • 自定义技能 │ │ • 工作流编排 │
│ • 多模型切换 │ │ • 批量处理 │
│ • 第三方服务连接 │ │ • 自动部署 │
└─────────────────┘ └─────────────────┘
3. 安装 Claude Code ------ 3 步搞定
3.1 安装前的准备
在安装之前,你需要确认两件事:
第一步:确认你的操作系统
Claude Code 支持以下系统:
- Windows:Windows 10 或 11
- macOS:macOS 12 或更新版本
- Linux:主流发行版(Ubuntu、Debian、CentOS 等)
第二步:确认你有终端访问权限
- Windows 用户:需要安装 Git Bash 或使用 PowerShell 终端
- Mac 用户:自带 终端(Terminal) 应用
- Linux 用户:自带终端
新手提示 :如果你用的是 Windows,强烈建议安装 Git Bash。
下载地址:https://git-scm.com/downloads
Git Bash 让你能在 Windows 上使用类 Linux 的命令行环境,大部分编程教程都基于这个环境。
3.2 安装步骤(以 Windows 为例)
整个安装过程就像安装一个手机 App 一样简单:
安装流程图
═══════════════════════════════════════════════════════════
开始
│
▼
┌──────────────────┐
│ 步骤1:安装 Node.js │ ← 这是 Claude Code 的运行环境
│ (版本 ≥ 18.0) │ 就像手机需要操作系统一样
└──────┬───────────┘
│
▼
┌──────────────────┐
│ 步骤2:安装 │ ← 在终端里输入一行命令即可
│ Claude Code │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ 步骤3:验证安装 │ ← 确认安装成功
└──────┬───────────┘
│
▼
完成!开始使用
步骤 1:安装 Node.js
Node.js 是 Claude Code 的"运行引擎"。你可以把它理解为:Node.js 是舞台,Claude Code 是在舞台上表演的演员。
bash
# 1. 打开浏览器,访问 https://nodejs.org
# 2. 下载 LTS 版本(长期支持版,更稳定)
# 3. 双击安装包,一路点击"下一步"即可
# 4. 安装完成后,打开终端(Win+R,输入 cmd,回车)
# 5. 输入以下命令验证安装是否成功:
node --version
# 如果安装成功,你会看到类似这样的输出:
# v20.11.0 (版本号可能不同,只要 ≥ 18.0 就没问题)
npm --version
# 如果安装成功,你会看到类似这样的输出:
# 10.2.4 (npm 是 Node.js 自带的包管理工具)
步骤 2:安装 Claude Code
打开终端,输入下面这一行命令:
bash
# 使用 npm 全局安装 Claude Code
# -g 表示"全局安装",意味着你可以在电脑的任何位置使用它
npm install -g @anthropic-ai/claude-code
# 安装过程大约需要 1-2 分钟,你会看到很多行安装日志在滚动
# 这是正常的,不用担心里面的技术细节
如果安装失败:99% 的情况是因为网络问题。可以尝试以下方法:
bash# 方法1:使用国内镜像源(推荐,速度更快) npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com
步骤 3:验证安装
bash
# 在终端输入以下命令:
claude --version
# 如果看到版本号输出,说明安装成功!
# 类似:Claude Code v2.0.0
3.3 首次启动与 API Key 配置
Claude Code 需要连接到 Anthropic 的 AI 服务才能工作。这需要一个"钥匙"------API Key。
比喻 :API Key 就像你的门禁卡。没有它,你就进不了大楼(用不了 AI 服务)。
获取 API Key 的流程
═══════════════════════════════════════════════════════════
访问 console.anthropic.com
│
▼
注册 / 登录账号
│
▼
进入 API Keys 页面
│
▼
点击 "Create Key" 创建新 Key
│
▼
⚠️ 复制并保存好 Key!(只显示一次)
│
▼
在终端配置 Key
配置方法一:环境变量(推荐)
bash
# 在 Git Bash 终端中输入(Windows用户推荐这种方式)
# 把下面的 "sk-ant-xxxxx" 替换成你自己的真实的 API Key
export ANTHROPIC_API_KEY="sk-ant-your-actual-api-key-here"
# 注意:这种方式只在当前终端窗口有效,关闭窗口后需要重新设置
# 如果你想让这个配置永久生效,继续往下看
配置方法二:永久配置(一劳永逸)
bash
# Windows PowerShell 用户
# 以管理员身份打开 PowerShell,执行:
[Environment]::SetEnvironmentVariable("ANTHROPIC_API_KEY", "sk-ant-your-key-here", "User")
# Git Bash / Mac / Linux 用户
# 把下面这行加到你的 ~/.bashrc 或 ~/.zshrc 文件末尾
echo 'export ANTHROPIC_API_KEY="sk-ant-your-key-here"' >> ~/.bashrc
# 让配置立即生效
source ~/.bashrc
配置方法三:使用 Claude Code 内置的登录命令
bash
# 如果你已经有 Anthropic 账号,可以直接用这个命令登录
claude login
# 这会打开浏览器,让你通过网页完成认证
# 认证成功后,Claude Code 会自动保存你的凭证
3.4 验证一切就绪
bash
# 在终端输入:
claude
# 如果一切配置正确,你会进入 Claude Code 的交互界面
# 你会看到一个类似这样的提示符,表示可以开始对话了:
#
# ╭────────────────────────────────────────────╮
# │ ✨ Claude Code v2.0.0 │
# │ Ready to help you build amazing things! │
# ╰────────────────────────────────────────────╯
# >
到此为止,安装就完成了!是不是比你想象中简单很多?
4. 第一次对话 ------ 跟 AI 说"你好"
4.1 启动 Claude Code
有两种使用 Claude Code 的方式:
方式一:交互模式(最常用)
bash
# 进入你的项目目录(如果还没有项目,先创建一个空目录)
mkdir my-first-project # 创建一个名为 my-first-project 的文件夹
cd my-first-project # 进入这个文件夹
# 启动 Claude Code
claude
方式二:单次命令模式
bash
# 不进入交互界面,直接执行一条指令
# -p 参数表示 "print",意思是直接打印结果
claude -p "写一个 Hello World 的 Python 程序"
4.2 你的第一句对话
进入 Claude Code 后,你会看到一个提示符 >。输入你想说的话,然后按回车:
> 你好!请用中文回复我。请解释一下你是什么,你能帮我做什么?
Claude Code 会回复你一段文字,介绍自己的能力和限制。
交互流程图:
┌─────────────────────────────────────────────────────────┐
│ 交互模式的工作流程 │
├─────────────────────────────────────────────────────────┤
│ │
│ 你输入问题 │
│ ┌──────────────────────┐ │
│ │ > 帮我写一个计算器 │ │
│ └──────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ Claude Code 分析你的 │ ← AI 理解你的意图 │
│ │ 需求,读取项目文件 │ │
│ └──────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ Claude Code 生成代码 │ ← AI 创建或修改文件 │
│ │ 或执行相关操作 │ │
│ └──────────┬───────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────────┐ │
│ │ Claude Code 展示结果 │ ← AI 告诉你做了什么 │
│ │ 等待你的下一步指令 │ │
│ └──────────────────────┘ │
│ │ │
│ ▼ │
│ 继续对话...... │
│ │
└─────────────────────────────────────────────────────────┘
4.3 基本的对话技巧
跟 Claude Code 交流不需要任何特殊技巧------就用你平时跟人聊天的方式。但有几个小窍门可以让沟通更高效:
✅ 好的提问方式:
> 帮我用 Python 写一个计算器程序,要求支持加减乘除四种运算。
用户输入两个数字和运算符,程序输出计算结果。
代码要包含详细的中文注释。
> 这段代码运行时报错了,错误信息是:
"NameError: name 'result' is not defined"
帮我分析一下原因并修复。
> 我的项目里有 5 个 Java 文件,帮我找一下哪个文件里定义了 UserService 类。
❌ 不太好的提问方式:
> 写代码
← 太模糊了,AI 不知道你想要什么
> 修复错误
← 没说是什么错误,AI 无法定位问题
> 帮我做个东西
← 没有具体描述,AI 会困惑
核心原则:越具体,AI 的帮助越精准。
4.4 一些常用命令
在 Claude Code 的交互界面中,有一些特殊的"斜杠命令"(以 / 开头),它们是快捷操作:
bash
# ─── 基础命令 ───
/help # 显示帮助信息,列出所有可用命令
# 用法:直接输入 /help 即可
# 作用:查看 Claude Code 支持的所有功能和快捷命令
/clear # 清空当前对话历史,开始新的话题
# 用法:当你想切换话题或之前的对话太长时使用
# 注意:这不会删除任何文件,只是清空对话记录
/compact # 压缩对话历史,释放上下文空间
# 用法:当对话很长,AI 响应变慢时使用
# 作用:保留关键信息,删除冗余内容,让 AI 重新"聚焦"
# ─── 会话管理 ───
/status # 查看当前会话状态
# 显示:当前模型、对话长度、文件变更等信息
/context # 查看当前上下文包含的内容
# 显示:AI 当前"看到"了哪些信息
# ─── 文件与项目 ───
/init # 初始化项目,创建 CLAUDE.md 项目说明文件
# 用法:在项目根目录执行 /init
# 作用:让 Claude Code 更好地理解你的项目结构和规则
/add-dir # 添加一个目录到工作区
# 用法:/add-dir src/ (将 src 目录加入关注范围)
# ─── 配置与管理 ───
/config # 查看和修改 Claude Code 的设置
# 用法:/config 进入设置页面
/model # 切换使用的 AI 模型
# 用法:/model opus (切换到 Opus 模型,能力最强)
# /model sonnet (切换到 Sonnet 模型,速度更快)
# ─── 费用与用量 ───
/cost # 查看当前会话的费用消耗
# 用法:/cost 显示本次对话花了多少钱
/usage # 查看 Token 使用量
# Token 是 AI 处理文本的计量单位,类似电话的"分钟"
5. 核心概念:理解 Claude Code 的"大脑"
在深入使用之前,让我们先了解几个核心概念。这些概念就像开车前要认识的仪表盘------不需要成为工程师,但要知道每个指示灯是什么意思。
5.1 上下文(Context)------ AI 的"短期记忆"
概念解释:
Claude Code 的"上下文"就像 AI 的短期记忆 。每次对话中,AI 能"记住"的内容是有限的。这个限制用 Token 来衡量。
什么是 Token?
把 Token 理解为 AI 阅读文本时的"最小单位":
- 一个中文字 ≈ 1-2 个 Token
- 一个英文单词 ≈ 1-3 个 Token
- 一张图片 ≈ 几百到几千个 Token
就像一个杯子能装的水是有限的,AI 一次能处理的内容也是有限的。
上下文窗口示意图
═══════════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────┐
│ 上下文窗口(Context Window) │
│ Claude Opus 最大支持 100 万 Token │
│ │
│ ┌──────────────────────┐ │
│ │ 系统提示词 │ ← 定义 AI 的角色和行为 │
│ │ (System Prompt) │ 如"你是一个编程助手" │
│ ├──────────────────────┤ │
│ │ │ │
│ │ 对话历史 │ ← 你和 AI 你来我往的记录 │
│ │ (Conversation) │ 每一轮对话都在这里 │
│ │ │ │
│ │ • 你:帮我写代码 │ │
│ │ • AI:好的,这是代码 │ │
│ │ • 你:有个错误...... │ │
│ │ • AI:我来修复...... │ │
│ ├──────────────────────┤ │
│ │ 当前请求 │ ← 你最新输入的问题 │
│ │ (Current Request) │ │
│ └──────────────────────┘ │
└─────────────────────────────────────────────────────┘
当上下文满了 → AI 可能会"忘记"早期的对话内容
解决方法 → /compact 命令压缩对话 或 /clear 清空重新开始
如何管理上下文:
bash
# 查看当前使用了多少上下文
/context
# 如果对话太长,压缩上下文(保留关键信息,删除冗余)
/compact
# 完全开始新话题
/clear
5.2 Token ------ AI 的"计费单位"
概念解释:
Token 就像电话的"分钟数"------你用得越多,费用越高。但完全在你的可控范围内。
Token 的直观理解
═══════════════════════════════════════════════════════════
中文:"你好世界" ≈ 4 个 Token
英文:"Hello World" ≈ 2 个 Token
一句普通的中文问句 ≈ 20-50 个 Token
一个 100 行的 Python 文件 ≈ 800-1500 个 Token
一个中等规模的项目(100个文件) ≈ 50万-200万 Token
费用参考(以 Claude Opus 为例):
┌─────────────────────────────────────────────┐
│ 输入(你发给 AI 的内容):$5 / 100万 Token │
│ 输出(AI 回复的内容): $25 / 100万 Token │
│ │
│ 换句话说: │
│ • 问一个问题 ≈ 几分钱 │
│ • 写一个完整功能 ≈ 几毛钱 │
│ • 完成一个项目 ≈ 几块钱到几十块钱 │
└─────────────────────────────────────────────┘
如何查看费用:
bash
# 在 Claude Code 中随时查看当前会话的费用
/cost
# 输出示例:
# Total cost: $0.42
# Input tokens: 45,230
# Output tokens: 2,156
5.3 工具(Tools)------ AI 的"手和脚"
概念解释:
如果 AI 的智能是它的大脑,那工具就是它的"手和脚"。没有工具,AI 只能"说"不能"做"。Claude Code 内置了一系列工具,让 AI 能够实际操作你的项目。
Claude Code 的内置工具一览
═══════════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────────┐
│ 工具清单 │
├───────────────┬─────────────────────────────────────────┤
│ 工具名称 │ 作用(用人话解释) │
├───────────────┼─────────────────────────────────────────┤
│ Read │ "读文件"------就像你打开文件查看内容 │
│ │ 可以读代码、读文档、读图片、读 PDF │
├───────────────┼─────────────────────────────────────────┤
│ Write │ "写文件"------创建新文件或覆盖已有文件 │
│ │ 就像你在编辑器里新建文件并写入内容 │
├───────────────┼─────────────────────────────────────────┤
│ Edit │ "改文件"------精确修改文件中的某段内容 │
│ │ 不是整个重写,而是精准替换 │
├───────────────┼─────────────────────────────────────────┤
│ Bash │ "执行命令"------在终端里运行指令 │
│ │ 可以编译代码、安装依赖、运行测试 │
├───────────────┼─────────────────────────────────────────┤
│ Glob │ "找文件"------按文件名模式搜索 │
│ │ 比如找所有 .java 文件或所有 test*.js │
├───────────────┼─────────────────────────────────────────┤
│ Grep │ "搜内容"------在文件内容中搜索关键词 │
│ │ 比如找所有包含"password"的代码行 │
├───────────────┼─────────────────────────────────────────┤
│ WebFetch │ "抓网页"------获取网页内容 │
│ │ 可以读取在线文档、API 说明等 │
├───────────────┼─────────────────────────────────────────┤
│ WebSearch │ "搜网页"------搜索互联网 │
│ │ 查找最新信息、技术方案等 │
├───────────────┼─────────────────────────────────────────┤
│ Task │ "多任务"------同时处理多个独立工作 │
│ │ 比如同时搜索多个目录或处理多个文件 │
└───────────────┴─────────────────────────────────────────┘
工具是如何工作的?
你不需要手动调用这些工具------你只需要用自然语言说出你的需求,Claude Code 会自动选择合适的工具。
你说:"帮我把项目里所有的 TODO 注释找出来"
│
▼
Claude Code 内部自动执行:
┌──────────────────────────────────────┐
│ 1. 分析需求:"找 TODO 注释" │
│ 2. 选择工具:用 Grep 工具搜索 │
│ 3. 执行:grep "TODO" 遍历所有文件 │
│ 4. 整理结果:把找到的 TODO 列给你看 │
│ 5. 回复:"找到了 12 个 TODO......" │
└──────────────────────────────────────┘
5.4 权限控制 ------ 安全的"门禁"
Claude Code 在执行某些操作前会征求你的同意,这是为了保护你的项目安全。
权限级别说明
═══════════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────────┐
│ 操作类型 │ 是否需要你确认 │ 示例 │
├──────────────────────┼─────────────────┼────────────────┤
│ 读文件 │ 不需要(自动) │ "看看这个文件" │
│ 搜索内容 │ 不需要(自动) │ "搜一下 TODO" │
│ 写新文件 │ 需要确认 │ "创建一个文件" │
│ 修改已有文件 │ 需要确认 │ "修改这行代码" │
│ 执行命令 │ 需要确认 │ "运行 npm test"│
│ 访问外部网站 │ 需要确认 │ "查看这个网页" │
│ 删除文件 │ 需要确认 │ "删除这个文件" │
└──────────────────────┴─────────────────┴────────────────┘
你可以选择:
• 允许(Allow) ------ 仅这次
• 总是允许(Always Allow)------ 同类型操作不再询问
• 拒绝(Deny) ------ 不允许执行
6. 基础操作:读、写、改、搜
现在你已经了解了基本概念,让我们动手实操吧!
6.1 读取文件 ------ "帮我看看这个"
这是最基础的操作。你可以让 Claude Code 读取各种类型的文件。
实用场景一:查看代码文件
场景:你刚接手一个项目,想了解某个文件做了什么
你:帮我看看 src/main/java/com/example/UserController.java 这个文件,
解释一下每个方法是做什么的,用中文说明。
Claude Code 会:
1. 自动使用 Read 工具读取文件
2. 分析代码结构
3. 用通俗的中文解释每个方法的作用
4. 可能还会指出潜在的问题或改进建议
实用场景二:分析图片内容
场景:产品经理给了你一张 UI 设计图,让你实现
你:看看这张设计图 design.png,告诉我这是一个什么样的页面布局。
Claude Code 会:
1. 读取图片文件
2. 分析图片中的 UI 元素
3. 描述布局结构
4. 甚至可以帮你生成对应的 HTML/CSS 代码
6.2 搜索代码 ------ "帮我找到那个"
当项目代码量很大时,手动翻找文件就像大海捞针。Claude Code 能帮你在几秒钟内找到你需要的内容。
实用场景一:搜索文件内容
场景:你想找到所有调用了 getUserById 方法的地方
你:帮我在整个项目中搜索所有调用 getUserById 的地方,
列出文件名和行号。
Claude Code 会:
1. 自动使用 Grep 工具搜索
2. 返回所有匹配的行及其位置
3. 你可以点击行号直接跳转
实用场景二:按文件名查找
场景:你记得有个文件名叫 UserService 但忘了在哪个目录
你:帮我找到所有文件名包含 UserService 的 Java 文件。
Claude Code 会:
1. 使用 Glob 工具按文件名模式匹配
2. 列出所有匹配的文件路径
6.3 修改代码 ------ "帮我改一下"
这是 Claude Code 的杀手级功能------精确修改代码,不多不少。
代码修改示例:
场景:你想给 UserService 类添加一个新方法
你:在 src/main/java/com/example/UserService.java 中
添加一个 findByEmail 方法,参数是 String email,
返回 Optional<User>。
Claude Code 会:
1. 读取 UserService.java 的内容
2. 分析类的结构
3. 在合适的位置插入新方法
4. 确保代码格式和项目风格一致
5. 展示修改后的结果让你确认
修改前后对比示意:
java
// ========== 修改前 ==========
public class UserService {
public Optional<User> findById(Long id) {
// 根据 ID 查找用户
return userRepository.findById(id);
}
}
// ========== 修改后 ==========
public class UserService {
public Optional<User> findById(Long id) {
// 根据 ID 查找用户
return userRepository.findById(id);
}
// 【新增方法】根据邮箱地址查找用户
// @param email 用户的邮箱地址
// @return 包含用户的 Optional 对象,如果找不到则为空
public Optional<User> findByEmail(String email) {
// 调用 Repository 层的 findByEmail 方法查询数据库
return userRepository.findByEmail(email);
}
}
6.4 执行命令 ------ "帮我运行一下"
你不需要记住复杂的命令行指令,直接告诉 Claude Code 你想做什么就行。
bash
# 场景:你想编译一个 Java 项目
# 传统方式(你需要记住命令):
mvn clean compile -DskipTests
# Claude Code 方式(说人话就行):
> 帮我编译这个 Java 项目,跳过测试。
# Claude Code 会自动执行:
# mvn clean compile -DskipTests
# 然后把编译结果翻译成你能看懂的中文告诉你
执行命令的完整流程:
你说:"帮我看看这个 Spring Boot 项目能不能正常启动"
│
▼
┌─────────────────────────────────────────────────────────┐
│ Claude Code 内部处理流程 │
│ │
│ 1. 分析项目类型 │
│ → 发现 pom.xml → 判定为 Maven 管理的 Spring Boot 项目 │
│ │
│ 2. 确定启动命令 │
│ → mvn spring-boot:run │
│ │
│ 3. 请求你的确认 │
│ → "我将执行 mvn spring-boot:run,是否允许?" │
│ │
│ 4. 执行命令并捕获输出 │
│ → 启动日志会显示在终端 │
│ │
│ 5. 分析结果 │
│ → 如果启动成功:告诉你端口号和访问地址 │
│ → 如果启动失败:帮你分析错误原因并修复 │
└─────────────────────────────────────────────────────────┘
7. 实战演练一:用 Claude Code 写一个网页
理论学完了,让我们动手做一个实际的东西!我们将从零开始,用 Claude Code 创建一个漂亮的个人主页。
7.1 项目准备
bash
# 1. 创建项目文件夹
mkdir my-homepage
cd my-homepage
# 2. 启动 Claude Code
claude
7.2 跟 Claude Code 对话开发
现在,把下面这些"对话"逐条输入给 Claude Code,看看会发生什么:
第一步:提出需求
> 帮我创建一个个人主页,要求:
1. 只用一个 index.html 文件(把 CSS 和 JS 都写在里面)
2. 设计要简洁大方,使用现代的设计风格
3. 包含以下内容:
- 顶部导航栏:首页、关于我、技能、联系方式
- 主页横幅区:我的名字(张三)、一句话介绍
- 关于我区域:一段个人简介
- 技能展示区:用卡片展示我会的技能
- 联系方式区:邮箱、GitHub、微信
- 底部版权信息
4. 颜色方案用蓝色系
5. 代码中加上详细的中文注释,我是初学者
第二步:预览效果
bash
# Claude Code 写完后,帮我在浏览器里打开看看
> 帮我在浏览器里打开这个 index.html 文件
第三步:修改优化
> 我觉得背景色太深了,帮我改成浅蓝色
> 导航栏的字体再大一些
> 把技能卡片改成 3 列布局,现在太宽了
7.3 完整的代码示例(含详细注释)
下面就是 Claude Code 帮你生成的代码。注意看里面的注释------每一行关键代码都有解释:
html
<!DOCTYPE html>
<!-- 这行告诉浏览器:这是一个 HTML5 文档 -->
<html lang="zh-CN">
<!-- lang="zh-CN" 表示页面主要语言是简体中文 -->
<head>
<!-- head 标签包含页面的"元信息"------用户看不到,但浏览器需要 -->
<meta charset="UTF-8">
<!-- 设置字符编码为 UTF-8,这样中文才能正常显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 让页面在手机上也能正常显示(响应式设计的基础) -->
<title>张三 - 个人主页</title>
<!-- 浏览器标签页上显示的标题 -->
<style>
/* ========== 全局样式 ========== */
/* * 是通配符,选中所有元素 */
* {
margin: 0;
/* 清除默认的外边距 */
padding: 0;
/* 清除默认的内边距 */
box-sizing: border-box;
/* 让宽高计算方式更直观 */
}
/* body 是页面主体,所有可见内容都在里面 */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
/* 设置字体,从前往后依次尝试 */
line-height: 1.6;
/* 行高 1.6 倍,让文字不拥挤 */
color: #333;
/* 文字颜色:深灰色(比纯黑柔和) */
background-color: #f0f4f8;
/* 背景色:浅蓝灰色 */
}
/* ========== 导航栏样式 ========== */
/* nav 是 HTML5 的语义化标签,表示导航区域 */
nav {
background-color: #1a56db;
/* 导航栏背景:深蓝色 */
padding: 16px 0;
/* 上下内边距 16px,左右 0 */
position: sticky;
/* 粘性定位:滚动时导航栏固定在顶部 */
top: 0;
/* 距离顶部 0px */
z-index: 100;
/* 层级最高,确保不被其他元素遮挡 */
}
/* 导航栏内部的容器,用于控制内容宽度 */
nav .container {
max-width: 1000px;
/* 最大宽度 1000px */
margin: 0 auto;
/* 上下 0,左右自动(居中) */
display: flex;
/* 使用弹性布局 */
justify-content: space-between;
/* 子元素两端对齐 */
align-items: center;
/* 子元素垂直居中 */
}
/* 网站 Logo/标题 */
nav .logo {
color: white;
/* 文字白色 */
font-size: 22px;
/* 字体大小 */
font-weight: bold;
/* 加粗 */
}
/* 导航链接列表 */
nav ul {
list-style: none;
/* 去掉列表的小圆点 */
display: flex;
/* 让列表项横向排列 */
gap: 24px;
/* 每项之间的间距 */
}
/* 导航链接样式 */
nav ul li a {
color: rgba(255, 255, 255, 0.85);
/* 半透明白色 */
text-decoration: none;
/* 去掉下划线 */
font-size: 15px;
transition: color 0.3s;
/* 颜色变化有 0.3 秒过渡动画 */
}
/* 鼠标悬停在导航链接上时的效果 */
nav ul li a:hover {
color: white;
/* 变为纯白色 */
}
/* ========== 横幅区样式 ========== */
.hero {
background: linear-gradient(135deg, #1a56db 0%, #4f8cf7 100%);
/* 渐变背景:从深蓝到浅蓝,135度角 */
color: white;
padding: 80px 0;
/* 上下 80px 的内边距,让横幅更高 */
text-align: center;
/* 文字居中 */
}
.hero h1 {
font-size: 40px;
/* 主标题大号字体 */
margin-bottom: 12px;
}
.hero p {
font-size: 18px;
opacity: 0.9;
/* 略微透明 */
}
/* ========== 通用容器和区块样式 ========== */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
/* 左右保留 20px 安全距离 */
}
section {
padding: 60px 0;
/* 每个区块上下 60px 间距 */
}
section h2 {
text-align: center;
font-size: 28px;
margin-bottom: 36px;
color: #1a56db;
}
/* ========== 关于我区域 ========== */
.about p {
font-size: 16px;
text-align: center;
max-width: 680px;
margin: 0 auto;
/* 段落居中,最大宽度 680px,阅读更舒适 */
}
/* ========== 技能卡片区域 ========== */
.skills-grid {
display: grid;
/* 使用网格布局 */
grid-template-columns: repeat(3, 1fr);
/* 3 列,每列等宽 */
gap: 20px;
/* 卡片之间的间距 */
}
/* 单个技能卡片 */
.skill-card {
background: white;
/* 白色背景 */
padding: 28px;
border-radius: 10px;
/* 圆角 */
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
/* 投影阴影:水平0 垂直2px 模糊10px 黑色8%透明度 */
transition: transform 0.3s;
/* 悬停动画 */
}
.skill-card:hover {
transform: translateY(-4px);
/* 鼠标悬停时向上移动 4px,有"浮起来"的感觉 */
}
.skill-card .icon {
font-size: 36px;
/* 图标(emoji)的尺寸 */
margin-bottom: 12px;
}
.skill-card h3 {
margin-bottom: 8px;
color: #1a56db;
}
/* ========== 联系方式区域 ========== */
.contact-info {
text-align: center;
font-size: 16px;
}
.contact-info p {
margin-bottom: 8px;
}
/* ========== 页脚样式 ========== */
footer {
background-color: #1a2938;
/* 深色背景 */
color: #9ca3af;
/* 灰色文字 */
text-align: center;
padding: 20px 0;
font-size: 14px;
}
</style>
</head>
<body>
<!-- ========== 导航栏 ========== -->
<nav>
<div class="container">
<!-- 左侧 Logo -->
<span class="logo">张三</span>
<!-- 右侧导航链接 -->
<ul>
<!-- href="#" 表示点击后跳转到当前页面的指定位置 -->
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#contact">联系方式</a></li>
</ul>
</div>
</nav>
<!-- ========== 主页横幅 ========== -->
<section class="hero" id="home">
<h1>张三</h1>
<p>热爱技术的全栈开发者 | 终身学习者 | 开源爱好者</p>
</section>
<!-- ========== 关于我 ========== -->
<section class="about" id="about">
<div class="container">
<h2>关于我</h2>
<p>
你好!我是张三,一名拥有 3 年经验的全栈开发者。
我热爱用代码创造有价值的软件产品,喜欢学习新技术。
工作之余,我活跃在 GitHub 开源社区,参与过多个知名项目的贡献。
我相信技术的力量可以让世界变得更好。
</p>
</div>
</section>
<!-- ========== 技能展示 ========== -->
<section id="skills">
<div class="container">
<h2>我的技能</h2>
<div class="skills-grid">
<!-- 技能卡片 1 -->
<div class="skill-card">
<div class="icon">☕</div>
<h3>Java</h3>
<p>精通 Java 后端开发,Spring Boot 框架</p>
</div>
<!-- 技能卡片 2 -->
<div class="skill-card">
<div class="icon">🐍</div>
<h3>Python</h3>
<p>熟练使用 Python 进行数据处理和 Web 开发</p>
</div>
<!-- 技能卡片 3 -->
<div class="skill-card">
<div class="icon">🌐</div>
<h3>前端开发</h3>
<p>掌握 HTML、CSS、JavaScript 和 Vue.js</p>
</div>
</div>
</div>
</section>
<!-- ========== 联系方式 ========== -->
<section id="contact">
<div class="container">
<h2>联系我</h2>
<div class="contact-info">
<p>📧 邮箱:zhangsan@example.com</p>
<p>🐙 GitHub:github.com/zhangsan</p>
<p>💬 微信:zhangsan_dev</p>
</div>
</div>
</section>
<!-- ========== 页脚 ========== -->
<footer>
<div class="container">
<p>© 2026 张三 | 保留所有权利</p>
<!-- © 是版权符号 © -->
</div>
</footer>
</body>
</html>
7.4 从这个练习中学到了什么
通过这个小项目,你应该已经体验到了:
- 你只需描述"要什么",不需要写具体代码 ------ Claude Code 帮你实现
- 你可以随时修改 ------ 跟 AI 说"这里改一下"就行
- 所有的代码都有注释 ------ AI 默认会帮你写好注释
- 修改是迭代的 ------ 先做一个版本,然后逐步优化
8. 实战演练二:管理一个完整项目
上一章我们写了一个简单的网页。这一章,让我们来管理一个真正的多文件项目。
8.1 项目初始化 ------ CLAUDE.md 文件
CLAUDE.md 是一个非常重要的文件。它就像是给 Claude Code 的"项目说明书"。
比喻:如果 Claude Code 是一个新加入团队的员工,CLAUDE.md 就是你给他的《新员工手册》------告诉他项目是做什么的、用什么技术栈、有什么规范。
如何创建 CLAUDE.md:
bash
# 在项目根目录下执行
claude
> /init
Claude Code 会自动扫描你的项目,生成一份 CLAUDE.md 文件。你也可以手动编写它。
一个 OCP 项目的 CLAUDE.md 示例:
markdown
# OCP 电商平台项目
## 项目简介
这是一个基于 Spring Boot 的在线商城系统,提供商品浏览、购物车、下单等功能。
## 技术栈
- 后端框架:Spring Boot 2.7.x
- 构建工具:Maven
- 数据库:MySQL 8.0 + MyBatis-Plus
- 缓存:Redis
- Java 版本:JDK 11
## 项目结构
src/
├── main/
│ ├── java/com/example/ocp/
│ │ ├── controller/ # 控制器层 - 处理 HTTP 请求
│ │ ├── service/ # 服务层 - 业务逻辑
│ │ ├── mapper/ # 数据访问层 - 操作数据库
│ │ ├── entity/ # 实体类 - 数据库表对应
│ │ └── config/ # 配置类
│ └── resources/
│ ├── application.yml # 主配置文件
│ └── mapper/ # MyBatis XML 映射文件
└── test/ # 测试代码
## 编码规范
- 类名使用大驼峰命名法,如 UserController
- 方法名和变量名使用小驼峰命名法,如 findUserById
- 所有 public 方法必须有 Javadoc 注释
- Controller 层只做参数校验和转发,不写业务逻辑
- 使用 Lombok 简化 getter/setter
## 运行方式
```bash
# 编译
mvn clean compile
# 运行测试
mvn test
# 启动项目
mvn spring-boot:run
# 启动后访问 http://localhost:8080
### 8.2 项目中 Claude Code 的日常工作流
有了 CLAUDE.md 后,Claude Code 就"认识"你的项目了。下面是日常工作中最常用的几种交互模式:
Claude Code 项目工作流程图
═══════════════════════════════════════════════════════════
收到新需求
│
▼
┌──────────────────┐
│ Claude Code 读取 │ ← 先理解需求,再看看现有代码
│ CLAUDE.md + │
│ 相关代码文件 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ Claude Code 制定 │ ← 告诉你它打算怎么做
│ 实现方案 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ 你确认方案? │ ← 你可以要求修改方案
└──┬───────────┬───┘
│ │
同意 不同意 → 返回修改方案
│
▼
┌──────────────────┐
│ Claude Code 编写 │ ← 创建/修改代码文件
│ 代码 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ Claude Code 运行 │ ← 编译、测试、验证
│ 测试 │
└──────┬───────────┘
│
▼
测试通过?
│ │
是 否 → Claude Code 分析错误 → 自动修复 → 重新测试
│
▼
┌──────────────────┐
│ 完成! │
│ Claude Code 总结 │
│ 做了什么修改 │
└──────────────────┘
### 8.3 实际工作场景演示
让我们模拟几个真实的开发场景:
**场景一:添加新功能**
你:根据 CLAUDE.md 中的项目规范,请帮我实现一个"用户注册"功能。
要求:
1. 在 UserController 中添加 POST /api/users/register 接口
2. 在 UserService 中添加 register 方法
3. 注册时校验邮箱格式和密码长度(至少6位)
4. 密码需要用 BCrypt 加密后存储
5. 返回格式统一使用 Result 类包装
Claude Code 会:
-
读取 CLAUDE.md 了解项目结构和规范
-
读取现有的 UserController 和 UserService 代码
-
读取 Result 类的定义
-
在正确的位置添加代码
-
确保代码风格和现有代码一致
-
帮你添加必要的依赖(如 spring-security-crypto 用于 BCrypt)
场景二:修复 Bug
你:启动项目时出现以下错误,帮我分析和修复:
"Error creating bean with name 'userMapper':
Failed to introspect bean class
com.example.ocp.mapper.UserMapper"
Claude Code 会:
-
读取 UserMapper 接口的代码
-
读取相关的 XML 映射文件
-
检查 application.yml 中的 MyBatis 配置
-
分析错误原因
-
提出修复方案并执行
场景三:代码重构
你:UserService 里的代码太长了,有 500 多行。
帮我把里面的业务逻辑拆分成多个小的 Service 类,
但要确保不改变现有的功能。
Claude Code 会:
-
分析 UserService 中的所有方法
-
按功能分组(如用户管理、权限管理、资料管理)
-
创建新的 Service 类
-
把方法迁移到对应的新类中
-
更新所有引用了旧方法的地方
-
运行测试确保重构没有破坏功能
8.4 Git 版本管理
Claude Code 可以帮助你管理代码版本(使用 Git),即使你完全不懂 Git 命令:
你:帮我把今天的修改提交到 Git,提交信息写"新增用户注册功能"
Claude Code 会:
- git add . (添加所有修改的文件到暂存区)
- git commit -m "..." (创建一次提交,并附上说明信息)
你:帮我把代码推送到远程仓库
Claude Code 会:
-
git push (上传到 GitHub / GitLab 等远程仓库)
9. 高级功能:让 Claude Code 更强大
当你掌握了基础功能后,这些高级功能可以帮助你进一步提升效率。
9.1 MCP(模型上下文协议)------ 连接外部世界
概念解释:
MCP 的全称是 Model Context Protocol(模型上下文协议)。用人话来说------它是让 Claude Code 能连接各种外部工具和服务的"万能插头"。
比喻:你的手机只有一个充电口,但是通过不同的转接头,你可以连 U 盘、显示器、键盘...... MCP 就是 AI 世界的那个"万能转接头"。
没有 MCP 的 Claude Code:
┌──────────┐ ┌──────────┐
│ Claude │ ───→ │ 你的本地 │ ← 只能操作本地的文件
│ Code │ │ 项目文件 │
└──────────┘ └──────────┘
有了 MCP 的 Claude Code:
┌──────────┐ ┌──────────┐
│ Claude │ ───→ │ 本地文件 │
│ Code │ └──────────┘
│ │ ┌──────────┐
│ │ ───→ │ GitHub │ ← 可以操作 GitHub 仓库
│ │ └──────────┘
│ │ ┌──────────┐
│ │ ───→ │ 数据库 │ ← 可以查询数据库
│ │ └──────────┘
│ │ ┌──────────┐
│ │ ───→ │ Slack │ ← 可以发送消息
└──────────┘ └──────────┘
**MCP 的常见应用:**
| MCP 服务 | 能让 Claude Code 做什么 |
|---------|------------------------|
| GitHub MCP | 创建 Issue、提交 PR、查看代码变更 |
| 数据库 MCP | 直接查询数据库、执行 SQL |
| Jira MCP | 查看/创建/更新任务 |
| Slack MCP | 发送消息到频道 |
| 文件系统 MCP | 访问远程服务器上的文件 |
### 9.2 Skills(技能)------ 给 AI 安装"专业插件"
**概念解释:**
Skills 就像给 Claude Code 安装的各种"专业 App"。比如说,默认的 Claude Code 什么都能做,但如果你要处理 Excel 文件,装了 "xlsx" 这个 Skill 后,它会变得更专业。
Skills 的作用
═══════════════════════════════════════════════════════════
默认 Claude Code 安装了专用 Skills 的 Claude Code
┌─────────────────┐ ┌─────────────────────────────┐
│ 编程 ★★★★☆ │ │ 编程 ★★★★☆ │
│ 写文档 ★★★☆☆ │ │ 写文档 ★★★★★ │
│ Excel ★★☆☆☆ │ │ Excel 处理 +xlsx ★★★★★ │
│ PPT ★★☆☆☆ │ │ PPT 制作 +pptx ★★★★★ │
│ PDF ★★☆☆☆ │ │ PDF 处理 +pdf ★★★★★ │
│ 前端设计 ★★★☆☆ │ │ 前端设计 +skill ★★★★★ │
└─────────────────┘ └─────────────────────────────┘
**如何在 Claude Code 中使用 Skills:**
Skills 的配置存储在 `.claude/settings.json` 文件中。你可以在这个文件中声明要启用的 Skills:
```json
{
"skills": [
"xlsx", // Excel 处理技能
"docx", // Word 处理技能
"pptx", // PowerPoint 处理技能
"pdf" // PDF 处理技能
]
}
这些内置 Skills 开箱即用,不需要额外安装。当你的任务涉及相关文件类型时,Claude Code 会自动激活对应的技能。
9.3 Hooks(钩子)------ 自动化工作流
概念解释:
Hooks(钩子)让你可以在 Claude Code 执行某些操作之前或之后自动触发自定义行为。比如:
- "每次 AI 修改代码后,自动运行测试"
- "每次对话开始时,自动加载项目信息"
- "每次 AI 准备删除文件时,弹出一个更醒目的警告"
比喻:Hooks 就像你给 AI 助理设置的"自动提醒"------"出门前别忘了关窗"、"睡觉前记得锁门"。
一个实用的 Hook 示例:
json
// 在 .claude/settings.json 中配置
{
"hooks": {
// PostToolUse:在 AI 使用某个工具后触发
"PostToolUse": [
{
// 匹配器:当 AI 修改了 Java 文件时触发
"matcher": "Edit",
// 钩子:自动格式化代码
"hooks": [
{
"type": "command",
// 执行这个命令来格式化刚修改的 Java 代码
"command": "mvn spotless:apply"
}
]
}
]
}
}
常用 Hook 场景:
场景对照表
═══════════════════════════════════════════════════════════
触发时机 │ 可以做什么
──────────────────┼─────────────────────────────────────
对话开始时 │ 加载项目信息、检查环境
工具使用前 │ 额外安全检查、记录日志
工具使用后 │ 自动格式化、运行测试、记录变更
AI 回复后 │ 发送通知、触发 CI/CD
对话结束时 │ 清理临时文件、生成工作报告
文件被修改前 │ 自动备份原文件
9.4 多模型切换 ------ 选择适合的"大脑"
Claude Code 支持多种 AI 模型,它们在能力、速度、价格上有不同的侧重:
模型选择指南
═══════════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────────┐
│ 模型 │ 适合场景 │ 特点 │
├────────────────┼────────────────────┼──────────────────┤
│ Opus 4.8 │ 最复杂的任务 │ 最聪明、最贵 │
│ (旗舰模型) │ 大型项目重构 │ 适合"深度思考" │
│ │ 复杂架构设计 │ │
├────────────────┼────────────────────┼──────────────────┤
│ Sonnet 4.6 │ 日常开发 │ 智能与速度的平衡 │
│ (推荐日常用) │ 写代码、修 Bug │ 性价比最高 │
│ │ 中小型项目 │ │
├────────────────┼────────────────────┼──────────────────┤
│ Haiku 4.5 │ 简单任务 │ 最快、最便宜 │
│ (轻量模型) │ 代码分类、格式化 │ 适合高频简单操作 │
│ │ 简单问答 │ │
└────────────────┴────────────────────┴──────────────────┘
切换命令:
/model opus → 切换到 Opus(处理复杂任务时)
/model sonnet → 切换到 Sonnet(日常开发,默认推荐)
/model haiku → 切换到 Haiku(执行简单重复任务时)
9.5 Workflows(工作流)------ 多 AI 并行工作
概念解释:
当你有一个大任务时,可以把它拆分成多个小任务,让多个 AI 同时工作------就像把一个大项目分配给多个员工同时做。
单个 AI 处理大项目:
┌────────────────────────────────────────────────────┐
│ AI 一个人干活 │
│ 任务1 → 任务2 → 任务3 → 任务4 → 任务5 │
│ 耗时:所有任务的时间之和 │
└────────────────────────────────────────────────────┘
Workflow 多 AI 并行:
┌────────────────────────────────────────────────────┐
│ AI-1 → 任务1 │
│ AI-2 → 任务2 ← 所有 AI 同时工作 │
│ AI-3 → 任务3 │
│ AI-4 → 任务4 │
│ AI-5 → 任务5 │
│ 耗时:最慢的一个任务的时间 │
└────────────────────────────────────────────────────┘
什么时候用 Workflow:
- 需要审查大量代码时(每个 AI 审查一部分)
- 需要搜索多个不同方向时
- 需要同时处理多个独立文件时
- 需要对同一个问题进行多角度分析时
注意:Workflow 是一个高级功能,涉及复杂的编排逻辑。作为入门用户,你不需要手动创建 Workflow。当你的任务确实需要并行处理时,Claude Code 会自动建议或执行并行策略。
10. OCP 项目实战指南
这一章是本教程的"终极挑战"------用 Claude Code 从零开始完成一个 OCP(Online Commerce Platform,在线商务平台)项目。
10.1 OCP 项目是什么?
OCP 是一个典型的企业级 Java Web 项目。它包含了现代 Web 应用的大部分要素:
OCP 项目架构概览
═══════════════════════════════════════════════════════════
┌─────────────────────────────────────────────────────────┐
│ 浏览器(前端) │
│ HTML + CSS + JavaScript │
└────────────────────────┬────────────────────────────────┘
│ HTTP 请求
▼
┌─────────────────────────────────────────────────────────┐
│ Spring Boot 后端 │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │Controller│→│ Service │→│ Mapper │ │
│ │ 接收请求 │ │ 处理业务 │ │ 访问数据库│ │
│ └──────────┘ └──────────┘ └────┬─────┘ │
└────────────────────────────────────┼────────────────────┘
│
┌───────────┴───────────┐
▼ ▼
┌─────────────┐ ┌─────────────┐
│ MySQL │ │ Redis │
│ 数据库 │ │ 缓存 │
│ 存数据 │ │ 加速访问 │
└─────────────┘ └─────────────┘
10.2 项目准备:让 Claude Code 理解 OCP
第一步:创建项目骨架
bash
# 在 Claude Code 中输入以下内容:
> 帮我创建一个标准的 Spring Boot 项目骨架,使用 Maven 管理。
项目名为 ocp-platform,包名为 com.example.ocp。
要求:
1. Java 版本使用 JDK 11
2. Spring Boot 版本使用 2.7.x
3. 包含以下依赖:
- Spring Web(用于开发 REST API)
- MyBatis-Plus(简化数据库操作)
- MySQL Connector(连接 MySQL 数据库)
- Lombok(简化 Java 代码)
- Spring Boot Validation(参数校验)
4. 创建标准的项目目录结构
5. 创建基础的配置文件 application.yml
6. 创建基础的工具类(如统一的响应格式 Result 类)
Claude Code 会帮你创建如下目录结构:
ocp-platform/
├── pom.xml # Maven 项目配置文件
├── CLAUDE.md # Claude Code 项目说明书
├── src/
│ ├── main/
│ │ ├── java/com/example/ocp/
│ │ │ ├── OcpApplication.java # Spring Boot 启动类
│ │ │ ├── controller/ # 控制器包
│ │ │ ├── service/ # 服务层包
│ │ │ │ └── impl/ # 服务实现类
│ │ │ ├── mapper/ # 数据访问层
│ │ │ ├── entity/ # 数据库实体类
│ │ │ ├── dto/ # 数据传输对象
│ │ │ ├── common/ # 公共类
│ │ │ │ └── Result.java # 统一响应格式
│ │ │ └── config/ # 配置类
│ │ └── resources/
│ │ ├── application.yml # 主配置文件
│ │ └── mapper/ # MyBatis XML 映射
│ └── test/
│ └── java/com/example/ocp/ # 测试代码
第二步:创建 CLAUDE.md
bash
> /init
Claude Code 自动扫描项目后生成的 CLAUDE.md 会包含所有项目信息。你可以在此基础上补充一些额外的规范:
markdown
## OCP 项目开发规范补充
### API 设计规范
- 所有 API 路径以 /api 开头
- 使用 RESTful 风格:
- GET /api/users ------ 查询用户列表
- GET /api/users/{id} ------ 查询单个用户
- POST /api/users ------ 创建用户
- PUT /api/users/{id} ------ 更新用户
- DELETE /api/users/{id} ------ 删除用户
### 数据库规范
- 表名使用小写字母和下划线,如 user_order
- 字段名使用小写字母和下划线,如 create_time
- 每张表必须有 id(主键)、create_time、update_time 字段
### 测试规范
- Service 层必须写单元测试
- Controller 层写集成测试
- 测试覆盖率目标:Service 层 ≥ 80%
10.3 分模块实现 OCP 项目
OCP 项目可以拆分为以下几个模块,逐一实现。每个模块你只需要用自然语言描述需求:
模块一:用户管理
> 帮我实现用户管理模块,包括以下功能:
1. 用户注册(账号 + 密码 + 邮箱)
2. 用户登录(返回 JWT Token)
3. 根据 ID 查询用户信息
4. 更新用户信息(昵称、头像等)
5. 密码加密存储(使用 BCrypt)
6. 注册时校验邮箱格式和密码强度
请在 Controller、Service、Mapper 层分别实现。
所有方法都必须有详细的中文注释。
为 Service 层编写单元测试。
模块二:商品管理
> 帮我实现商品管理模块:
1. 商品实体包含:商品名、描述、价格、库存、分类、图片URL
2. 支持商品列表的分页查询(可按分类筛选、按价格排序)
3. 支持商品详情查询
4. 支持商品搜索(根据名称模糊搜索)
5. 管理员可以新增、修改、下架商品
同样实现 Controller、Service、Mapper 三层。
包含详细注释和单元测试。
模块三:购物车
> 帮我实现购物车模块:
1. 用户可以把商品加入购物车(指定数量)
2. 用户可以修改购物车中商品的数量
3. 用户可以从购物车中删除商品
4. 用户可以查看自己的购物车列表
5. 购物车数据存储在 Redis 中
6. 同一个商品重复添加时,数量累加
需要配置 Redis 连接,实现 Redis 操作的工具类。
模块四:订单管理
> 帮我实现订单模块:
1. 用户可以从购物车生成订单
2. 订单包含:订单号、用户ID、商品列表、总金额、状态
3. 订单状态流转:待支付 → 已支付 → 已发货 → 已完成 → 已取消
4. 用户可以查看自己的订单列表
5. 用户可以取消待支付的订单
6. 生成订单时自动扣减库存(使用数据库事务确保数据一致性)
7. 使用 @Transactional 注解管理事务
模块五:统一异常处理
> 帮我实现全局异常处理:
1. 创建自定义业务异常类 BusinessException
2. 使用 @ControllerAdvice 实现全局异常拦截
3. 不同的异常类型返回对应的 HTTP 状态码和错误信息
4. 常见异常的处理:
- 参数校验失败 → 400
- 资源不存在 → 404
- 业务逻辑错误 → 422
- 服务器内部错误 → 500
10.4 调试与测试
开发过程中不可避免会遇到 Bug。下面是处理 Bug 的标准流程:
Bug 处理流程图
═══════════════════════════════════════════════════════════
发现 Bug(启动报错 / 功能不正常 / 测试失败)
│
▼
┌──────────────────┐
│ 把错误信息完整地 │ ← 复制粘贴,不要遗漏任何信息
│ 复制给 Claude Code │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ Claude Code 分析 │
│ 错误原因 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ Claude Code 提出 │
│ 修复方案 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ 你确认 → 修复 │
└──────┬───────────┘
│
▼
┌──────────────────┐
│ Claude Code 运行 │
│ 测试验证修复 │
└──────┬───────────┘
│
▼
测试通过?
│ │
是 否 → 返回分析步骤,重新调试
│
▼
Bug 已修复!
10.5 部署项目
当你完成了所有模块的开发和测试后,最后一步是部署:
> 帮我部署这个 OCP 项目。我的服务器环境是:
- 操作系统:Linux (Ubuntu 20.04)
- 已安装 Docker 和 Docker Compose
- 数据库:MySQL 8.0
- 需要配置 Nginx 反向代理
请帮我:
1. 创建 Dockerfile(把项目打包成 Docker 镜像)
2. 创建 docker-compose.yml(编排 MySQL + Redis + 应用)
3. 创建 Nginx 配置文件
4. 生成部署脚本 deploy.sh
5. 写出详细的部署步骤文档 DEPLOY.md
Claude Code 会生成所有需要的文件,包括:
dockerfile
# Dockerfile ------ 把 Java 应用打包成容器镜像
# 使用官方的 OpenJDK 11 镜像作为基础
FROM openjdk:11-jre-slim
# 设置容器内的工作目录
WORKDIR /app
# 把编译好的 jar 包复制到容器中
COPY target/ocp-platform-1.0.0.jar app.jar
# 暴露 8080 端口(Spring Boot 默认端口)
EXPOSE 8080
# 容器启动时执行的命令
ENTRYPOINT ["java", "-jar", "app.jar"]
10.6 OCP 项目完整对话流程总结
OCP 项目从零到部署的完整对话流程
═══════════════════════════════════════════════════════════
第 1 步:创建项目骨架
"帮我创建一个标准的 Spring Boot 项目骨架......"
│
▼
第 2 步:初始化 CLAUDE.md
/init(让 Claude Code 理解你的项目)
│
▼
第 3 步:逐个实现功能模块
┌─────────────────────────────────────┐
│ 用户模块 → 商品模块 → 购物车模块 │
│ → 订单模块 → 异常处理 → 日志配置 │
└─────────────────────────────────────┘
每完成一个模块,运行测试验证
│
▼
第 4 步:集成测试
"帮我写一个端到端的集成测试......"
│
▼
第 5 步:部署上线
"帮我创建 Dockerfile 和部署脚本......"
│
▼
✅ 项目完成!
11. 常见问题与排错指南
11.1 安装问题
| 问题 | 原因 | 解决方法 |
|---|---|---|
npm: command not found |
没有安装 Node.js | 去 nodejs.org 下载安装 |
claude: command not found |
Claude Code 没有安装成功 | 重新执行 npm install -g @anthropic-ai/claude-code |
| 安装过程报网络错误 | 网络问题 | 使用国内镜像:npm install --registry=https://registry.npmmirror.com |
permission denied |
权限不足 | Mac/Linux 加 sudo:sudo npm install -g ... |
11.2 使用问题
| 问题 | 原因 | 解决方法 |
|---|---|---|
| AI 回复说没有权限读文件 | 文件在工作区之外 | 用 /add-dir 添加目录 |
| AI 好像"忘记"之前说过的内容 | 上下文太长了 | 使用 /compact 压缩上下文 |
| 代码修改后跟预期不一样 | 需求描述不够具体 | 重新描述要求,给出更具体的示例 |
| 执行命令时报错 | 环境配置问题 | 把完整错误信息发给 Claude Code |
11.3 Token 和费用问题
| 问题 | 解决方法 |
|---|---|
| 费用太高 | 切换到 Sonnet 模型:/model sonnet |
| Token 消耗太快 | 使用 /compact 定期压缩上下文 |
| 想控制预算 | 每次大任务前用 /cost 查看当前花费 |
11.4 新手最容易犯的 5 个错误
-
❌ 需求描述太模糊
- 错误:"帮我做一个网站"
- 正确:"帮我做一个电商网站的商品列表页,要展示商品图片、名称、价格,支持按分类筛选"
-
❌ 不提供错误信息
- 错误:"程序跑不起来了"
- 正确:"运行时报这个错误:粘贴完整错误信息,我的项目是 Spring Boot 2.7,Java 11"
-
❌ 一次提太多需求
- 错误:一口气说出 10 个功能需求
- 正确:一次说 1-2 个功能,完成后再提下一个
-
❌ 不给上下文
- 错误:在一个新项目中直接说"修改 UserService"
- 正确:先说"帮我看看这个项目",等 AI 理解了再提具体修改
-
❌ 不让 AI 运行测试
- 错误:改完代码就认为完成了
- 正确:每次修改后说"改完后帮我运行一下相关测试"
12. 总结与下一步
12.1 你学到了什么
恭喜你完成了 Claude Code 入门教程!让我们回顾一下你学到了什么:
学习成果检查清单
═══════════════════════════════════════════════════════════
□ 理解 Claude Code 是什么,能做什么
□ 独立完成 Claude Code 的安装和配置
□ 掌握基础的对话和指令技巧
□ 理解上下文(Context)、Token、工具(Tools)等核心概念
□ 能够用自然语言让 AI 读取、搜索、修改代码文件
□ 理解 CLAUDE.md 文件的作用
□ 能够管理一个完整的多文件项目
□ 了解 MCP、Skills、Hooks 等高级功能
□ 能够从零开始完成一个 OCP 项目的开发
□ 知道遇到问题该如何排查
12.2 Claude Code 的工作哲学
在使用 Claude Code 的过程中,请记住这 5 条"黄金法则":
Claude Code 五条黄金法则
════════════════════════════════════════════════════════════
1️⃣ 你是导演,AI 是演员
你负责告诉 AI "要演什么",AI 负责具体的"表演"
你不需要知道怎么写代码,但需要清楚地描述你想要的结果
2️⃣ 越具体,结果越好
"帮我写个用户登录功能" 不如
"帮我写一个用户登录接口,接收用户名和密码,
验证成功后返回 JWT Token,失败返回错误信息"
3️⃣ 迭代比一次完美更重要
先让 AI 做出一个能用的版本,然后再逐步优化
不要试图第一次就把所有细节都说清楚
4️⃣ 善用 AI 的眼睛
让 AI 帮你读代码、搜代码、分析代码
你只需要做决策
5️⃣ 保持"人在回路中"
AI 是强大的工具,但最终的决定权在你手里
审查 AI 的修改,理解 AI 的逻辑,做出自己的判断
12.3 推荐的学习路径
进阶学习路径
═══════════════════════════════════════════════════════════
初学者 ──→ 本教程 ──→ 用 Claude Code 做一个小项目
│
▼
阅读 Claude Code 官方文档
了解更高级的配置选项
│
▼
学习 MCP 协议
连接 GitHub、数据库等外部服务
│
▼
编写自定义 Skills
让 Claude Code 更适配你的工作流
│
▼
配置 Hooks
实现自动化工作流
│
▼
掌握 Workflow
实现多 AI 并行处理复杂任务
12.4 最后的寄语
技术世界变化很快,但有一条不变:工具是为人类服务的。
Claude Code 不是为了取代你,而是为了放大你的能力。它就像一个不知疲倦的伙伴,帮你在编程的海洋中航行。
记住:
- 不要害怕犯错 ------ 有 Claude Code 在身边,错误都是学习机会
- 保持好奇心 ------ 多问"为什么",让 AI 给你解释
- 享受创造的乐趣 ------ 编程的本质是用代码创造价值
"你不是在学编程,你是在学习如何指挥一个超级智能的编程团队。"
------ 一位 Claude Code 用户的感悟
本教程版本:v1.0 | 最后更新:2026 年 6 月
适用 Claude Code 版本:v2.0+