小程序做出来以后，管理后台怎么建？

前段时间，我在视频号发了一期教程，演示怎么用 WorkBuddy + CloudBase 从零做一个微信待办小程序。视频发出后，有人追问：小程序做出来了，管理后台怎么弄？

这个问题很实际。用户在小程序里留下的数据，后面总要查询、修改、下架或删除。每次直接打开数据库，既麻烦，也不适合交给运营人员。

所以有了这次补充：继续沿用同一个 CloudBase 环境，为小程序加一个在电脑浏览器里使用的业务管理后台。

操作界面按 2026 年 7 月的 WorkBuddy 与 CloudBase 整理。产品更新后，个别按钮名称或位置可能略有变化。

先说一个容易误解的地方：小程序不会自动附送一个业务管理后台。 微信公众平台可以管理小程序版本、成员和发布；CloudBase 控制台可以查看云函数、数据库等技术资源；但它们都不是给运营人员日常使用的后台。我们需要单独做一个网页，并让它连接小程序正在使用的同一个 CloudBase 环境。

这套方案继续沿用之前视频里的路线，不购买服务器，不单独备案域名，也不从头学后端。最终你会得到一个只有管理员能登录的网页，可以：

• 查看待办总数、已完成数和未完成数；
• 按关键词、状态和日期查找待办；
• 新增、编辑、完成和删除待办；
• 查看用户及其待办数量；
• 在 CloudBase 上直接发布，通过 HTTPS 地址访问；
• 与小程序共用一套数据，后台修改后，小程序里也能看到结果。

一、先弄清楚三个“后台”

• 微信公众平台：管理 AppID 、成员、体验版、审核和发布，主要给小程序负责人和开发人员使用。
• CloudBase 控制台：管理数据库、云函数、静态托管、日志和费用，主要给开发人员使用。
• 业务管理后台：搜索、查看和处理业务数据，主要给管理员和运营人员使用。

前两个是平台提供的，第三个需要我们自己创建。

管理后台是一个普通网页。它和小程序连接同一个 CloudBase 环境，读取同一个待办集合。因此不需要复制数据，也不需要每天手工同步。

二、开始前准备什么

请先确认下面几件事：

1. 视频里完成的待办小程序已经能在微信开发者工具中正常运行。
2. 小程序已经绑定一个 CloudBase 云环境。
3. 你仍然保留着小程序的本地项目文件夹。
4. WorkBuddy 已安装“腾讯云 CloudBase”技能，并且可以使用。
5. 你能登录 CloudBase 控制台和微信公众平台。

还要先确认一个概念**：环境 ID**。

环境 ID 可以理解为这套云端数据的“房间号”。小程序和管理后台必须进入同一个房间，才能看到同一批数据。你可以在 CloudBase 控制台的环境概览中找到它，通常长得像：

todo-3g8xxxxxx1234567

不要照抄上面的示例，必须使用你自己的环境 ID 。

在改代码前，建议先复制一份整个项目文件夹作为备份。对于小白来说，这是最简单可靠的“后悔药”。

三、不要急着生成页面，先让 WorkBuddy 看懂现有项目

不同人生成的小程序，数据库集合和字段名称可能完全不同。有人叫 todos，有人叫 tasks；“是否完成”可能叫 completed，也可能叫 status。如果直接让 AI 猜，很容易做出一个页面很好看、却一条数据也查不到的后台。

在 WorkBuddy 中打开原来的小程序工作区，选择“腾讯云 CloudBase”技能，先发送下面这段提示词：

请先只分析这个微信小程序项目，不要修改任何代码，也不要创建或删除云资源。

这是一个使用微信云开发 CloudBase 的待办事项小程序。我准备为它增加一个网页版管理后台。

请检查并告诉我：
1. 当前 CloudBase 环境 ID；
2. 小程序使用了哪些数据库集合；
3. 待办集合的真实名称和全部字段，并各给一个脱敏后的示例；
4. 哪个字段表示创建者，哪个字段表示完成状态和创建时间；
5. 当前有哪些云函数，每个云函数负责什么；
6. 当前数据库权限规则是什么；
7. 管理后台如果要查看全部用户的待办，还缺少哪些能力。

最后请给出一份实施计划。发现不确定的地方时先问我，不要自行猜字段名。

WorkBuddy 输出分析结果后，不要立刻点执行。先到 CloudBase 控制台，进入“文档型数据库”或“数据库”，对照检查三项内容：

• 集合名称是否一致；
• 数据中是否真的存在 WorkBuddy 列出的字段；
• 页面右上角显示的环境 ID 是否与小程序配置一致。

