Nuxt 3 Server Routes 全栈开发实战

# Nuxt 3 Server Routes 全栈开发实战 ## Server Routes 基础 Nuxt 3 内置 Nitro 引擎，支持在 `server/api/` 目录下直接编写后端 API，无需额外搭建 Express 或 Koa。 ```typescript // server/api/users/index.get.ts export default defineEventHandler(async (event) => { const query = getQuery(event) const page = Number(query.page) || 1 const limit = Number(query.limit) || 20 const users = await prisma.user.findMany({ skip: (page - 1) * limit, take: limit, select: { id: true, name: true, avatar: true, createdAt: true } }) return { code: 200, data: users } }) ``` ## 请求验证 ```typescript // server/api/users/index.post.ts import { z } from 'zod' const createUserSchema = z.object({ name: z.string().min(2).max(50), email: z.string().email(), password: z.string().min(8) }) export default defineEventHandler(async (event) => { const body = await readBody(event) const validated = createUserSchema.parse(body) const user = await prisma.user.create({ data: { name: validated.name, email: validated.email, password: await hashPassword(validated.password) } }) return { code: 200, data: { id: user.id, name: user.name } } }) ``` ## Server 中间件 ```typescript // server/middleware/auth.ts export default defineEventHandler(async (event) => { const protectedPaths = ['/api/admin', '/api/user/profile'] const path = getRequestURL(event).pathname if (protectedPaths.some(p => path.startsWith(p))) { const token = getHeader(event, 'authorization')?.replace('Bearer ', '') if (!token) { throw createError({ statusCode: 401, message: 'Unauthorized' }) } event.context.user = await verifyToken(token) } }) ``` ## 与前端无缝配合 ```vue const { data: users, pending } = await useFetch('/api/users', { query: { page: 1, limit: 10 }, transform: (res) => res.data }) ``` Nuxt 3 的全栈能力让前后端共享类型定义，`useFetch` 自动推导返回类型，开发体验非常流畅。