如何使用Windsurf构建后端？

windsurf ide 允许您通过 mcp 协议将具有活动 mcp 服务器的外部工具集成到其中。 这使您可以在不离开 ide 的情况下使用提示执行任务并从这些来源读取数据。 在本教程中，您将学习如何使用 windsurf ide 通过 back4app mcp 服务器构建预约调度程序的后端和用户界面 (ui)，并将其部署在 back4app 容器上。 关键要点 您可以使用 此链接 查看本教程中构建的实时个人开支跟踪器。 学习如何使用 windsurf 和 back4app mcp 服务器在 back4app 上构建后端。 探索 back4app 中类之间的关系是如何建模的。 探索 back4app 如何使用其内置类实现身份验证和基于角色的授权。 使用 back4app 容器轻松几次点击即可部署您的应用。 先决条件 要遵循本教程，您需要具备以下条件： 一个 back4app 账户。您可以 免费注册 如果您还没有账户。 在您的系统上安装 windsurf ide。 对后端开发概念有基本的了解。 项目概述：预约调度器 在本教程中，您将构建一个支持两种角色的预约调度器： 提供者 注册他们提供的服务和 客户 预订这些服务。 提供者定义每项服务的名称、持续时间和价格。客户然后浏览可用服务，选择日期和时间，并确认预订。 一旦预订，预约将出现在提供者和客户的仪表板中，您可以根据需要更新或取消状态。 该项目将有4个类： 用户 , 角色 , 预约 , 和 服务 用户和角色类是back4app内置类的一部分，将用于身份验证和访问控制。 服务类将定义每个产品的详细信息，包括名称、持续时间和价格，以便提供者可以列出他们提供的服务，客户可以浏览这些服务。 预约类将把客户和提供者与特定的服务链接在一起，包含特定的开始时间和结束时间字段，跟踪其状态（“待定”、“已确认”、“已取消”），并使用对象级acl，以便只有预订的客户和其提供者可以读取或修改每个预约。 这里有一个实体关系图，帮助你可视化架构： 现在你对将要构建的内容有了大致的了解，在下一部分中，你将设置back4app mcp服务器与windsurf，并开始编写提示，以创建本节中描述的应用程序。 连接back4app和windsurf 观看下面的视频，了解如何将windsurf连接到back4app的教程。 要将 back4app mcp 服务器连接到 windsurf，首先，您需要一个 back4app 账户密钥。 要检索它，请登录您的 back4app 账户，在用户仪表板上，点击导航栏上的下拉菜单并选择 账户密钥 。 在 账户密钥 页面上，为您的账户密钥命名，复制生成的密钥，并安全存储。 接下来，打开 windsurf 并点击 cascade 助手上的锤子图标。这将打开一个下拉菜单，点击配置按钮。 配置按钮将带您到管理插件页面。 点击“查看原始配置”按钮，并将下面的配置对象粘贴到文件中： { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } 将 \<account key> 替换为您的账户密钥，保存文件并刷新 windsurf。如果您在 windows 机器上遵循本教程，请将命令键的值更改为 npx cmd。 使用 windsurf 创建后端 要使用 windsurf 创建预约调度程序的后端，首先，您必须向 cascade 助手提供一个提示，告诉它创建一个您指定名称的新应用程序，以及所需的数据库表。 您可以使用以下提示为预约调度程序实现这一点： create a new backend named “appointment scheduler” by defining two new classes and a server side hook first, add a service class with fields for name (string), durationminutes (number) and price (number) then add an appointment class that includes pointers named client and provider (both to the built in user class), a pointer named service to the service class, starttime and endtime (date), and a status field constrained to “pending,” “confirmed,” or “canceled ” finally, write a beforesave cloud code trigger on appointment that queries for any existing appointment with the same provider whose time window overlaps the incoming starttime/endtime and rejects the save if it finds a conflict 上述提示告诉 windsurf 通过创建两个新数据模型：服务和预约，及其适当的关系和字段，来搭建一个“预约调度程序”后端。 它还在预约上实现了一个服务器端的 beforesave 钩子，防止同一提供者的任何重叠预订。 windsurf 记录它所做的所有请求，以便完成任务，一旦执行完成，它将提供任务的摘要 现在应用程序和数据库类已经创建，接下来，您可以为后端实现身份验证。 在后端实现身份验证和授权 对于这个应用程序，您需要确保用户可以安全登录，并且只能做他们应该能够做的事情。 例如，只有注册为提供者的用户才能列出服务，只有列出服务的提供者才能更新该服务。 您可以使用下面的提示为预约调度程序实现这一点： update the “appointment scheduler” backend to enable user authentication and role based access control configure the built in user class to require email/password sign‐up and login ensure the built in role model includes “provider” and “client” roles, and assign each user to one of these roles on registration or via a cloud function then set class level permissions so that only authenticated users may read and write appointment objects, but only providers can create, update, or delete service entries finally, on each appointment object, apply an acl in a beforesave hook that grants read/write permission only to the booking client and the designated provider, and verify in the hook that request user has the appropriate role before allowing the operation 上面的提示指示 windsurf 启用电子邮件/密码注册和登录，定义并分配“提供者”和“客户”角色，强制执行类级权限，以便只有提供者管理服务，而经过身份验证的用户处理预约，并在预约上应用对象 acl 以及 beforesave 钩子，仅授予预订客户和提供者访问权限，并验证他们的角色。 现在您已经设置了身份验证和基于角色的授权，您可以实现应用程序所需的 crud 端点。 为服务和预约实现crud功能 您的应用需要允许经过身份验证的用户创建服务（提供者）并在已创建的服务上预约（客户）。用户还需要能够编辑、删除和查看服务和预约。 您可以使用下面的提示为预约调度程序实现这一点： add cloud code functions to our “appointment scheduler” backend that expose the necessary crud endpoints for the service class, implement createservice, listservices, updateservice, and deleteservice functions that check request user’s role and allow only providers to run them for the appointment class, implement createappointment, listappointments, updateappointmentstatus, and deleteappointment functions that ensure the caller is authenticated and only operates on records where they are the client or the provider in each function, use request user to enforce authentication, verify the user’s role (client or provider), apply the appropriate acl checks, and return the created, fetched, updated, or deleted record in the response 此提示指示windsurf为服务和预约类生成云代码端点，实施创建、读取、更新和删除操作，同时强制身份验证和基于角色的检查，以便只有提供者可以管理服务，只有预约客户或指定提供者可以管理他们的预约。 生成您的前端 您可以利用windsurf从back4app创建后端所获得的上下文，要求它创建一个与您的应用的架构和要求相匹配的前端。 您可以使用下面的提示为预约调度程序实现这一点： generate a minimal frontend that matches the schema and implements all the functionality of the appointment scheduler on my back4app account and connect the frontend to the backend using the javascript parse sdk use vite and react 使用上述提示或类似的提示，windsurf将生成一个与您的后端架构匹配的前端，并将其连接到您的后端。项目文件存储在 /\<user>/cascadeprojects/\<app name> cd 进入应用并使用readme中提供的说明运行它，并进行您想要的任何调整。现在，您的项目已完成。在下一部分中，您将其部署在back4app容器上。 在 back4app 容器上部署您的应用程序 back4app 容器允许您使用 dockerfile 和 github 存储库轻松部署您的应用程序。 要在 back4app 容器上部署您的应用程序，您需要首先在您的存储库中包含一个 dockerfile。您可以使用下面的提示请求 claude 生成一个： generate a docker file for the ui of my appointment scheduler 或者您可以使用下面提供的 dockerfile： from node 18 alpine as builder workdir /app \# install pnpm run npm install g pnpm \# copy only package files first for better caching copy package json pnpm lock yaml / \# install dependencies (including dev for build) run pnpm install frozen lockfile strict peer dependencies=false \# copy the rest of the app copy \# build the next js app with standalone output run pnpm build \# production image from node 18 alpine as runner workdir /app \# copy standalone output and required files copy from=builder /app/ next/standalone / copy from=builder /app/ next/static / next/static copy from=builder /app/public /public \# optionally copy env or other config files \# copy env local env local expose 3000 \# limit node js memory usage for low resource environments env node options=" max old space size=192" cmd \["node", "server js"] 在添加 dockerfile 并将其推送到 github 后，导航到您的 back4app 应用程序仪表板，点击 仪表板 下拉菜单，选择 web 部署平台 选项。 在部署页面，点击“部署 web 应用”按钮，并授予 back4app 访问您要部署的存储库的权限。 选择您希望部署的应用程序，填写部署详细信息，然后点击 部署 按钮。 点击按钮开始部署过程，完成后您将获得应用程序的实时 url。 您可以使用 此链接 查看本教程中构建的实时个人开支跟踪器。 结论 在本文中，您使用 back4app mcp 服务器和 windsurf 构建了一个预约调度程序，然后通过 back4app containers 部署它。 这展示了 back4app 的完整工具套件，让您能够以最小的开销从构思到发布。 作为下一步，您可以通过日历同步、自动电子邮件提醒或预订趋势分析等功能扩展该项目。 所有这些增强功能都自然融入同一 back4app 工作流程： 使用 windsurf 设计和定义新类或云函数 使用 beforesave 钩子进行安全保护 并通过 back4app containers 推出更新。 这种方法让您可以在不干扰用户的情况下向应用程序添加新功能。