Skip to Content

4.1 API 开发基础

什么是 API?

API = Application Programming Interface(应用程序接口)

通俗理解

  • API 就像餐厅的菜单
  • 你(前端)点菜(发送请求)
  • 厨房(后端)做菜(处理数据)
  • 服务员(API)送菜(返回结果)

为什么需要 API

  • ✅ 前后端分离(前端显示,后端处理)
  • ✅ 数据复用(多个应用共享同一个 API)
  • ✅ 安全性(隐藏数据库细节)
  • ✅ 灵活性(可以单独升级前端或后端)

只要把需求描述清楚,AI 会把「菜单」写出来;你要做的是确认菜名、口味、要不要辣。

RESTful API 设计

REST = Representational State Transfer

核心原则:用 HTTP 方法表示操作

HTTP 方法操作示例
GET获取数据GET /api/posts - 获取文章列表
POST创建数据POST /api/posts - 创建新文章
PUT更新数据PUT /api/posts/1 - 更新 ID 为 1 的文章
DELETE删除数据DELETE /api/posts/1 - 删除 ID 为 1 的文章

URL 设计规范

✅ 好的设计: GET /api/posts - 获取所有文章 GET /api/posts/1 - 获取 ID 为 1 的文章 POST /api/posts - 创建新文章 PUT /api/posts/1 - 更新文章 DELETE /api/posts/1 - 删除文章 ❌ 不好的设计: GET /api/getPosts GET /api/getPostById?id=1 POST /api/createPost

命名时多问一句:「如果以后在这个地址上做别的操作,会不会别扭?」保持统一的 REST 风格,后面接手也能秒懂。

Next.js API Routes

Next.js 内置 API 功能,无需单独搭建后端服务器。

创建第一个 API

文件位置app/api/hello/route.ts

// app/api/hello/route.ts import { NextResponse } from 'next/server'; export async function GET() { return NextResponse.json({ message: "Hello from API!", timestamp: new Date().toISOString() }); }

访问http://localhost:3000/api/hello

返回结果

{ "message": "Hello from API!", "timestamp": "2025-10-30T10:30:00.000Z" }

测试 API 别只在浏览器看一眼。用 curl、Postman 或 VS Code 的 REST Client 插件,能方便记录请求参数和返回值。

带参数的 API

动态路由app/api/posts/[id]/route.ts

// app/api/posts/[id]/route.ts import { NextResponse } from 'next/server'; export async function GET( request: Request, { params }: { params: { id: string } } ) { const id = params.id; // 模拟从数据库获取数据 const post = { id, title: `文章 ${id}`, content: "这是文章内容", author: "Ben" }; return NextResponse.json(post); }

POST 请求处理

// app/api/contact/route.ts import { NextResponse } from 'next/server'; export async function POST(request: Request) { const body = await request.json(); const { name, email, message } = body; // 验证数据 if (!name || !email || !message) { return NextResponse.json( { error: "缺少必要字段" }, { status: 400 } ); } // 这里可以保存到数据库或发送邮件 console.log("收到联系表单:", { name, email, message }); return NextResponse.json({ success: true, message: "感谢您的留言!" }); }

养成习惯:每个 POST 接口都要返回明确的状态码和提示信息,否则前端不知道发生了什么。

用 AI 创建 API

Prompt 模板

帮我在 Next.js 项目中创建一个 API,功能是: 接口路径:/api/subscribe 请求方法:POST 接收参数: - email (必填) - name (可选) 功能: 1. 验证邮箱格式 2. 检查邮箱是否已存在 3. 保存到数据库(暂时可以打印到控制台) 4. 返回成功或失败信息 请创建完整的代码,包含错误处理。

拿到代码后,亲自发一两次请求验证逻辑,顺便让 AI 帮忙写几个常见失败场景的单元测试或伪代码,后面调试会轻松很多。

Last updated on