如何使用游标构建后端？

现代网络和移动项目常常在第一个障碍处停滞不前：将一个想法转化为生产就绪的后端。 手动构建数据模型，编写样板crud逻辑，部署基础设施，然后保持前端同步，可能会消耗数天或数周宝贵的工程时间。 本教程演示了back4app的后端平台、模型上下文平台（mcp）协议和cursor的ai辅助ide如何共同消除这些摩擦。 通过创建一个简单的事件管理应用程序，您将看到这些工具如何让您搭建、部署和集成一个功能齐全的后端和匹配的前端。 关键要点 了解如何在几分钟内使用cursor的ai代理和mcp协议在back4app上搭建一个生产就绪的后端。 深入了解如何通过可重用的validateuserrole助手强制执行干净的基于角色的访问控制，该助手巧妙地分离组织者和参与者的工作流程。 学习如何生成和连接一个响应式的next js前端，该前端自动使用您的back4app rest api。 探索容器化和一键部署，通过back4app容器以创纪录的时间从github部署您的全栈事件管理应用。 项目概述 在本教程中，您将构建一个简单的 事件管理应用 ，让用户创建事件，注册他们感兴趣的事件，查看即将到来的或已注册的事件，并在需要时取消注册。 您将使用 back4app 的 mcp 工具构建此应用的后端。mcp 工具允许 大型语言模型 (llms) https //en wikipedia org/wiki/large language model ，如 claude 4 诗歌和像 cursor 这样的 ai 代理/工具与您的 back4app 后端无缝互动。 使用 mcp，您的 ai 代码助手可以创建应用程序，管理数据库（crud 操作、查询），部署云代码，处理用户身份验证等，适用于您的 back4app 项目。 在本教程中，您将使用 cursor ，这是一款集成大型语言模型的 ai 驱动代码编辑器，帮助您在开发环境中编写、重构和理解代码。 使用 cursor 和 mcp，您可以使用自然语言提示后端操作，使开发过程更快、更直观。 项目设置 现在您对本教程中将要实现的内容有了更好的理解，请继续设置您的项目要求，以便使用 cursor 和 mcp 构建后端。 先决条件 要完成本教程，您需要以下内容： 一个 back4app 账户。您可以 免费注册 https //www back4app com/signup 如果您还没有账户。 cursor https //www cursor com/ 安装在您的开发机器上。 对后端开发概念有基本的了解。 node js v22 或更高版本。 步骤 1：创建一个 back4app 项目 第一步是登录到您的 back4app 账户并创建一个名为 “eventmanager。” 步骤 2：创建一个账户密钥 您需要生成一个 back4app 账户密钥，以便在 cursor 中设置 mcp 并授予 mcp 服务器访问您的 back4app 账户的权限。 前往您的账户密钥设置。在那里，为您的账户密钥命名，并通过点击 + 按钮生成一个。 您现在应该可以看到生成的账户密钥及其到期日期。 步骤 3：在 cursor 中配置 mcp 观看此视频以了解如何连接 cursor 和 back4app。 打开 cursor 应用程序并导航到 设置 > cursor 设置 > mcp, 在那里您将找到一个页面来配置 cursor ai 中的 mcp 服务器。 点击 “ 添加新的全局 mcp 服务器 ” 按钮以创建一个 mcp json 文件。您将在此文件中编写 mcp 的配置。 要在 cursor 中配置 back4app mcp 服务器，请将以下配置粘贴到 mcp json { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } 现在将 \<account key> 替换为您在第 3 步中生成的保存的 back4app 账户密钥。 如果您在 windows 机器上按照本教程进行操作，请将 command 键的值更改为 npx cmd 在这些配置到位后，您就可以开始使用 back4app mcp 和 cursor 构建您的 back4app 后端。 使用 cursor 和 back4app 构建后端 您的事件管理器将具有以下功能； 用户可以创建新事件 用户可以注册参加事件 显示用户注册的事件列表 显示用户即将到来的事件列表 用户可以取消事件注册 为了满足这些功能，这里是一个示例数据库架构： 打开光标 聊天 ，通过切换 ai 面板， 并继续选择 代理 模式以对您的应用进行更改。此外，选择一个首选的 llm，例如新的 claude 4 sonnet 模型。 在聊天框中，写一个提示以生成设计的架构。 实现这一目标的示例提示是： design a back4app backend database for my "event manager" application \ the app allow users to create events or register for created events as an organizer or attendee \ an organizer can then create events for attendees to view, register for and see their registered events \ an attendee can cancel events they previously registered for create the following classes to support these features; user name(string), role (organizer or attendee), email(string) event title(string), location(string), date(date), eventimage(file) and organizer(pointer = user) registration event(pointer = event), attendee(pointer = user), registered(boolean) ensure you create all specified pointer relationships 您需要批准使用mcp工具的请求。一旦获得批准，请求将执行。您应该会收到数据库已成功创建的响应。 您可以通过检查您的应用程序 仪表板 来确认成功，查看新创建的类。 现在您已经创建了后端并添加了应用程序的数据库表，您将实现应用程序逻辑。 使用mcp实现用户功能 在您的应用程序描述中，此应用程序应允许不同类型的用户执行不同的任务，例如创建事件和注册事件。在这里，您将定义处理这些功能的函数。 实现访问控制 应用程序的主要实用函数将被称为 validateuserrole 此函数负责验证哪些功能可供哪些用户角色使用。 您可以使用以下提示创建此函数 \ create a utility function inside a new `utils js` file that validates if a function is being called by a user with the required role \ if a user does not have the required role then the function will not continue and throw an error 继续确认 utils js 已创建，并包含 validateuserrole 。 创建用户功能 要实现 创建用户 功能，必须传递 用户名 , 密码 , 电子邮件, 和 角色 。任何人都可以调用该函数。 使用下面的提示实现创建用户逻辑 \ create an asynchronous cloud code function named `createuser` inside the backend's `main js` \ this function creates a user with the following string parameters username, role, email, and password \ the function should validate all input to ensure they conform to expected types and formats before saving \ check if a role was provided, if not, throw an error with a message indicating that a role is required if present, compare the inputed role against the list of valid roles; \["organizer", "attendee"] if inputed role is not valid, throw an error message "select a valid role" if the role is valid, allow the save to proceed as normal \ ensure the user being created/saved does not already exist 'user' by searching through the saved usernames 您应该收到一个响应，指示函数已成功创建。您现在可以为您的 事件管理器 创建新用户。 创建事件功能 一个 组织者 角色可以创建一个新事件。为此，函数将创建一个新的事件对象，并验证调用该函数的用户是否具有 组织者 角色。您将使用之前创建的工具函数来实现此验证。 使用下面的提示实现此逻辑 create an asynchronous cloud function that allows users to create a new event in the app use the utility function in `utils js` to ensure this can only be called by a user with the organizer role \ this function will take in the following parameters title(string), location(string), date(date), image(file), organizer(pointer) \ the event organizer attribute will have a pointer value to the user that calls the function \ perform proper error handling if the wrong user calls this function or if wrong parameter types are passed 该函数将在 main js 文件中创建。您可以使用虚拟数据在 cursor 中提示一个简单的测试，并调用暴露的 back4app rest api。 注册活动功能 用户要注册活动，必须拥有 与会者 角色。所有拥有此角色的用户可以访问3个功能。第一个是注册已创建的活动。 此功能创建一个新的注册对象，并将用户的注册布尔值设置为true。 输入以下提示或类似的提示以实现此逻辑 generate an asynchronous cloud code function called `registerforevent` use the validate role utility function to ensure only users with the attendee role can sucessfully call this \ `registerforevent` will accept 2 paramaters from a request body; `useid` and `eventid` \ the function should validate all paramaters are of the required type and formats expected in the registration class \ the function will register a user to an event by creating a new object in the registration class this object will set "registered" to a boolean type value of true \ upon successfully registering for event, the function should throw an operation sucessfull message 接下来，您需要一个函数来查询用户注册的所有活动。我们将此函数称为 listupcomingevents 使用类似这样的提示创建此函数 create a simple async cloud code function called `listupcomingevents` \ this function will query for all upcoming events a user(attendee) has registered for \ it must only show events with future dates \ perform appropriate error handling if no upcoming registered events are found 确认该函数已成功创建在 main js 中，并根据需要手动或使用光标提示修改代码。 请注意，在此提示中，函数参数未为光标的ai代理指定。这演示了代理如何使用mcp通过检查数据库模式推断函数所需的参数。 然而，在提示中提供尽可能多的上下文始终是一个好习惯。 取消注册功能 满足应用程序要求的最后一个功能是取消注册功能。要实现这一点，函数将获取所选事件注册的 eventid 和 userid 并更新其布尔值。 使用类似于以下的提示将上述逻辑添加到您的后端应用程序中 create an asynchronous cloud code function called `canceleventregistration` that cancels an event for a user(attendee) when called \ this function is responsible for canceling an event the user is registered for and setting the boolean value of `registration resgistered` in the object to false \ when a users event is sucessfully canceled, delete that registration object from the class and throw a success response \ implement error handling to catch and log any issues during the process, returning a relevant error message in case of failure 您可以查看 cursor 和 mcp 创建的所有代码，并在必要时进行修改，位于您的 应用仪表板 → 云代码 , 如下图所示。 通过这些功能，您现在已满足 事件管理器 应用程序后端的所有要求。 使用 cursor 为您的后端构建前端 现在您的后端已成功构建和部署。您将为您的应用程序搭建一个前端 ui。该 ui 将使用 back4app 的 rest api 端点来消费您的 back4app 后端。 为此，mcp 将获取您的后端架构元数据，cursor 将使用这些元数据构建您的应用程序 ui，具体提示规范如下： build a responsive frontend app in next js that connects and consumes my "event management" backend app this frontend should have the following pages; \ a signup/signin page with a form for new and old users \ a homepage showing all events created in the backend \ if the signed in user has the attendee role the homepage should also show all upcoming registered events for the user \ a register for event page \ be sure to initialize parse properly with event manager `application id` and `javascript key` handle dynamic routing for both user roles and make the ui intuitive 此提示旨在一步到位地搭建一个 next js 前端。如果您对 cursor 的生成不满意，您可以随时提示进一步的更改。 确保解析已正确初始化，使用 应用程序 id 和 javascript 密钥 以防 cursor 无法处理此问题。这些变量允许您向后端应用程序发出请求。 上面的图像显示了使用 cursor 和 back4app 的 mcp 通过单个命令生成的 next js 应用程序。 部署您的应用程序 最后，您将使用 back4apps 的网络托管功能部署您的全栈应用程序。 要部署您的 next js 应用程序，请在项目的根目录中创建一个 dockerfile 并将以下代码粘贴到其中 \# stage 1 build the next js app from node 20 alpine as builder workdir /app copy package json package lock json / run npm install copy \# build with default or placeholder env vars arg next public parse application id arg next public parse javascript key arg next public parse server url run npm run build \# stage 2 run the next js app from node 20 alpine workdir /app copy from=builder /app / expose 3000 cmd \["npm", "start"] 这个 dockerfile 执行以下操作 从官方 node js 14 运行时开始 将工作目录设置为 /app 将 package json 和 package lock json 复制到 docker 镜像中并安装依赖 将其余的应用程序代码复制到 docker 镜像中 构建 next js 应用 为应用程序暴露端口 3000 定义启动应用程序的命令 您还需要一个 dockerignore 文件。在项目的根目录中创建一个并添加以下命令 \# node modules (reinstalled in docker) node modules \# next js build output next out \# logs npm debug log yarn debug log yarn error log pnpm debug log \# env files (optional — only if you handle secrets another way) env env local env development env production env test \# os / ide / editor junk ds store thumbs db vscode idea \# git git gitignore 现在，在终端中运行以下命令以构建和测试 docker 镜像 docker build t event manager frontend docker run p 3000 3000 event manager frontend 您将在 http //localhost 3000 找到您构建的 docker 镜像。如果您已验证您的应用程序按预期运行，是时候将您的代码推送到 github 存储库并通过 back4app 部署它。 在您的 back4app 仪表板上打开您的事件管理应用程序，并导航到 web 部署 。 到达那里后，继续授予 back4app 查看您的帐户存储库的权限，并选择您推送的前端应用程序的存储库。 为您的项目命名（例如：事件管理器），然后单击上面图像中显示的 “部署” 按钮以部署您的应用程序。 如果成功，您将看到一个部署准备就绪的成功消息。您可以通过导航到 back4app 在下面的部署屏幕上提供的链接来访问您的已部署应用程序。 恭喜，您已成功在 back4app 上部署了您的应用程序。您可以访问本教程中构建的事件管理项目 这里 https //eventmanager3 3jqdnkfk b4a run/ 。 结论 在本文中，您设计并部署了一个后端事件管理应用程序，允许用户作为组织者或参与者管理事件。 您还使用 next js 构建了应用程序的前端，使用 cursor 加快开发速度。 将 cursor 的 ai 增强开发环境与 back4app 的 mcp 配对，创建了一个强大的开发工作流程，显著缩短了开发时间，并使构建您的 back4app 后端变得更加容易。 祝您编码愉快！