在 Nuxt.js 中设置 API 端点

与 pages 目录类似，Nuxt 服务器使用基于文件的路由来设置 API 端点。也就是说，要在 /server/api/ 目录中创建一个名为 hello.ts 的文件，才能创建路径为 /api/hello 的 API 端点。

预览

下方的组件在 server/api 目录中定义了四个 Nuxt API 端点，它们分别是：

• /api/{id}
• /api/hello/{id}
• /api/hello/?{query_parameters}
• /api/hello/{id}/{name}

同时创建了一个名为 test.vue 的页面，用于向这些测试端点发起请求。

要测试此组件中的端点，请执行以下操作：

• 检查 server/api 目录中的每个文件。
• 检查 pages/test.vue 文件。
• 点击“运行”按钮以启动组件。
• 成功构建 Nuxt 应用程序后，应显示 /api/hello.ts 端点。
• 将端点复制到浏览器地址栏中，并更改动态值以查看结果。例如，测试 /api/{id} 端点时，可在浏览器地址栏中输入 https://ed-5145096084783104.educative.run/api/123。
• 要查看其他端点的结果，请在浏览器中输入此 URL：https://ed-5145096084783104.educative.run/test。

HTTP 方法

如上所述，/api/hello 端点可以接收任意 HTTP 方法（即 GET、POST、PATCH、PUT 和 DELETE）的请求。但若要明确指定端点的 HTTP 方法，可以在文件名中使用如下格式：{ENDPOINT_NAME}.{ENDPOINT_METHOD}.{FILE_EXTENSION}。例如，名为 hello.post.ts 的文件仅处理对 /api/hello 端点的 POST 请求。

动态参数

带有动态参数的端点路由的创建方式与 Nuxt 中动态页面类似，使用方括号 [] 表示。在上述 SPA 示例中，通过在 /server/api/ 目录中创建一个名为 [id].get.ts 的新文件，即可创建一个接受 id 参数的端点。运行组件并在浏览器中访问 https://ed-5145096084783104.educative.run/[id] 地址，应能在端点响应中看到传入的 [id] 参数。

嵌套路由

嵌套路由通过创建对应名称的目录并添加所需端点文件来实现。在上述示例中，通过在 /server/api/hello 目录中创建一个名为 [id] 的文件夹，即可创建一个带有动态参数的端点 /api/hello/:id/:name。在该文件夹中，声明一个名为 [name].get.ts 的文件。

当运行组件并在浏览器中访问 https://ed-5145096084783104.educative.run/[id]/[name] 页面时，应能在端点响应中看到传入的 [id] 和 [name] 参数。

Nuxt API 端点的一些有用方法

Nuxt 提供了一些用于服务端操作的辅助方法，具体如下：

1export default defineEventHandler((event) => {
2  // 获取请求体
3  const body = await readBody(event)
4  // 获取请求方法
5  const method = getMethod(event)
6  // 获取请求查询参数，例如 /?id=1&site_name=google 将返回
7  // {id: "1", site_name: "google"}
8  const query = getQuery(event)
9  // 获取请求头
10  const headers = getHeaders(event)
11  // 获取特定请求头
12  const header = getHeader(event, "HEADER_NAME")
13  // 获取请求中的 cookies
14  const cookies = parseCookies(event)
15  // 获取特定 cookie
16  const cookie = getCookie(event, "COOKIE_NAME")
17  // 设置特定 cookie 的值
18  setCookie(event, "COOKIE_NAME", "COOKIE_VALUE")
19  // 获取请求参数
20  const params = getRouterParams(event)
21  // 创建并抛出服务端错误
22  throw createError({
23    statusCode: 404,
24    statusMessage: 'Page Not Found',
25    data: {}
26  })
27})

• readBody：这是一个异步方法，特别适用于 PUT、POST 和 PATCH 请求，用于从请求中提取负载数据。代码中已展示其用法。

• getMethod：顾名思义，该方法返回本次请求所使用的 HTTP 方法，尤其适用于未在文件名中指定具体方法的端点。

• getQuery：顾名思义，该方法解析请求 URL 中的查询字符串，并返回包含所有查询参数值的对象。

• getHeaders：该方法以对象形式返回所有请求头及其对应的值。

• getHeader：该方法返回指定请求头及其值。

• parseCookies：该方法以对象形式返回所有请求中的 cookies 及其对应值。

• getCookie：顾名思义，该方法返回指定的 cookie。

• setCookie：该方法用于设置某个 cookie 的值。

• getRouterParams：该方法返回在 API 端点调用中传递的参数。

• createError：在 Nuxt API 端点中，成功响应需要返回一个对象；而失败响应则需要抛出一个错误。该方法可用于定义自定义错误响应，支持设置消息、数据和状态码。

练习

下方的组件包含了上述调查应用所需的所有端点定义。请检查每个端点的实现，以理解其工作原理。

请求插件

除了 API 端点外，上述组件还为应用中使用的每个端点提供了插件，用于将客户端与服务器之间的交互抽象为辅助方法。这有助于在多个组件之间复用逻辑，从而简化组件代码。

总结

在本节中，我们讨论了不同类型的 API 端点路由及其在 Nuxt 中的定义方式。我们识别了调查应用所需的端点，并在此基础上为项目开发了每个端点的模板以及用于在应用中发起请求的插件。