AI 代码生成工具已经从玩具进化成真正能用的生产力工具。本文用一个完整的全栈项目——任务管理系统——演示如何用 Claude Code 从零走完需求分析到部署的全流程并复盘其中的实战经验和踩坑点。项目介绍构建一个简化版任务管理系统类似 Todoist功能包括用户注册/登录JWT 认证任务的增删改查任务状态管理待办/进行中/已完成前后端分离技术选型后端Node.js Express TypeScript Prisma PostgreSQL前端React Vite TypeScript Tailwind CSS部署Docker Compose第一步环境准备先确保 Claude Code 已装好并配置了 API。Claude Code 通过两个环境变量识别接入方式export ANTHROPIC_API_KEY你的密钥# 若用官方 API 且网络可直连无需设置下面这行# 若走第三方中转则指向服务商提供的地址,这里以jiekou.vip为例export ANTHROPIC_BASE_URLhttps://api.highwayapi.ai/anthropic创建项目目录并初始化mkdir task-manager cd task-managergit init创建CLAUDE.md项目上下文文件这一步很关键——清晰的上下文能显著提升生成质量# Task Manager 项目全栈任务管理系统前后端分离。## 技术栈- 后端Node.js 20 Express TypeScript Prisma PostgreSQL- 前端React 18 Vite TypeScript Tailwind CSS- 部署Docker Compose## 目录结构- /backend: 后端代码- /frontend: 前端代码- /docker: Docker 配置## 代码规范- TypeScript 严格模式- ESLint Prettier- 接口统一返回 { success, data, message }第二步搭建后端骨架生成项目结构claude 按照 CLAUDE.md 的说明帮我初始化后端项目。在 backend 目录下创建1. package.json依赖express, typescript, prisma, prisma/client, jsonwebtoken, bcryptjs2. tsconfig.json3. .eslintrc.json4. src/app.tsExpress 应用入口5. src/server.ts启动文件生成数据库 Schemaclaude 在 backend/prisma/schema.prisma 中定义数据模型- User: id, email, password, name, createdAt- Task: id, title, description?, status(TODO/IN_PROGRESS/DONE), userId, createdAt, updatedAt用 PostgreSQL datasource生成 API 路由claude 基于 Prisma schema在 backend/src/routes 下生成1. auth.ts - 注册(/register)和登录(/login)接口密码用 bcrypt 加密登录返回 JWT2. tasks.ts - CRUD 接口需要 JWT 中间件验证只能操作自己的任务安全提示涉及密码存储和 JWT 的代码生成后务必 review——确认密码确实经过 bcrypt 加盐哈希、JWT 密钥从环境变量读取而非硬编码、任务接口做了只能操作本人数据的越权校验。这些是 AI 容易给出能跑但不够安全实现的地方。第三步搭建前端初始化 React 项目claude 在 frontend 目录下初始化 Vite React TypeScript 项目安装 tailwindcss、axios、react-router-dom配置 tailwind创建基础目录结构src/pages, src/components, src/hooks, src/api生成页面组件claude 创建以下页面1. src/pages/Login.tsx - 登录表单调用 POST /api/auth/login成功后存 JWT 到 localStorage2. src/pages/Register.tsx - 注册表单3. src/pages/Tasks.tsx - 任务列表页支持新增、编辑状态、删除用 Tailwind 做简洁美观的 UI支持响应式布局补充把 JWT 存 localStorage 实现简单但存在 XSS 下被盗取的风险。生产项目可考虑改用 httpOnly Cookie本文为演示从简。生成 API 封装层claude 创建 src/api/index.ts用 axios 封装所有后端接口- 请求拦截器自动携带 Authorization: Bearer token- 响应拦截器401 时自动跳转登录页- 封装 authApilogin, register和 tasksApilist, create, update, delete第四步运行测试与修 Bugclaude 运行后端测试。如果有失败分析原因并修复一个典型 Bug 复盘开发中遇到 JWT 中间件没把用户 ID 正确挂到req.user导致 tasks 路由拿不到当前用户。claude src/middlewares/auth.ts 的 JWT 验证中间件没有把 userId 正确挂载到 req.user导致 tasks 路由里拿不到当前用户 ID。帮我分析并修复同时更新 TypeScript 类型声明扩展 Request 接口根因是 TypeScript 下需要通过**声明合并Declaration Merging**扩展 Express 的Request类型给它补上user字段。这类代码逻辑没错、但类型系统不认的问题是 TS 项目里很常见的坑。第五步Docker 化部署claude 为项目创建 Docker 配置1. backend/Dockerfile - 多阶段构建生产镜像2. frontend/Dockerfile - Nginx 托管静态资源3. docker-compose.yml - 包含 postgres, backend, frontend 三个服务配置环境变量和健康检查本地验证docker compose up --build提示生成的 compose 文件里数据库密码、JWT 密钥等不要写死明文用.env注入并加进.gitignore。第六步CI/CD 流水线claude 创建 .github/workflows/deploy.yml实现1. push 到 main 分支时触发2. 运行 TypeScript 类型检查3. 运行单元测试4. 构建 Docker 镜像并推送到镜像仓库5. SSH 到服务器执行 docker compose pull docker compose up -dCI 里涉及的 Docker Hub 凭据、服务器 SSH 私钥记得放到 GitHub Secrets不要明文写进 workflow 文件。Token 用量参考整个项目从零到能跑Claude Code 大致完成了30 多次独立的代码生成/修改任务修复了若干个 bug生成约 1,200 行 TypeScript 代码token 消耗量级供参考输入约 800K、输出约 200K。具体费用取决于你用的模型和接入渠道可以在自己的 API 平台账单里查看真实数据。想控制成本的话简单任务用轻量模型、用/compact精简上下文、只传相关文件都能有效降低用量。经验总结几个实战中验证有效的原则先写好 CLAUDE.md清晰的项目上下文让生成的代码更贴合你的规范。任务拆细每次只做一件事比一次性让 AI 干完所有事可控得多也更好 review。及时跑测试每完成一个模块就测问题早发现。用 Git 留存档每个阶段提交一次改坏了能回滚。生成的代码必须 review尤其是认证、权限、数据库这些安全敏感的部分AI 给的实现能跑不等于安全。结语用 Claude Code 做全栈开发本质不是让 AI 替你工作而是分工AI 负责写代码、查 bug、生成配置你负责设计架构、review 代码、把控质量和安全。把这套流程跑顺确实能省下大量重复劳动的时间。API 接入方式按自己的网络和预算选择即可关键是把拆任务 勤 review的习惯养成。
Claude Code 全栈实战：从零开发一个任务管理系统
AI 代码生成工具已经从玩具进化成真正能用的生产力工具。本文用一个完整的全栈项目——任务管理系统——演示如何用 Claude Code 从零走完需求分析到部署的全流程并复盘其中的实战经验和踩坑点。项目介绍构建一个简化版任务管理系统类似 Todoist功能包括用户注册/登录JWT 认证任务的增删改查任务状态管理待办/进行中/已完成前后端分离技术选型后端Node.js Express TypeScript Prisma PostgreSQL前端React Vite TypeScript Tailwind CSS部署Docker Compose第一步环境准备先确保 Claude Code 已装好并配置了 API。Claude Code 通过两个环境变量识别接入方式export ANTHROPIC_API_KEY你的密钥# 若用官方 API 且网络可直连无需设置下面这行# 若走第三方中转则指向服务商提供的地址,这里以jiekou.vip为例export ANTHROPIC_BASE_URLhttps://api.highwayapi.ai/anthropic创建项目目录并初始化mkdir task-manager cd task-managergit init创建CLAUDE.md项目上下文文件这一步很关键——清晰的上下文能显著提升生成质量# Task Manager 项目全栈任务管理系统前后端分离。## 技术栈- 后端Node.js 20 Express TypeScript Prisma PostgreSQL- 前端React 18 Vite TypeScript Tailwind CSS- 部署Docker Compose## 目录结构- /backend: 后端代码- /frontend: 前端代码- /docker: Docker 配置## 代码规范- TypeScript 严格模式- ESLint Prettier- 接口统一返回 { success, data, message }第二步搭建后端骨架生成项目结构claude 按照 CLAUDE.md 的说明帮我初始化后端项目。在 backend 目录下创建1. package.json依赖express, typescript, prisma, prisma/client, jsonwebtoken, bcryptjs2. tsconfig.json3. .eslintrc.json4. src/app.tsExpress 应用入口5. src/server.ts启动文件生成数据库 Schemaclaude 在 backend/prisma/schema.prisma 中定义数据模型- User: id, email, password, name, createdAt- Task: id, title, description?, status(TODO/IN_PROGRESS/DONE), userId, createdAt, updatedAt用 PostgreSQL datasource生成 API 路由claude 基于 Prisma schema在 backend/src/routes 下生成1. auth.ts - 注册(/register)和登录(/login)接口密码用 bcrypt 加密登录返回 JWT2. tasks.ts - CRUD 接口需要 JWT 中间件验证只能操作自己的任务安全提示涉及密码存储和 JWT 的代码生成后务必 review——确认密码确实经过 bcrypt 加盐哈希、JWT 密钥从环境变量读取而非硬编码、任务接口做了只能操作本人数据的越权校验。这些是 AI 容易给出能跑但不够安全实现的地方。第三步搭建前端初始化 React 项目claude 在 frontend 目录下初始化 Vite React TypeScript 项目安装 tailwindcss、axios、react-router-dom配置 tailwind创建基础目录结构src/pages, src/components, src/hooks, src/api生成页面组件claude 创建以下页面1. src/pages/Login.tsx - 登录表单调用 POST /api/auth/login成功后存 JWT 到 localStorage2. src/pages/Register.tsx - 注册表单3. src/pages/Tasks.tsx - 任务列表页支持新增、编辑状态、删除用 Tailwind 做简洁美观的 UI支持响应式布局补充把 JWT 存 localStorage 实现简单但存在 XSS 下被盗取的风险。生产项目可考虑改用 httpOnly Cookie本文为演示从简。生成 API 封装层claude 创建 src/api/index.ts用 axios 封装所有后端接口- 请求拦截器自动携带 Authorization: Bearer token- 响应拦截器401 时自动跳转登录页- 封装 authApilogin, register和 tasksApilist, create, update, delete第四步运行测试与修 Bugclaude 运行后端测试。如果有失败分析原因并修复一个典型 Bug 复盘开发中遇到 JWT 中间件没把用户 ID 正确挂到req.user导致 tasks 路由拿不到当前用户。claude src/middlewares/auth.ts 的 JWT 验证中间件没有把 userId 正确挂载到 req.user导致 tasks 路由里拿不到当前用户 ID。帮我分析并修复同时更新 TypeScript 类型声明扩展 Request 接口根因是 TypeScript 下需要通过**声明合并Declaration Merging**扩展 Express 的Request类型给它补上user字段。这类代码逻辑没错、但类型系统不认的问题是 TS 项目里很常见的坑。第五步Docker 化部署claude 为项目创建 Docker 配置1. backend/Dockerfile - 多阶段构建生产镜像2. frontend/Dockerfile - Nginx 托管静态资源3. docker-compose.yml - 包含 postgres, backend, frontend 三个服务配置环境变量和健康检查本地验证docker compose up --build提示生成的 compose 文件里数据库密码、JWT 密钥等不要写死明文用.env注入并加进.gitignore。第六步CI/CD 流水线claude 创建 .github/workflows/deploy.yml实现1. push 到 main 分支时触发2. 运行 TypeScript 类型检查3. 运行单元测试4. 构建 Docker 镜像并推送到镜像仓库5. SSH 到服务器执行 docker compose pull docker compose up -dCI 里涉及的 Docker Hub 凭据、服务器 SSH 私钥记得放到 GitHub Secrets不要明文写进 workflow 文件。Token 用量参考整个项目从零到能跑Claude Code 大致完成了30 多次独立的代码生成/修改任务修复了若干个 bug生成约 1,200 行 TypeScript 代码token 消耗量级供参考输入约 800K、输出约 200K。具体费用取决于你用的模型和接入渠道可以在自己的 API 平台账单里查看真实数据。想控制成本的话简单任务用轻量模型、用/compact精简上下文、只传相关文件都能有效降低用量。经验总结几个实战中验证有效的原则先写好 CLAUDE.md清晰的项目上下文让生成的代码更贴合你的规范。任务拆细每次只做一件事比一次性让 AI 干完所有事可控得多也更好 review。及时跑测试每完成一个模块就测问题早发现。用 Git 留存档每个阶段提交一次改坏了能回滚。生成的代码必须 review尤其是认证、权限、数据库这些安全敏感的部分AI 给的实现能跑不等于安全。结语用 Claude Code 做全栈开发本质不是让 AI 替你工作而是分工AI 负责写代码、查 bug、生成配置你负责设计架构、review 代码、把控质量和安全。把这套流程跑顺确实能省下大量重复劳动的时间。API 接入方式按自己的网络和预算选择即可关键是把拆任务 勤 review的习惯养成。
