跳到主要内容

教程：在 WorkBuddy 中快速搭建全栈应用

本教程将引导你使用 WorkBuddy + CloudBase，从零开始搭建一个完整的全栈 Web 应用（待办事项管理），并部署上线。

预估时间​

约 15 分钟

前置条件​

步骤 1：启用 CloudBase​

在 WorkBuddy 对话中输入 /cloudbase，选择 CloudBase Skill，即可开始使用。

步骤 2：创建项目​

在 WorkBuddy 中打开一个空目录作为项目根目录，然后向 AI 输入：

使用 React + Vite 创建一个 Web 待办事项管理应用

AI 会自动生成项目代码。项目结构如下：

my-todo-app/
├── src/
│   ├── App.jsx
│   ├── App.css
│   ├── main.jsx
│   └── index.html
├── package.json
└── vite.config.js

步骤 3：创建数据库​

部署前，先通过 CloudBase 创建数据库集合。在 WorkBuddy 的 AI 对话中输入：

在我的云开发环境中创建一个名为 "todos" 的数据库集合

成功后，AI 会返回集合创建确认信息。

步骤 3：集成后端功能​

接下来，让 AI 将待办事项数据存储到云数据库。在 WorkBuddy 中继续输入：

为待办事项应用添加云数据库集成，使用 CloudBase Web SDK：
1. 安装 @cloudbase/js-sdk
2. 将待办事项的增删改查操作与云数据库的 "todos" 集合关联
3. 页面加载时自动从数据库读取待办列表

AI 会自动修改代码，添加数据库集成逻辑。

步骤 4：本地预览​

在 AI 完成代码修改后，运行：

npm install
npm run dev

在浏览器中预览应用，确认待办事项的添加、完成、删除功能正常工作。

步骤 5：部署上线​

确认应用正常工作后，在 WorkBuddy 中输入：

将当前项目部署到 CloudBase，使用独立子域名

AI 会自动执行以下操作：

  1. 构建前端项目
  2. 通过 manageApps 创建应用并部署到独立子域名
  3. 配置 SPA 路由
  4. 返回可公开访问的部署链接

完成​

恭喜！你已经使用 WorkBuddy + CloudBase 完成了全栈应用的开发与部署。

下一步​

  • 尝试添加用户认证功能
  • 为应用添加搜索和筛选功能
  • 探索更多 CloudBase 工具