只要这三项对得上，就可以继续。

四、我们要搭一个什么样的后台

第一版不要贪多，先做一个能用、不会误删数据的最小版本：

1. 登录页：管理员用邮箱和密码登录。
2. 数据看板：展示待办总数、已完成数、未完成数和用户数。
3. 待办管理：列表、搜索、筛选、分页、新增、编辑、完成、删除。
4. 用户查看：展示用户标识、首次使用时间、最后活跃时间和待办数量。没有这些字段时先展示现有信息，不要编造。
5. 操作记录：记录哪个管理员在什么时间修改或删除了哪条数据。

项目结构可以很简单：

原小程序项目/
├── miniprogram/          原来的小程序代码
├── cloudfunctions/       原来的云函数
└── admin-web/            新增的网页版管理后台

技术上，我们让 WorkBuddy 创建一个 Vue 3 + Vite 网页。你不需要先学会 Vue；这里只是给 AI 一个明确、常见、容易部署的技术选择。

后台网页不能直接拿着最高权限去修改数据库。比较安全、也容易理解的做法是：

管理员登录网页
    ↓
网页调用 admin-api 云函数
    ↓
云函数确认“这个账号真的是管理员”
    ↓
验证通过后才查询或修改数据库

这一步看起来多了一层，实际上是在给数据加一道门。即使别人知道后台网址，也不能越过云函数直接删数据。

五、先创建第一个管理员账号

1. 开启邮箱密码登录

打开 CloudBase 控制台，进入当前环境，找到“身份认证”或“登录授权”，在登录方式中开启邮箱 + 密码登录。

如果界面要求创建客户端配置或 Publishable Key，就按页面提示创建。 Publishable Key 是提供给网页初始化登录组件使用的公开标识，不等于腾讯云 API Key 。

注意：SecretId 、 SecretKey 和拥有管理员权限的 API Key 都不能放进网页代码。只要 WorkBuddy 准备把这些内容写入 admin-web，立即让它停止并改用 CloudBase Web SDK 的登录会话。

2. 注册一个账号

可以让 WorkBuddy 先生成登录页，再通过邮箱验证码完成首次注册；也可以在 CloudBase 的用户管理页面创建账号。完成后，在“身份认证 → 用户管理”中找到这个账号，复制它的 uid。

uid 是 CloudBase 给这个登录账号分配的唯一编号。后面后台判断“谁是管理员”，认的是 uid，不是浏览器里填写的昵称。

3. 创建管理员白名单

进入数据库，新建一个名为 admins 的集合，再新建一条记录：

{
  "_id": "把这里替换成管理员的 uid",
  "role": "super_admin",
  "enabled": true,
  "name": "我的管理员账号"
}

为了方便检查，建议让文档 _id 就等于账号 uid。这个集合的客户端权限设置为“无权限”或默认拒绝，普通网页和小程序都不应该直接读取、修改它；admin-api 云函数在服务端读取即可。

以后想增加第二个管理员，只需要先创建新登录账号，再把新账号的 uid 加到 admins 集合。

六、把这段完整提示词交给 WorkBuddy

回到 WorkBuddy，确认仍在原小程序工作区，并选择“腾讯云 CloudBase”技能。把下面提示词完整发给它：

请在现有微信小程序项目中新增一个网页版管理后台，目录固定为 admin-web。

请先进入 Plan 模式，根据你刚才分析到的真实环境 ID、数据库集合名和字段名制定计划；计划得到我确认后再执行。不要猜测集合或字段，不要修改现有小程序的页面和交互。

技术要求：
1. 管理后台使用 Vue 3 + Vite，界面使用中文，适配电脑浏览器；尽量少用依赖。页面路由使用 Hash 模式，避免部署到 /admin/ 子路径后刷新页面出现 404。
2. 使用 @cloudbase/js-sdk 2.x 连接现有 CloudBase 环境，环境 ID 从配置读取。
3. 使用 CloudBase 身份认证的邮箱密码登录，不自行保存或比较明文密码。
4. 新建一个 admin-api 云函数。后台所有查询、新增、修改、删除都必须调用这个云函数，浏览器不得直接写业务数据库。
5. admin-api 的每一次请求都必须从可信的登录会话取得当前 uid，再查询 admins 集合中 _id 等于该 uid、enabled 等于 true 的记录。验证失败立即返回无权限，不能相信前端传来的 uid、role 或 isAdmin。
6. 云函数权限只允许已登录且非匿名用户调用；更细的管理员白名单校验必须在函数内部完成。
7. 不得把 SecretId、SecretKey、CloudBase 管理员 API Key、数据库主密钥或管理员密码写进前端代码、配置文件和 Git 仓库。前端只能使用环境 ID、客户端 ID 或 Publishable Key 等允许公开的配置。

