使用Nuxt3构建强大的API接口：实现前后端数据交互

在 Nuxt 3 中，defineEventHandler 是用于定义服务器端事件处理器的函数，它提供了一个 event 对象，通过这个对象你可以访问请求（request）和响应（response）相关的信息。这个 event 对象包含了许多有用的字段，可以帮助你获取客户端的信息。

常用的 event 字段

event.req: 这是一个 Node.js HTTP 请求对象。它包含了客户端发送的请求信息，如头信息、请求方法等。
event.res: 这是一个 Node.js HTTP 响应对象。你可以通过它来设置响应头、发送响应等。
event.context: 提供了当前请求的上下文信息，如参数、查询字符串等。

javascript 复制代码

// server/api/user.js
import { defineEventHandler } from 'h3'

export default defineEventHandler((event) => {
  // 获取请求方法
  const method = event.req.method;

  // 获取请求头
  const headers = event.req.headers;

  // 获取查询参数
  const query = event.context.query;

  // 获取路由参数
  const params = event.context.params;

  // 获取用户代理
  const userAgent = headers['user-agent'];

  // 返回一些客户端信息
  return {
    method,
    query,
    params,
    userAgent
  };
});

event.req.method: 获取 HTTP 请求的方法（如 GET、POST）。
event.req.headers: 获取请求的头信息。这可以包括用户代理、接受的内容类型等。
event.context.query : 获取 URL 查询参数。例如，对于请求 /api/user?id=123 ，query 将是 { id: '123' }。
event.context.params : 获取路由参数。这对于动态路由非常有用，例如 /api/user/:id。
headers['user-agent']: 从请求头中获取用户代理字符串，这可以告诉你发出请求的浏览器或其他客户端的类型。

:::info 每个文件应该导出一个使用defineEventHandler()或eventHandler() （别名）定义的默认函数。处理程序可以直接返回JSON数据、Promise，或使用**event.node.res.end()**发送响应。 :::

javascript 复制代码

export default defineEventHandler((event) => {
  return {
    hello: 'world'
  }
})

页面访问该接口

javascript 复制代码

const { data } = await useFetch('/api/user')

服务器路由

一般将接口写在 server/api/ 目录下，Nuxt会自动导入，不需要自己显式导入api文件，直接访问接口 /api/xxx. 如果要添加没有 /api前缀开头的api，可以将接口文件放在/server/routes/目录中。例如

javascript 复制代码

-| server/
  ---| api/
  -----| hello.ts      # /api/hello
---| routes/
  -----| getUser.ts    # /getUser

javascript 复制代码

useFetch('/api/hello')

useFetch('/getUser')

服务器中间件

Nuxt会自动读取**~/server/middleware**目录中的任何文件，以创建项目的服务器中间件。中间件处理程序将在任何其他服务器路由之前在每个请求上运行，以添加或检查标头、记录请求或扩展事件的请求对象。

javascript 复制代码

export default defineEventHandler((event) => {
  console.log('New request: ' + getRequestURL(event))
})

服务器插件

Nuxt会自动读取**~/server/plugins**目录中的任何文件，并将它们注册为Nitro插件。这允许扩展Nitro的运行时行为并钩入生命周期事件。

javascript 复制代码

export default defineNitroPlugin((nitroApp) => {
  console.log('Nitro plugin', nitroApp)
})

接口常用使用

路由参数

在文件名中使用方括号内的动态参数，如**/api/hello/[name].ts**，并通过event.context.params 访问。 获取路由参数：

**getRouterParam(event, 'name')**
**event.context.params?.name**

javascript 复制代码

export default  defineEventHandler((event) => {
    const name = getRouterParam(event, 'name')
    console.log(name)
    console.log(`获取路由参数${event.context.params?.name}`)
})

调用api **/api/hello/nuxt**

匹配HTTP 方法

通过 **index.[method].ts**命名方式来以不同的方式组织代码,

javascript 复制代码

server/api/test.get.ts
server/api/test.post.ts
server/api/test.put.ts
server/api/test.delete.ts

javascript 复制代码

export default defineEventHandler((event) => {
  // 处理`api/test `端点的POST请求
})

获取请求体 post

使用 **readBody(event)** 来获取 **post** 请求体

javascript 复制代码

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  return { body }
})

调用api，传递 post 参数

javascript 复制代码

<script setup>
async function submit() {
  const { body } = await $fetch('/api/submit', {
    method: 'post',
    body: { test: 123 }
  })
}
</script>

获取查询参数

/api/query?foo=bar&baz=qux **通过 ****getQuery(event)**获取查询参数

javascript 复制代码

export default defineEventHandler((event) => {
  const query = getQuery(event)

  return { a: query.foo, b: query.baz }
})

错误处理自定义返回 code

使用createError抛出自定义异常，返回指定错误信息

javascript 复制代码

export default defineEventHandler((event) => {
  const id = parseInt(event.context.params.id) as number

  if (!Number.isInteger(id)) {
    throw createError({
      statusCode: 400,
      statusMessage: 'ID should be an integer',
    })
  }
  return 'All good'
})

指定返回状态码

通过 ** setResponseStatus(event, 202)** 指定返回状态码

javascript 复制代码

export default defineEventHandler((event) => {
  setResponseStatus(event, 202)
})

运行时配置

Nuxt3 提供了灵活的运行时配置方式,可以在应用运行过程中动态修改配置。 Nuxt3 的运行时配置主要通过 useRuntimeConfig() 方法来实现。useRuntimeConfig() 方法接收一个回调函数,在回调函数中可以通过返回一个对象来指定运行时配置。

第一步：在 **Nuxt.config.ts**中配置运行时环境和属性

javascript 复制代码

export default defineNuxtConfig({
  runtimeConfig: {
    // 公共运行时配置
    public: {
      baseURL: 'http://localhost:3000'  
    }
  }  
})

第二步：组件中使用运行时配置

vue 复制代码

<script setup>
		// 1. 引入 useRuntimeConfig 
    const { public } = useRuntimeConfig()

    // 2. 读取运行时配置 
    const baseURL = public.baseURL
</script>

第三步：更改运行时配置

vue 复制代码

<script setup>
	// 1. 获取 nuxtApp 实例
  const nuxtApp = useNuxtApp() 

  // 2. 修改运行时配置
  nuxtApp.$config.public.baseURL = 'http://localhost:8080'
</script>

需要首先获取 nuxtApp 实例,然后通过 $config来更新了运行时配置 public.baseURL。更新后,App 组件读取的运行时配置也会实时更新。

通过 parseCookies(event)获取 cookie 值

vue 复制代码

export default defineEventHandler((event) => {
  const cookies = parseCookies(event)

  return { cookies }
})

使用Nuxt3构建强大的API接口：实现前后端数据交互

常用的 event 字段

服务器路由

服务器中间件

服务器插件

接口常用使用

路由参数

匹配HTTP 方法

获取请求体 post

获取查询参数

错误处理 自定义返回 code

指定返回 状态码

运行时配置

获取请求 cookie

错误处理自定义返回 code

指定返回状态码