Vista.js 文件式 API Routes 实战10分钟写出支持动态参数的 HTTP 后端【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vistaVista.js 是一款面向 React 的全栈框架它的文件式 API Routes让你只需新建一个route.ts文件就能立即拥有一个支持动态参数的 HTTP 后端接口无需单独启动 Node 服务器。本文带你用 10 分钟时间从零写出一个带增删改查接口的 REST 后端。 什么是 Vista API Routes一句话app/目录下任何一个名叫route.ts的文件就是一个 HTTP 端点。Vista 的路由解析器会扫描整个app/目录把目录结构映射为 URL把文件里导出的函数映射为 HTTP 方法你写的文件暴露的 URLapp/api/notes/route.ts/api/notesapp/api/notes/[id]/route.ts/api/notes/42动态参数app/api/files/[...path]/route.ts/api/files/a/b/c通配段核心规则只有一条每导出一个函数就支持一个 HTTP 方法。导出了GET就能处理查询导出了POST就能处理创建没导出的方法自动返回405 Method Not Allowed。这套扫描逻辑在框架中的实现可以查看 route-handler-registry.ts它保证了构建时扫描和运行时解析使用同一套规则URL 和行为永远不会打架。⚡ 10 分钟快速上手第 1 步创建项目git clone https://gitcode.com/gh_mirrors/vista13/vista npx create-vista-app my-api cd my-api pnpm install pnpm dev开发服务器会在3003端口启动后续改代码即改即生效。第 2 步写出第一个route.ts新建app/api/notes/route.ts整个接口只需要两个函数export async function GET() { return Response.json({ notes: [] }); } export async function POST(request: Request) { const body await request.json(); return Response.json({ note: body }, { status: 201 }); }启动后访问http://localhost:3003/api/notes即可拿到 JSON 响应。没有路由表、没有装饰器、没有中间件注册——文件名就是路由。第 3 步加上动态参数新建app/api/notes/[id]/route.ts方括号目录[id]让 URL 多出一段动态值export async function GET( request: Request, { params }: { params: { id: string } } ) { return Response.json({ id: params.id }); }请求/api/notes/42时params.id的值就是42。动态参数的解析细节由 route-patterns.ts 负责它把目录名转换成:id这样的 URL 模式再匹配请求。想看一个完整的增删改查GET / POST / PATCH / DELETE示例仓库里的 sample-app 已经写好了列表与创建sample-app/app/api/notes/route.ts按 ID 查询、修改、删除sample-app/app/api/notes/[id]/route.ts服务端内存数据源sample-app/app/api/notes/notes-store.ts 动态参数命名速查目录写法匹配的 URLparams中的值[id]/api/notes/42{ id: 42 }[...path]/api/files/a/b/c{ path: [a,b,c] }[[...path]]/api/files可省略数组可为空和普通页面路由app/docs/[...slug]/page.tsx用的是同一套命名约定学会一次前后端通用。️ HTTP 方法与状态码实战要点Vista 的 route handler 支持 7 种标准方法按规范顺序为GET·HEAD·POST·PUT·PATCH·DELETE·OPTIONS写接口时记住三个惯例创建资源返回201Response.json(data, { status: 201 })资源不存在返回404Response.json({ error: Not found }, { status: 404 })删除成功返回204无响应体new Response(null, { status: 204 })这三个状态码在 sample-app 的 sample-app/app/api/notes/[id]/route.ts 中都有标准用法照着抄即可。 为什么安全Handler 只在服务端运行API Routes 的另一个隐藏福利handler 是 server-only 的。你在route.ts里导入的数据库客户端、密钥、内部工具永远不会被打进浏览器端 bundle。像 sample-app 中这样的数据源文件没有任何组件导入它所以它永远不会进入客户端 bundle——真实项目里这里就是接入数据库的地方。引自 notes-store.ts 的源码注释也就是说Vista 的 API Routes 在极简和安全之间没有取舍少写代码的同时天然隔离了敏感逻辑。 下一步走向完整全栈应用API Routes 解决了快速暴露 HTTP 接口的问题如果你的需求升级了Vista 还有两条进阶路径同一仓库内混合使用Typed APIvista/stack用vista g api-init生成类型化路由前后端共享类型Server Component 甚至可以不经过 HTTP 直接调用后端Auth 中间件用vista g auth一键生成登录页、会话守卫和 fail-closed 中间件两者与文件式 API Routes 可以共存详细介绍见官方文档 fullstack-app.md框架层面的全栈约定在 README.md 的 Build a fullstack app 章节。✅ 小结10 分钟里你学会了关键点新建route.ts文件名即路由零配置导出GET/POST等函数一个函数对应一个 HTTP 方法用[id]目录动态参数经context.params传入用Response.json标准状态码201 / 404 / 204服务端隔离数据库与密钥不进浏览器从route.ts到动态参数、再到状态码规范Vista 的文件式 API Routes 用约定替代了配置。现在就去你的app/api/目录下建第一个端点吧 【免费下载链接】vista项目地址: https://gitcode.com/gh_mirrors/vista13/vista创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考