页面要求：
1. 登录页：邮箱、密码、登录、退出；未登录和非管理员不能进入其他页面。
2. 数据看板：待办总数、已完成数、未完成数、用户数。
3. 待办管理：分页列表、关键词搜索、状态筛选、日期筛选、新增、编辑、切换完成状态、删除。
4. 删除前必须弹出二次确认；所有操作都要有成功或失败提示。
5. 用户页面：只展示现有数据中确实能得到的信息，不编造手机号、昵称等字段。
6. 新建 admin_audit_logs 集合，记录管理员 uid、动作、目标集合、目标文档 id、时间和操作摘要；不要把密码、令牌或完整敏感数据写入日志。

数据要求：
1. 严格复用现有待办集合和现有字段，保证管理后台修改后，小程序能立即读取。
2. 原有数据没有某个字段时，要做兼容处理，不能导致旧数据报错。
3. 列表必须分页，不能一次读取整个集合。
4. 删除、新增和修改都要在服务端校验参数，只允许操作明确列入白名单的集合和字段。

完成后请自动执行：
1. 安装依赖并启动本地预览；
2. 检查构建是否成功；
3. 告诉我需要在 CloudBase 控制台手工完成的配置；
4. 输出一份测试清单；
5. 在我确认前，不要删除或批量修改任何现有数据。

这段提示词中有四条不能删：

• 使用现有环境和现有字段；
• 后台写数据必须经过云函数；
• 云函数每次都要检查管理员白名单；
• 不把腾讯云密钥放到网页里。

只要这四条不被删掉，后台的基础安全框架就不会跑偏。

七、 WorkBuddy 执行时，你需要看懂哪些提示

WorkBuddy 可能会请求创建或修改以下资源：

• admin-web 网页目录；
• admin-api 云函数；
• admins 管理员集合；
• admin_audit_logs 操作日志集合；
• CloudBase 登录方式和客户端配置；
• 静态网站托管。

这些都与本教程目标一致，可以在看清名称后允许。

如果它要求把数据库权限直接改成“所有用户可读写”，不要同意。让它改为：小程序继续按原有规则访问自己的数据，管理后台通过已经校验身份的 admin-api 操作全部数据。

如果它要求你提供 SecretId 或 SecretKey，也先拒绝。正常的 CloudBase Web 登录和云函数调用不需要把这类长期密钥写进浏览器。

八、本地测试：按这个顺序最容易发现问题

WorkBuddy 完成后通常会启动一个本地地址，例如：

http://localhost:5173

不要一看到登录页就认为做完了。至少完成下面 8 项测试：

1. 未登录测试：直接访问数据页，应被送回登录页。
2. 错误密码测试：输入错误密码，应提示登录失败，不能进入后台。
3. 非管理员测试：使用一个未加入 admins 的正常账号登录，应显示“无管理权限”。
4. 管理员测试：使用白名单账号登录，应正常看到数据。
5. 新增测试：创建一条标题明显的测试待办，再到小程序里确认能看到。
6. 修改测试：在后台把这条待办标记为完成，再到小程序里刷新确认状态同步。
7. 删除测试：删除测试待办前应出现二次确认，删除后小程序中也应消失。
8. 日志测试：在 admin_audit_logs 中应能看到刚才的新增、修改和删除记录，但不能出现密码或登录令牌。

测试时只使用自己刚创建的测试记录，不要拿真实数据试删除。

九、发布到 CloudBase，得到一个正式后台网址

本地测试通过后，让 WorkBuddy 执行生产构建：

cd admin-web
npm run build

Vite 默认会生成一个 dist 文件夹，这就是要发布的网页成品。

方法一：继续让 WorkBuddy 发布

发送：

请把 admin-web 的生产构建产物部署到当前 CloudBase 环境的静态网站托管中。
部署路径使用 /admin/，不要覆盖当前环境中已有的其他静态文件。
如果部署到子路径，请正确设置 Vite 的 base，避免刷新或打开页面后白屏。
部署完成后只告诉我访问地址和验证结果，不要修改小程序代码。

方法二：在控制台手工发布

如果你更喜欢点界面，也可以这样做：

1. 打开 CloudBase 控制台并进入正确环境；
2. 进入“静态网站托管”；
3. 点击“新建部署”或“上传文件夹”；
4. 选择 admin-web/dist 文件夹；
5. 部署路径填写 /admin/，避免覆盖根目录的其他文件；
6. 等待部署完成，打开平台给出的 HTTPS 地址。

