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