尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

10 分钟接上 SaaS 计费与文件上传 API:open-saas 从 clone 到第一个成功请求

10 分钟接上 SaaS 计费与文件上传 API:open-saas 从 clone 到第一个成功请求 10 分钟接上 SaaS 计费与文件上传 APIopen-saas 从 clone 到第一个成功请求【免费下载链接】open-saasA 100% free modern JS SaaS boilerplate (React, NodeJS, Prisma). Full-featured: Auth (email, google, github, slack, MS), Email sending, Background jobs, Landing page, Payments (Stripe, Polar.sh), Shadcn UI, S3 file upload. AI-ready with tailored AGENTS.md, skills, and Claude Code plugin. One cmd deploy. Powered by Wasp full-stack framework.项目地址: https://gitcode.com/GitHub_Trending/op/open-saas做 SaaS 产品时最耗时的往往不是业务逻辑而是登录、订阅计费、文件上传这三件每个产品都绕不开的事。open-saas 是基于 Wasp Prisma 的免费开源 SaaS boilerplate把这三类 RESTful API 连同前端调用层一起打包好了你只负责填业务逻辑。 open-saas 和别的 boilerplate 差在哪多数 boilerplate 是前端项目 后端项目两个包接口联调靠自觉。open-saas 是单包前端 React shadcn/ui后端 Node.js Prisma统一由 Wasp 框架管理。每个模块用一个.wasp.ts文件声明哪些是页面、哪些是 query、哪些是 API 路由框架据此生成前端调用——你在 React 里写api.user.getPaginatedUsers()即可不用写一行 fetch/axios参数和返回类型直接来自服务端函数签名。图中展示了 open-saas v2 运行后的应用页面落地页与产品界面模板开箱即用它替你省下的是前后端接口契约的对齐成本改了返回字段前端类型立刻报错不用等联调才发现。 从 clone 到第一个成功响应git clone https://gitcode.com/GitHub_Trending/op/open-saas cd open-saas/template/app npm install wasp start db # 保持运行负责拉起 Postgres在根目录准备好.env.client和.env.server两个开发环境文件后跑wasp db migrate-dev首次或改过 schema 都要跑再wasp start打开localhost:3000/pricing就能看到计划页。注册一个测试账号你就完成了第一次成功的 API 写请求——用户记录已经按 Prisma 模型落库这些命令在 template/app/README.md 里都有说明。此时就可以把 plans.ts 里的计划名和价格改成你自己产品的了。 支付 API3 种处理器换 1 行代码以用户在定价页点订阅为例看这条链路。前端只需api.payment.generateCheckoutSession(pro)服务端这次调用做了三件事未登录返回 401账号没有 email 返回 403用 Zod 校验入参必须是PaymentPlanIdhobby / pro / credits10非法值直接 400通过 Stripe 客户端创建结账会话返回sessionUrl供前端跳转。Stripe、Lemon Squeezy、Polar 三种处理器实现的是同一个PaymentProcessor接口createCheckoutSession、fetchCustomerPortalUrl、webhook、fetchTotalRevenue切换只需改 paymentProcessor.ts 里一行导出再把不用那个处理器的目录删掉。支付回调是固定路由payment.wasp.ts里声明的POST /payments-webhook成功后在 webhook 里更新用户的subscriptionStatus。图中展示了在 Stripe 控制台创建测试产品并记录 price ID 的操作ID 需填入 PAYMENTS__PLAN_ID 环境变量* 文件上传 API预签名 URL服务端不碰字节上传链路拆成三步全部在 file-upload/operations.ts 里createFileUploadUrl(fileType, fileName)返回 S3 预签名上传地址浏览器直接把文件 PUT 到 S3流量不经过你的服务器addFileToDb(s3Key, ...)落库但落库前先checkFileExistsInS3查不到返回 404防止库里有记录、S3 没文件的孤儿数据。文件类型白名单和 5MB 上限集中写在validation.ts加一种类型就是加一个字符串。删除则反过来先删数据库记录再删 S3 对象S3 删失败只记录孤儿 s3Key不阻断主流程。图中展示了接入文件上传前需要配置的 S3 存储桶权限设置限定读写角色⚠️ 3 个必踩的坑与本地调试办法三个高频坑改了 schema 忘了迁移schema.prisma 加字段后不跑wasp db migrate-dev查询时报错且信息经常不指向根因先跑迁移再排查其他。支付环境变量是 Zod 强校验PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID、PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID、PAYMENTS_CREDITS_10_PLAN_ID缺一个服务端直接报 is required看着像应用 bug其实是没配 price ID。没有 email 的用户付不了款只用用户名密码登录的账号generateCheckoutSession会 403因为 Stripe 建客户必须有 email要开支付就换提供 email 的认证方式。本地调试 webhook开发环境收不到支付回调用 Stripe CLI 的stripe listen把事件转发到本地服务每次支付流转都能在终端实时看到事件名和 payload比上线后出事故再倒查快得多。图中展示了运行 stripe listen 后本地终端实时接收 webhook 事件的输出效果下一步改.env.server里的三个计划 ID在浏览器里跑通第一次完整结账然后在这个 API 层上加你的第一个业务 operation。【免费下载链接】open-saasA 100% free modern JS SaaS boilerplate (React, NodeJS, Prisma). Full-featured: Auth (email, google, github, slack, MS), Email sending, Background jobs, Landing page, Payments (Stripe, Polar.sh), Shadcn UI, S3 file upload. AI-ready with tailored AGENTS.md, skills, and Claude Code plugin. One cmd deploy. Powered by Wasp full-stack framework.项目地址: https://gitcode.com/GitHub_Trending/op/open-saas创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表