本篇来学习如何使用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就是流行的一种工具。它的官网是:
可以查看相关文档。
本节我们简单使用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进行数据库集成。