如果是上传源码而不是 dist，构建配置通常填写：

安装命令：npm install
构建命令：npm run build
构建产物目录：dist
Node.js：20 或 22
部署路径：/admin/

网页第一次上线后，还要回到 CloudBase 的“安全来源”或“安全域名”设置，把静态托管的正式域名加入允许列表，否则登录或调用云函数时可能提示非法来源。

管理后台只是网页，更新它不需要重新提交微信小程序审核。只有当你同时改了小程序代码，才需要重新上传体验版和提交审核。

十、最常见的六个问题

1. 后台能打开，但登录后又回到登录页

先检查：

• CloudBase 是否已开启邮箱密码登录；
• 网页连接的环境 ID 是否正确；
• 正式域名是否加入安全来源；
• 路由判断是否把匿名会话误当成正式登录。

可以把报错截图和浏览器控制台错误发给 WorkBuddy，让它只修登录问题，不要重做整个项目。

2. 登录成功，却提示“无管理权限”

重点检查 admins 集合：

• 文档 _id 是否与登录账号的 uid 一字不差；
• enabled 是否为布尔值 true，而不是字符串 "true"；
• 管理后台、云函数和 admins 集合是否属于同一个环境。

3. 后台一条数据都没有，小程序里明明有

数据通常还在，问题多半出在后台用了错误的集合名、环境 ID 或字段名。让 WorkBuddy 重新执行“只分析不修改”的检查，并拿 CloudBase 控制台中的真实数据进行对照。

4. 后台修改成功，小程序里没有变化

检查后台是否真的复用了原集合和原字段。例如小程序判断的是 completed，后台却新写了一个 status，两个页面自然不会同步。还要确认小程序页面是否在重新进入时刷新了数据。

5. 发布后页面白屏，本地却正常

通常是部署在 /admin/ 子路径后，Vite 仍按网站根路径寻找 JS 和 CSS 。让 WorkBuddy 检查 vite.config 中的 base，子路径部署最省事的设置通常是相对路径 ./；如果刷新内页出现 404，再确认 Vue Router 使用的是 Hash 模式。修改后重新构建、部署。

6. 调用云函数提示没有权限

依次检查：

• 当前是否为真实登录账号，而不是匿名会话；
• admin-api 是否已经部署到当前环境；
• 云函数调用权限是否允许已登录且非匿名用户；
• admin-api 内部是否能读取 admins 集合；
• 云函数日志里记录的具体错误是什么。

不要为了消除报错把云函数改成允许所有人调用并跳过管理员验证。

十一、上线前必须守住的安全底线

一个后台“能用”不代表“能上线”。发布前再检查一次：

• 网页源码里没有 SecretId 、 SecretKey 、管理员 API Key 和密码；
• 数据库没有被设置成“所有人可读写”；
• 前端不能通过修改 localStorage 中的 isAdmin=true 获得权限；
• admin-api 每次请求都会在服务端检查登录身份和 admins 白名单；
• 非管理员账号确实无法查询和修改数据；
• 删除操作有二次确认；
• 列表使用分页，避免数据多了以后一次把数据库读爆；
• 操作日志中没有密码、令牌和完整敏感信息；
• CloudBase 已开启费用提醒或资源用量提醒。

后台网址公开与否不决定安全性。登录、服务端鉴权和最小权限才决定谁能读取、修改数据。

十二、第一版完成后，还能继续加什么

先稳定使用一段时间，再考虑增加：

• 多管理员和不同角色，例如只读客服、运营、超级管理员；
• 批量导出 CSV；
• 公告管理；
• 用户反馈处理；
• 数据趋势图；
• 删除后的回收站；
• 高风险操作的二次验证。

不要第一天就把所有功能都塞进去。对小白来说，先把“登录安全、数据看得见、单条数据能管理、操作有记录”这四件事做稳，比做一个复杂的大后台更重要。

把整条路径串起来

视频里的第一阶段解决了“怎么让用户用上小程序”，这次补的是“产品上线后，管理员怎么管理它”。整个过程可以压缩为六步：

1. 让 WorkBuddy 识别现有环境、集合和字段；
2. 创建 admin-web 网页；
3. 使用 CloudBase 邮箱密码登录；
4. 用 admins 集合保存管理员白名单；
5. 所有管理操作经过 admin-api 云函数鉴权；
6. 测试通过后发布到 CloudBase 静态网站托管。

不必先学完整套前端、后端和服务器运维，也要把权限边界写进需求，并逐项测试。 AI 能生成代码，无法替你确认生产数据是否安全。