文章目录一、Nitro 是什么二、目录结构三、API 路由动态路由请求方法四、请求处理获取请求信息设置响应五、中间件六、存储抽象七、数据库集成八、计划任务九、缓存控制响应缓存缓存失效十、错误处理总结个人网站Nuxt 3 以后服务端能力大幅提升这要归功于 Nitro 引擎。它不只是个构建工具而是一个完整的服务端框架——支持 API 路由、中间件、存储抽象、多种部署目标……今天深入了解 Nitro。一、Nitro 是什么Nitro 是 Nuxt 的服务端引擎负责服务端渲染执行 Vue 组件的 SSRAPI 路由处理/api/*请求中间件请求拦截和处理存储抽象统一的存储接口构建产物生成可部署的服务器代码简单说Nuxt 前端 Nitro 后端 全栈应用二、目录结构Nitro 相关目录server/ ├── api/ # API 路由 │ ├── hello.ts # /api/hello │ └── users/ │ └── [id].ts # /api/users/:id ├── routes/ # 服务端路由 │ └── sitemap.xml.ts # /sitemap.xml ├── middleware/ # 服务端中间件 │ └── auth.ts ├── plugins/ # Nitro 插件 │ └── db.ts └── utils/ # 服务端工具函数 └── format.ts三、API 路由创建 API 接口非常简单// server/api/hello.tsexportdefaultdefineEventHandler((){return{message:Hello World}})访问/api/hello返回{message:Hello World}动态路由// server/api/articles/[id].tsexportdefaultdefineEventHandler((event){constidgetRouterParam(event,id)return{id,title:文章${id},content:...}})访问/api/articles/123{id:123,title:文章 123,content:...}请求方法// server/api/articles.tsexportdefaultdefineEventHandler(async(event){constmethodgetMethod(event)switch(method){caseGET:returngetArticles()casePOST:constbodyawaitreadBody(event)returncreateArticle(body)casePUT:constupdateDataawaitreadBody(event)returnupdateArticle(updateData)caseDELETE:returndeleteArticle()}})更优雅的方式是拆分文件server/api/articles/ ├── index.get.ts # GET /api/articles ├── index.post.ts # POST /api/articles └── [id]/ ├── get.ts # GET /api/articles/:id ├── put.ts # PUT /api/articles/:id └── delete.ts # DELETE /api/articles/:id// server/api/articles/index.get.tsexportdefaultdefineEventHandler((){returngetArticles()})// server/api/articles/index.post.tsexportdefaultdefineEventHandler(async(event){constbodyawaitreadBody(event)returncreateArticle(body)})四、请求处理获取请求信息exportdefaultdefineEventHandler((event){// 请求方法constmethodgetMethod(event)// 请求 URLconsturlgetRequestURL(event)// 请求头constheadersgetHeaders(event)constauthgetHeader(event,authorization)// 查询参数constquerygetQuery(event)// CookieconstcookiesparseCookies(event)consttokengetCookie(event,token)// 请求体constbodyawaitreadBody(event)// 客户端 IPconstipgetRequestIP(event)return{method,url,query}})设置响应exportdefaultdefineEventHandler((event){// 设置状态码setResponseStatus(event,201)// 设置响应头setResponseHeaders(event,{X-Custom-Header:value})// 设置 CookiesetCookie(event,token,xxx,{httpOnly:true,maxAge:60*60*24*7})// 删除 CookiedeleteCookie(event,token)// 重定向returnsendRedirect(event,/login)// 返回 JSONreturn{success:true}})五、中间件服务端中间件会拦截所有请求// server/middleware/auth.tsexportdefaultdefineEventHandler((event){consturlgetRequestURL(event)// 只拦截需要认证的路由if(url.pathname.startsWith(/api/protected)){consttokengetHeader(event,authorization)if(!token){throwcreateError({statusCode:401,message:Unauthorized})}// 验证 tokenconstuserverifyToken(token)event.context.useruser}})六、存储抽象Nitro 提供统一的存储接口支持多种后端// server/api/views.tsexportdefaultdefineEventHandler(async(event){conststorageuseStorage()// 读取constviewsawaitstorage.getItem(views)||0// 写入awaitstorage.setItem(views,views1)return{views}})配置存储后端// nuxt.config.tsexportdefaultdefineNuxtConfig({nitro:{storage:{// 内存存储开发环境cache:{driver:memory},// Redis生产环境redis:{driver:redis,url:redis://localhost:6379},// 文件系统data:{driver:fs,base:./data}}}})使用指定存储// 使用 redis 存储conststorageuseStorage(redis)awaitstorage.setItem(user:1,{name:Alice})// 使用文件存储constfsStorageuseStorage(data)awaitfsStorage.setItem(config.json,{theme:dark})七、数据库集成以 Prisma 为例pnpmaddprisma prisma/client npx prisma init// prisma/schema.prisma model Article { id Int id default(autoincrement()) title String content String createdAt DateTime default(now()) }// server/utils/db.tsimport{PrismaClient}fromprisma/clientconstprismanewPrismaClient()exportconstusePrisma()prisma// server/api/articles/index.get.tsexportdefaultdefineEventHandler(async(){constprismausePrisma()returnprisma.article.findMany()})八、计划任务Nitro 支持定时任务// server/tasks/cleanup.tsexportdefaultdefineTask({name:cleanup:expired-sessions,run:async(){conststorageuseStorage()constsessionsawaitstorage.getKeys(session:)for(constkeyofsessions){constsessionawaitstorage.getItem(key)if(session?.expiresAtDate.now()){awaitstorage.removeItem(key)}}return{result:success}}})配置执行间隔// nuxt.config.tsexportdefaultdefineNuxtConfig({nitro:{scheduledTasks:{0 * * * *:cleanup:expired-sessions// 每小时执行}}})九、缓存控制响应缓存// server/api/articles/[id].tsexportdefaultdefineCachedEventHandler(async(event){constidgetRouterParam(event,id)constarticleawaitgetArticle(id)returnarticle},{maxAge:60*60,// 缓存 1 小时swr:true,// 启用 SWRvaries:[Authorization]// 按认证状态分别缓存})缓存失效// 手动清除缓存exportdefaultdefineEventHandler(async(event){constcacheuseStorage(cache)awaitcache.removeItem(api:articles:123)return{cleared:true}})十、错误处理exportdefaultdefineEventHandler((event){constidgetRouterParam(event,id)if(!id){throwcreateError({statusCode:400,message:Missing id parameter})}constarticlegetArticle(id)if(!article){throwcreateError({statusCode:404,message:Article not found})}returnarticle})全局错误处理// server/middleware/error.tsexportdefaultdefineEventHandler((event){event.node.res.on(finish,(){conststatusevent.node.res.statusCodeif(status400){console.error(Error${status}:${getRequestURL(event)})}})})总结Nitro 核心能力功能用途API 路由创建后端接口中间件请求拦截存储抽象统一存储接口缓存提升性能计划任务定时执行多部署目标部署到任意平台有了 NitroNuxt 不只是前端框架而是全栈框架。下一篇聊聊 Server Routes 的实战应用。相关文章入门篇三Nuxt4组件自动导入写代码少敲一半字入门篇二Nuxt 4路由自动生成告别手动配置路由的日子延伸阅读nuxt4完整系列持续更新中。。欢迎来逛逛内容有帮助点赞、收藏、关注三连评论区等你