掌握Next.js(四)– 构建API

本篇来学习如何使用Next.js构建API。

我们将学习构建获取对象、创建对象、更新对象、删除对象的API,并学习用Zod进行数据验证。


获取对象集合

前面我们介绍过使用page.tsx来实现向用户展示的组件,处理HTTP请求的操作则用 route.tsx。

根据传统,API一般使用 /api的url前缀,我们创建名为api的文件夹。再创建users目录,并在其下新建route.tsx文件。

实际项目中,数据从数据库获取,然后转成对象及json返回给用户。这里暂时用硬编码的方式,数据库获取相关内容后续我们会专门介绍。

在route.tsx中,我们创建了GET函数,这个要大写,代表HTTP的get方法,使用NextResponse.json方法返回json数据。json方法参数可以是任何对象,比如字符串 “hello” 或 用户对象都是可以的。

访问 /api/users , 我们会获取json格式的原始数据。

本示例中,GET函数的参数 request 没用到,是否可以去除?

可以的。

如果去除request参数,Next.js会将响应结果放至缓存里,下次前端访问该API时,直接从缓存里取数据。为了防止缓存,这里我们保持提供request参数。


获取单个对象

获取单个对象比如单个用户的url一般为 api/users/1,显然是动态路径,按之前学过的,要使用加方括号的文件夹,再在其下创建 route.tsx。

我们在 api/users目录下新建 [id] 目录,再创建route.tsx。获取单个对象需要给GET函数提供第2个参数即对象的id。实际项目的数据通常从数据库获取,这里也暂时硬编码,并假定只有10个用户,参数id超过10就回复找不到用户。

测试访问 /api/users/11,返回404响应。


创建对象

创建对象在HTTP中使用的方法是POST,我们要在api/users/route.tsx添加POST函数。

POST需要传递数据(一般json格式)给服务端。服务器首先检数据是否有效,无效的话,返回400;有效的话进行创建,然后返回创建的对象,状态为201。

在实际项目中,创建对象的id一般由服务端数据库自动生成,我们来模拟这个过程。

测试一下。这个在浏览器中没法检验,使用postman测试。


更新对象

HTTP更新对象的方法有两个:PUT 和 PATCH。很多人不区分使用。不过严格来说,PUT是更新整个对象,而PATCH是更新对象的一个或多个属性。

更新对象的逻辑框架是这样的:

  • 获取请求体,验证请求体结构和数据,如果有错误,返回400。
  • 在数据库等后端查找要更新的对象,如果找不到,返回404。
  • 更新对象,并返回更新后的对象。

根据这个框架,我们来编码。

更新是针对具体的对象,我们要添加的代码在:

/api/users/[id]/route.tsx

也在postman检验下效果。


删除对象

HTTP删除对象的方法是DELETE。

删除对象的逻辑一般是这样:

  • 在数据库等后端查找要删除的对象,如果找不到,返回404。
  • 删除对象,并返回空 或者 已删除的对象。这个返回无所谓正确或错误,具体看项目的需要。

删除也是针对具体的对象。我们在 /api/users/[id]/route.tsx里添加DELETE函数。


使用 Zod 验证请求

在POST、PUT等方法时,我们需要对获取的请求体进行验证。我们的示例比较简单,用 if 语句判断问题不大,而实际项目中,请求体数据往往非常复杂,如果都按这种方法判断,会非常复杂,会有一大堆if语句非常丑陋。

我们需要验证的工具。zod就是流行的一种工具。它的官网是:

https://zod.dev/

可以查看相关文档。

本节我们简单使用zod验证数据。

先安装 zod:

npm install zod

在 /api/users 目录下新建 schema.ts文件。

使用schema验证POST请求体数据。代替之前的手动判断语句。

用Postman验证下效果。

同样的,我们也将PUT的数据也按此方式验证。


练习:创建products的API

product的属性有id, name, price。创建方法很简单与users几乎一致。

直接给出代码。

app/api/products/schema.ts

app/products/route.tsx

其他的API,如GET单个对象,PUT和DELETE 非常简单就不列了。

get “/api/products” 载图如下。


小结

本文我们学习了如何使用Next.js构建获取对象、创建对象、更新对象、删除对象的API,并学习了如何用Zod进行数据验证。

下一篇介绍使用Prisma进行数据库集成。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注