企业官网建设流程全解析

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_URL="https://api.highwayapi.ai/anthropic"

创建项目目录并初始化：

mkdir task-manager && cd task-manager

git 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, bcryptjs）

2. tsconfig.json

3. .eslintrc.json

4. src/app.ts（Express 应用入口）

5. src/server.ts（启动文件）"

生成数据库 Schema：

claude "在 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 加密，登录返回 JWT

2. 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 到 localStorage

2. 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 时自动跳转登录页

- 封装 authApi（login, register）和 tasksApi（list, create, update, delete）"

第四步：运行测试与修 Bug

claude "运行后端测试。如果有失败，分析原因并修复"

一个典型 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 -d"

CI 里涉及的 Docker Hub 凭据、服务器 SSH 私钥，记得放到 GitHub Secrets，不要明文写进 workflow 文件。

Token 用量参考

整个项目从零到能跑，Claude Code 大致完成了：

• 30 多次独立的代码生成/修改任务
• 修复了若干个 bug
• 生成约 1,200 行 TypeScript 代码

token 消耗量级供参考：输入约 800K、输出约 200K。具体费用取决于你用的模型和接入渠道，可以在自己的 API 平台账单里查看真实数据。想控制成本的话，简单任务用轻量模型、用/compact精简上下文、只传相关文件，都能有效降低用量。

经验总结

几个实战中验证有效的原则：

1. 先写好 CLAUDE.md：清晰的项目上下文让生成的代码更贴合你的规范。
2. 任务拆细：每次只做一件事，比一次性让 AI 干完所有事可控得多，也更好 review。
3. 及时跑测试：每完成一个模块就测，问题早发现。
4. 用 Git 留存档：每个阶段提交一次，改坏了能回滚。
5. 生成的代码必须 review：尤其是认证、权限、数据库这些安全敏感的部分，AI 给的实现"能跑"不等于"安全"。

结语

用 Claude Code 做全栈开发，本质不是让 AI 替你工作，而是分工：AI 负责写代码、查 bug、生成配置，你负责设计架构、review 代码、把控质量和安全。把这套流程跑顺，确实能省下大量重复劳动的时间。API 接入方式按自己的网络和预算选择即可，关键是把"拆任务 + 勤 review"的习惯养成。