
Vista.js 后端三种姿势终极对比API Routes vs 类型化 API vs 中间件该怎么选【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vistaVista.js 是一个以 React Server Components 为核心的全栈框架它的后端能力由三种机制组成API Routes文件即接口、类型化 APITyped API类 tRPC 的端到端类型安全调用和中间件全局请求守卫。本文带你快速搞清楚三者的定位、适用场景和选型方法新手也能一眼看懂。一图看懂三种姿势各自负责什么姿势核心定位典型场景一句话总结 API Routes标准 HTTP 接口对外开放接口、REST 调用「文件即路由」零心智负担⚡ 类型化 APITyped API端到端类型安全的内部调用服务端组件调用业务逻辑「不写接口文档类型即契约」️ 中间件Middleware全局请求拦截与防护鉴权、CORS、限流、安全头「在门口把关卡好」它们不是三选一的关系而是分层协作中间件统一把关 → API Routes 对外服务 → 类型化 API 对内调用。姿势一API Routes —— 一个文件就是一个接口在 Vista.js 中任何名为route.ts的文件都会把所在目录变成一个 HTTP 端点导出哪个方法就支持哪个 HTTP 动词没导出的方法自动返回 405。看一个真实示例——route.ts 只用了不到 20 行就实现了「获取笔记列表 创建笔记」两个接口export async function GET() { return Response.json({ notes: listNotes() }); } export async function POST(request: Request) { const payload await request.json().catch(() ({})); return Response.json({ note: createNote(payload) }, { status: 201 }); }优点约定优于配置新建接口只需新建一个目录直接使用标准Request/ResponseWeb 生态零门槛示例项目 sample-app/app/api/notes/ 就是完整可跑的参考适合需要被前端、第三方或移动端通过标准 HTTP 调用的公开接口。姿势二类型化 API —— 类型即契约如果接口只给自己的前端用API Routes 的「拼 URL 手动解析 JSON」就显得啰嗦了。Vista.js 的类型化 API基于vista/stack让你像调用本地函数一样调用后端逻辑参数和返回值全程享受 TypeScript 类型检查。一条命令即可初始化vista g api-init生成的骨架可以查看 template-typed它由三部分组成入口typed.ts 初始化vstack并挂载路由路由routers/index.ts 用v.router组织业务分组过程procedureprocedures/hello.ts 定义一个query返回类型自动推导在 Server Component 中通过v.createCaller(router, { ctx, env })直接调用 procedure编译期就能发现字段写错、参数缺失根本不需要维护 OpenAPI 文档。适合前端与服务端同仓、追求开发效率和类型安全的内部接口。姿势三中间件 —— 全局请求的「门卫」API Routes 管单个接口中间件管所有请求。Vista.js 内置的中间件能力位于 middleware-runner.ts而安全防护工具集在 middleware-security.ts 中开箱即用securityHeaders—— 一键注入安全响应头cors—— 跨域配置rateLimit—— 接口限流chain—— 把多个中间件串联成管道isForbiddenRequestHeader—— 拦截危险请求头使用vista g auth生成器时Vista.js 还会自动写出一份fail-closed默认拒绝的middleware.ts配合app/api/auth/[...vista]/route.ts完成登录守卫详见 docs/cli.md。适合鉴权校验、防爬限流、统一改写/重定向请求——任何「每个接口都不想重复写」的横切逻辑。该怎么选3 个问题定方案这个接口给外人用吗是 → API Routes标准 HTTP 最通用只给自己的前端用想要类型安全是 → 类型化 API省掉一整套接口文档是鉴权/限流/跨域这类横切逻辑吗是 → 放中间件一次编写全局生效常见组合拳中间件做登录校验 → API Routes 暴露公开 REST 接口 → Server Component 内部走类型化 API 取数据。三者各司其职互不冲突。快速上手清单 新建应用npx create-vista-applatest my-app初始化类型化 APIvista g api-init生成鉴权与中间件vista g auth生产构建输出到.vista/目录请勿提交到仓库总结你的诉求选它标准 HTTP 接口、对外开放API Routes内部调用、类型安全、少写胶水代码类型化 API鉴权、限流、CORS 等全局逻辑中间件搞懂「对外用 API Routes、对内用类型化 API、全局逻辑放中间件」这一句话Vista.js 后端选型就不再纠结。更多约定可参阅 docs/app.md 与 docs/cli.md。【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vista创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考