尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

AI编程实战:用Claude Code和Codex构建待办API

AI编程实战:用Claude Code和Codex构建待办API AI 编程正在把“写代码”这件事从机械敲键盘变成人机协作。Claude Code、Codex 这类工具已经可以在终端里根据自然语言指令读取项目文件、生成代码、修改代码甚至执行命令Vibe Coding 则代表了一种新的开发状态你把意图说清楚AI 负责落地你再负责验收和调整。对零基础学习者来说这既是最好的入门机会也是最容易养成坏习惯的时期。如果只知道复制粘贴你会得到一堆看不懂、跑不通、不敢改的代码如果能掌握一套“描述需求 - 生成代码 - 运行验证 - 修复问题”的方法AI 编程工具可以成为你的私人陪练。这篇文章会把这套方法完整走一遍先讲清楚 Vibe Coding 适合做什么再把 Claude Code 和 Codex 装好最后用一个待办事项 API 项目从零跑到能加需求、能查错并整理出常见报错的排查路径。1. 先理解 Vibe Coding它不是“随便乱写”而是“意图 实现 验收”1.1 Vibe Coding 到底在说什么“Vibe Coding”由“vibe”和“coding”组合而来直译成“顺着心情编程”并不准确。它更像是一种以自然语言为主要交互方式的开发模式开发者用一段话描述要实现的功能AI 生成代码开发者再通过运行结果不断调整描述让最终产物贴近预期。与传统的“自己写每一行代码”不同Vibe Coding 把大量编码劳动交给模型。但注意这不是“不用学习编程”而是把学习重点从“语法记忆”转移到“需求拆解、代码审查、问题定位”。你可以不懂每一行代码的所有细节但你必须看得懂程序的运行结果知道报错日志说明什么。注意Vibe Coding 不等于不学习编程。理解不了运行结果就无法驾驭 AI 生成的代码。1.2 适合什么不适合什么先看适合场景原型验证快速验证一个想法能不能跑通。内部工具写日志分析脚本、文件批处理脚本、数据转换脚本。学习新技术用自然语言让 AI 生成一段示例代码再逐行理解。个人项目不做高并发、不涉及敏感数据的工具类应用。辅助工作生成测试数据、写正则、补充注释、翻译旧代码。再看不适合场景高并发核心系统。金融风控、医疗设备、自动驾驶等安全敏感领域。遗留系统大规模重构。需要严格合规审计的团队项目。为什么不适合因为 AI 模型基于训练数据生成代码对通用场景很擅长但并不知道你们团队的业务上下文、历史决策、性能指标和合规要求。工具只是加速器不会替代判断。1.3 零基础正确学习路径分三个阶段来看。阶段一会用工具。安装 Claude Code 或 Codex能通过终端对话生成一个简单脚本比如“用 Python 读取 CSV 文件并打印前 10 行”。阶段二会验收。能运行代码、观察输出、理解报错、提出修复指令。这个阶段最关键因为它决定了你是“会用 AI”还是“被 AI 带着跑”。阶段三会拆任务。能把一个完整项目拆成若干个独立小程序逐个生成、逐个集成最后拼成一个系统。走到这一步你已经能规划“从想法到项目”的全过程。这三个阶段正好对应“从会问 AI 到会用 AI 写代码”会问只是第一步会验收和会拆解才是“会用”。1.4 需要避免的误区新手常见四个误区一次让 AI 生成整个系统。项目一复杂上下文超出模型处理范围结果往往是残缺代码连运行都困难。拿到代码不运行就继续推进。很多问题只有在运行和测试时才会暴露。不理解代码就直接部署。你无法回答“这个接口会不会崩、数据存在哪、密钥放在哪”上线后无从维护。盲目相信 AI 的答案。模型会一本正经地给出语法正确但逻辑错误的代码还会使用已经废弃的 API。正确做法是把 AI 当“初稿生成器”。初稿能给你框架但验收、修改、加固仍然是你自己的工程任务。2. 环境准备把 Claude Code 和 Codex 装到可以直接对话2.1 准备哪些前置条件需要准备四样东西一个终端macOS 用 TerminalWindows 用 PowerShell 或 Windows TerminalLinux 用自带 shell。Node.js两个 CLI 工具都依赖 npm 安装。版本按官方要求建议至少 Node.js 18 或更高。GitAI 工具生成代码时通常也要初始化项目了解基本命令有帮助第一步不是必须。账号或 API 密钥Claude Code 和 Codex 都是在线调用模型服务需要对应账号的登录状态或配置 API Key。注意不要把 API Key 写进代码仓库也不要公开到博客或聊天窗口。检查依赖可以用下面这组命令node -v npm -v git --version依赖用途检查命令Node.js运行 npm 并安装 CLInode -vnpm安装工具npm -vGit项目版本管理git --version账号/API Key调用模型服务登录命令或环境变量2.2 安装 Claude Code常见安装方式是通过 npm 全局安装npm install -g anthropic-ai/claude-code安装后验证版本claude --version如果claude命令找不到先看当前终端是否加载了 npm 全局目录比如 macOS/Linux 的/usr/local/bin或用户目录下的.npm-global/bin。PATH 没配置好时命令会提示 not found。在项目目录里启动交互界面cd ~/projects/my-todo claude第一次启动会触发登录流程按终端提示完成认证。之后在会话中Claude Code 会先给出修改计划确认后它才写文件。关键点Claude Code 能直接读写当前目录里的文件。必须在正确的项目目录下启动否则它可能修改到你不想动的地方。第一次使用时最好先用一个临时目录练习。2.3 安装 Codex CLICodex CLI 同样通过 npm 安装npm install -g openai/codex codex --version使用方式分两种交互模式直接运行codex进入类似终端对话框。非交互模式使用codex exec执行单条任务例如codex exec 用 Python 写一个读取 CSV 文件并打印前 10 行的脚本IDE 插件在启动时会寻找系统里的codex可执行文件。如果插件报 “unable to locate the codex cli binary”通常是系统 PATH 或插件配置问题这一篇第 7 节会专门排查。2.4 配置模型接入默认服务与兼容端点默认情况下Claude Code 连接 Anthropic 服务Codex 连接 OpenAI 服务。如果你的账号使用官方服务安装登录后可以直接使用。如果你希望通过其他服务商的兼容 API 使用不同模型通常需要配置 base URL 和 API Key。以环境变量为例export OPENAI_BASE_URLhttps://your-provider.example.com/v1 export OPENAI_API_KEYyour-api-key export OPENAI_MODELyour-model-name不同工具读取的环境变量名不一样具体字段以工具文档为准。示例中的地址只是占位符实际接入时按服务方提供的文档填写。接入第三方模型时必须确认三件事API 地址是否兼容工具使用的协议。模型名是否被当前工具版本识别。认证方式是否匹配例如 Bearer Token 还是其他形式。如果模型名不被识别日志会提示类似xxx is not a model this version of ... recognizes到第 7 节处理。注意API Key 属于敏感信息不要写进代码仓库也不要在博客或聊天中公开。2.5 环境自检清单安装完成后按顺序检查下面几项检查项预期结果不通过时的处理node -v输出 Node 版本号安装或切换 Node 版本claude --version输出 Claude Code 版本号重新安装检查 PATHcodex --version输出 Codex 版本号重新安装检查 PATH登录状态能发起一次普通会话重新登录或配置 API Key基础目录当前目录是目标项目目录cd 到正确目录自检的意义是先把环境问题排除再进入项目开发。很多新手在代码阶段遇到奇怪问题最后发现只是工具没装好。3. 用 AI 编程工具做第一个小项目待办事项 API3.1 把需求写成可执行的指令不要直接说“帮我写个网站”太模糊。要给 AI 四个信息技术栈、功能、数据、运行要求。示例提示词使用 Python 的 Flask 框架写一个待办事项 API。功能包括查看全部待办、新增待办、删除待办。数据结构包含 id、title、done。使用内存列表存储不需要数据库。运行方式为 python app.py端口为 5000。包含简单注释。API 路径为 GET /todos、POST /todos、DELETE /todos/id。这样生成结果比“写一个待办列表”可控得多。接口路径、技术栈、数据结构都被定义清楚AI 不需要猜测。3.2 用 Claude Code 生成 Flask 版本在项目目录启动 Claude Codecd ~/projects/my-todo claude把 3.1 的提示词粘贴进去。Claude Code 可能会先生成计划列出将创建的文件然后开始写代码。生成结果的实际格式会因模型版本不同而略有差异但通常包括app.py和可选的requirements.txt。下面是一段最小实现示例用于解释代码结构from flask import Flask, request, jsonify app Flask(__name__) todos [] next_id 1 app.route(/todos, methods[GET]) def list_todos(): return jsonify(todos) app.route(/todos, methods[POST]) def create_todo(): data request.get_json() global next_id todo {id: next_id, title: data.get(title), done: False} todos.append(todo) next_id 1 return jsonify(todo), 201 app.route(/todos/int:todo_id, methods[DELETE]) def delete_todo(todo_id): for index, todo in enumerate(todos): if todo[id] todo_id: del todos[index] return , 204 return jsonify({error: not found}), 404 if __name__ __main__: app.run(debugTrue)关键点todos是内存列表重启服务后数据丢失。学习阶段能接受生产环境必须换成数据库。next_id用于生成自增 id但没有加锁。单进程足够多进程会出现并发问题。data.get(title)没有处理 title 缺失后续需要补输入校验。jsonify是 Flask 的标准 JSON 响应方式。这段代码不是展示“AI 有多厉害”而是展示“你拿到代码后应该看哪些地方”。3.3 用 Codex CLI 生成 Node.js 版本同样的需求换成 Node.js 会更直观codex exec 使用 Node.js 和 Express 写一个待办事项 API接口包括 GET /todos、POST /todos、DELETE /todos/:id使用内存数组存储运行方式 npm start代码生成结果类似const express require(express); const app express(); app.use(express.json()); const todos []; let nextId 1; app.get(/todos, (req, res) res.json(todos)); app.post(/todos, (req, res) { const todo { id: nextId, title: req.body.title, done: false }; todos.push(todo); res.status(201).json(todo); }); app.delete(/todos/:id, (req, res) { const index todos.findIndex(t t.id Number(req.params.id)); if (index -1) return res.status(404).json({ error: not found }); todos.splice(index, 1); res.status(204).end(); }); app.listen(3000, () console.log(server running on 3000));运行前要先创建package.json并安装依赖npm init -y npm install express3.4 两个版本对比维度Flask 版本Express 版本运行环境PythonNode.js端口50003000主要依赖FlaskExpress存储内存列表内存数组启动方式python app.pynpm start适合初学者语法简洁需要理解 npm 生态选择哪个版本不重要重要的是你能读懂、能运行、能改进。两个版本都遵守同样的接口约定说明“接口设计”和“语言实现”是分开的。3.5 让 AI 解释代码零基础学习者最容易犯的错是“生成完就跑”。正确做法是让模型解释它写的代码。提示词示例请逐行解释 app.py 中 create_todo 函数的作用并指出如果 title 字段缺失会发生什么。这种追问能把“会生成代码”变成“会读代码”。AI 生成的代码不是你逃避学习的借口而是你学习真实项目结构的教材。4. 运行、测试、迭代AI 写代码不等于项目完成4.1 创建虚拟环境并安装依赖Flask 版本建议使用虚拟环境python3 -m venv venv source venv/bin/activate # Windows 下执行 venv\Scripts\activate pip install -r requirements.txt python app.pyExpress 版本npm install npm start学习环境里直接跑就可以。生产环境则要考虑进程守护、端口绑定、环境变量注入、自动重启等问题。注意不要只验证程序能启动还要验证输入、输出、异常分支和日志是否符合预期。4.2 第一次运行会遇到的常见问题先看一张速查表现象常见原因处理方式ModuleNotFoundError: No module named flask没有在虚拟环境安装依赖激活 venv 后执行 pip installError: Cannot find module express没有执行 npm install执行 npm installAddress already in use端口被占用更换端口或关闭占用进程app.run() 后无输出服务正在监听日志不打印直接访问接口验证语法错误模型生成代码有笔误把完整报错粘贴给 AI 让它修复重点不是“一次跑通”而是“出现报错知道从哪查”。第一次运行遇到错误是常态日志就是第一线索。4.3 用 curl 验证接口启动服务后新开一个终端做功能验证。查看待办列表curl http://127.0.0.1:5000/todos预期输出[]新增待办curl -X POST http://127.0.0.1:5000/todos -H Content-Type: application/json -d {title:学习 AI 编程}预期输出{done: false, id: 1, title: 学习 AI 编程}删除待办curl -X DELETE http://127.0.0.1:5000/todos/1预期没有响应体状态码 204。用表格整理功能验证用例用例请求预期结果查询空列表GET /todos[]新增正常POST /todos 带 title返回 201 和对象删除存在项DELETE /todos/1204删除不存在项DELETE /todos/999404title 为空POST /todos 不带 title目前可能 500需要后续补校验4.4 让 AI 增量修改加一个“标记完成”接口小项目最常见的错误是“每次修改都重新生成整个文件”导致之前调好的功能被覆盖。正确做法是让 AI 增量修改。提示词示例在现有 Flask 应用 app.py 中新增接口 PATCH /todos/int:todo_id/done作用是把对应 todo 的 done 字段改为 true。保持其他接口不变不修改数据结构不引入数据库。如果 AI 改得不对把报错或测试结果反馈给它运行 PATCH 后返回 404请检查路由是否正确并告诉我你修改了哪些行。这种“生成 - 运行 - 反馈 - 再生成”的循环才是 Vibe Coding 的核心。每次只改一个点验证一个点。4.5 验收标准运行通过不等于验收通过。需要检查正常路径能新增、查询、删除。异常路径删除不存在的 id 返回 404。数据完整性字段名是否符合预期。代码可维护性函数是否短小、变量命名是否清楚。安全与边界POST 空 title 时会不会报错。建议把验收结果记录在 README 中方便后续回看。你不需要等 AI 写出完美代码你需要的是不断测试它直到它符合你的预期。5. 从“会问 AI”到“会用 AI”的关键技巧5.1 提示词四要素高质量提示词通常包含四个部分角色给 AI 设定身份例如“你是一个熟悉 Flask 的中级 Python 开发者”。背景说明项目用途、当前目录、已有文件。任务明确要做什么包含具体接口、数据结构、约束。验收标准怎么算完成例如“能通过 curl 调到 /todos 并返回 JSON”。对比一下| 模糊提示词 | 高质量提示词
返回列表