使用路由处理器构建 API 端点

显示解决方案

让我们详细回顾一下解决方案。

1. app/api/products/route.js 文件

这是 /api/products 集合端点的路由处理程序。

管理产品集合

1// app/api/products/route.js
2import { products } from './data';
3import { NextResponse } from 'next/server';
4
5export async function GET() {
6  return NextResponse.json(products);
7}
8
9export async function POST(request) {
10  const { name, price } = await request.json();
11  const newProduct = { id: products.length + 1, name, price };
12  products.push(newProduct);
13  return NextResponse.json(newProduct, { status: 201 });
14}

说明：

• 第 5–7 行： GET 处理程序返回完整的 products 数组。

• 第 9 行： POST 处理程序从请求体中解构出 name 和 price。

• 第 11–12 行： 创建一个新产品，分配新 ID 并添加到 products 数组中。

• 第 13 行： 返回新创建的产品，并附带 201 状态码。

2. app/api/products/[id]/route.js 文件

以下处理程序用于根据 ID 管理特定产品的请求。

管理单个产品

1// app/api/products/[id]/route.js
2import { products } from '../data';
3import { NextResponse } from 'next/server';
4
5export async function GET(request, { params }) {
6  const { id } = await params;
7  const product = await products.find(p => p.id === parseInt(id));
8  if (!product) {
9    return NextResponse.json({ error: 'Product not found' }, { status: 404 });
10  }
11  return NextResponse.json(product);
12}
13
14export async function PUT(request, { params }) {
15  const { id } = await params;
16  const product = await products.find(p => p.id === parseInt(id));
17  if (!product) {
18    return NextResponse.json({ error: 'Product not found' }, { status: 404 });
19  }
20  const { name, price } = await request.json();
21  if (name) product.name = name;
22  if (price) product.price = price;
23  return NextResponse.json(product);
24}
25
26export async function DELETE(request, { params }) {
27  const { id } = await params;
28  const productIndex = await products.findIndex(p => p.id === parseInt(id));
29  if (productIndex === -1) {
30    return NextResponse.json({ error: 'Product not found' }, { status: 404 });
31  }
32  products.splice(productIndex, 1);
33  return new Response(null, { status: 204 });
34}

说明：

• 第 5–7 行： GET 处理程序从 URL params 中根据 id 查找产品。

• 第 8–10 行： 如果未找到产品，则返回 404 错误。

• 第 14–16 行： PUT 处理程序查找需要更新的产品。

• 第 20–22 行： 如果请求体中提供了 name 和 price，则更新对应属性。

• 第 28 行： DELETE 处理程序查找要删除的产品的索引。

• 第 32 行： 使用 splice 从数组中移除该产品。

• 第 33 行： 返回空响应并附带 204 状态码，表示操作成功。