当前位置: 首页 > news >正文

(5/6)我一个人+AI,做了款叫「猜猜看呗」的全栈小程序——看完你可能也想做一个(管理篇)

说个我真实的崩溃瞬间:小程序上线第 3 天,一个用户留言说"你们第 37 题答案错了"。我打开电脑想改,发现我根本没有管理后台——题目都在数据库里躺着,我得手写 SQL 才能改一条。那一刻我坐在椅子上愣了三分钟:产品上线了,但"运营"这关还没过。

然后我打开 AI 对话框,输入:“生成一个管理后台,能增删改查题目、管理用户数据”。10 分钟后,一个 React + TypeScript 的管理后台跑起来了。从"崩溃"到"解决",中间只隔了 10 分钟。

前4篇讲了「猜猜看呗」的全部产品功能——开篇+闯关+接龙+系统,5大品类+8种对战+5大系统+好友+商店。

这篇开始讲幕后——产品上线后,每天的题目怎么管理?用户数据怎么看?

传统做法:小程序上线后,运营同学提需求"我要一个后台管理题目",然后开发排期、画原型、写页面、联调接口、测试……两周起步。

我这次的做法:写了一句话给AI。10分钟之后,一个完整的React管理后台跑在了浏览器里。

到底有多简单

我输入给AI的Prompt大意是:

“用React + TypeScript + Ant Design生成一个管理后台。包含:1. 题目管理页面,支持按品类/难度筛选,增删改查题目 2. 用户管理页面,查看用户列表、答题记录、金币余额 3. 数据统计仪表盘”

AI 吐出了完整的项目结构——标准的 React 脚手架:Dashboard 仪表盘、QuestionList 题目列表、QuestionEdit 编辑、UserList 用户管理、API 服务封装。

我做了三件事:npm install→ AI 告诉我怎么配后端接口地址 →npm run dev。后台就跑起来了。

看看实际效果

管理后台主页

仪表盘展示了核心数据:题目总量、各品类分布、今日活跃用户、新增用户趋势。虽然数据还不大(毕竟刚上线),但框架是完整可用的。随着用户量增长,图表会自动更新。

说实话,我第一次打开这个仪表盘的时候有点恍惚——我从来没写过 React,但这个页面长得很"专业"。我盯着那张"今日活跃用户"的折线图看了十秒钟,确认它真的在动,才相信这是 AI 给我做出来的。

题目编辑页面

这是最核心的功能——题目的增删改查。支持按品类(成语/Emoji/歇后语/脑筋急转弯/诗词)和难度(15 级:一年级→二年级→…→高三→大学→社会人→专家)筛选。点击编辑进入详情页,可以修改题面、选项、答案、解析、分类——全部实时保存到后端数据库。

你猜那个"第 37 题答案错了"的留言我是怎么处理的?点开编辑页 → 找到成语猜猜 → 筛到第 37 题 → 改掉错误选项 → 保存。全程 40 秒,比我当年在 Excel 里改数据快了 100 倍。

这个表单页面,AI不仅生成了UI,还帮我处理了:

  • 表单校验(题面不能为空、至少两个选项)
  • 下拉框联动(选品类后自动加载该品类的题目列表)
  • 提交防重复点击
  • 删除二次确认弹窗

这些细节如果在传统开发里,都是前端需要一个个手写的东西——AI一次性吐出来了。

AI 是怎么做到的

有人可能会问:AI 真的用"一句话"就搞定了?

严格来说,不是一句话,是一轮多轮对话。大概的对话流程:

  1. 第一轮:我给大框架"生成管理后台,增删改查题目+用户管理"
  2. 第二轮:AI生成初版 → 我反馈"题目列表需要加品类筛选和分页"
  3. 第三轮:AI加上筛选和分页 → 我补充"编辑页加一个难度下拉框"
  4. 第四轮:加完难度 → 我问"样式能不能用Ant Design,好看一点"
  5. 第五轮:AI重构了组件用Ant Design → 我要求"加一个数据仪表盘"
  6. 第六轮:仪表盘生成 → 我说"部署的时候API地址怎么配"

**六轮对话,每轮平均1-2分钟。**总共大约10分钟。这10分钟产出了一个传统开发需要2-3天才能写完的后台。

这个后台已经稳定运行了多久

从我上线小程序到现在,这个AI生成的管理后台已经跑了两个多月,管理着64,000+ 道题目

期间有什么问题吗?

实话实说:小问题有,大问题没有。

  • 有一次题目列表的分页逻辑有bug(第2页数据重复),AI 30秒定位+修复
  • 统计图表在数据量增长后加载变慢,AI建议加了后端聚合查询优化
  • 有一个组件在新版Ant Design下报弃用警告,AI马上给了迁移方案

没有出现过crash、数据错误、接口异常。AI生成的代码比我想象的要稳健得多——可能是因为它生成的都是"标准写法",几乎没有发挥空间,反而减少了人为出错的可能。说真的,这比我以前让外包做的后台还稳——外包那版上线第一周就出了两次大故障。

这对"非技术"的人意味着什么

这个经历给了我一个很大的触动:管理后台这种高度标准化的工作,AI已经能完全接手了。

不只是写代码的人可以偷懒——如果你完全不会写代码,但需要一个管理后台,你也可以做到。

步骤是:

  1. 去 nodejs.org 一键下载安装 Node.js(10 分钟,不用懂任何概念,跟装 QQ 一样点"下一步");也可以让 AI 帮你装——跟 AI 说"帮我装 Node.js v20",AI 会一步步教你怎么装。
  2. 打开AI对话框,描述你需要的后台功能
  3. AI生成代码 → 你复制到本地 → 运行三条命令
  4. 浏览器打开localhost:3000,后台跑起来了

这 4 步里,第 1 步是"装环境"(一次性,5 年不用再装),第 2-4 步 AI 全程陪你——你不会写代码没关系,让 AI 帮你跑命令、帮你排错。整个过程里你需要做的"操作"就是:装 Node、复制代码、粘贴命令三件事,其他都是 AI 干。

不需要理解React是什么、TypeScript是什么、Ant Design是什么。你只需要描述"我要一个能管理XX的后台",AI负责把代码写好。

这不是未来——这是2026年已经发生的事。我用猜猜看呗的管理后台证明了这一点。

但也别过度神化

说完了"爽"的部分,也说一点客观的:

AI 生成的代码不是"完美无缺"的。它生成的通常是"最佳实践80%的代码"——能跑、功能对、但需要人工做一些适配:

  • 接口地址需要你手动改成自己的后端地址
  • 权限控制(什么人能访问什么页面)AI默认不做,你需要描述清楚
  • 复杂业务逻辑(如"题目审核流程:编辑→审核→发布")需要详细描述

但这些问题都不是阻碍——它们是"沟通"问题,不是"能力"问题。你描述得越清楚,AI产出越精准。

下一站:另一个产品已经在想了

「猜猜看呗」的产品故事还有最后一篇——下一篇讲后端服务器怎么选型。这是6篇系列里的第5篇,还有1篇就讲完了。

但「划水造物记」不会停在这里——下一个产品已经在构思了。是什么暂时不说(留点悬念),但可以透露:它更小、更聚焦、AI承担的比例会更高。这次我会把"管理后台"这种经验直接用上,不再走弯路。

💡 说句掏心窝的话:以前我总觉得"做产品"必须会写代码。这 5 篇写完你会发现——会描述需求的人,现在也能做出产品了。工具变了,门槛没了。

关注「懒人偷得半日闲」,下次更新时你会第一时间看到。

体验传送门

http://www.jsqmd.com/news/1388081/

相关文章:

  • WiFi模块在现代打印技术中的关键作用与优化实践
  • ComfyUI-Manager终极指南:高效解决节点管理难题的专业解决方案
  • 2026年深圳大件特殊物品搬运价格参考与靠谱服务商推荐(完整版):含钢琴/红木家具/保险柜/鱼缸收费标准及各区搬家公司实测对比 - 禧燕搬家
  • 哪个商城网站建设好,资深从业者深度解析避坑指南与实战经验
  • 2026深圳钢琴搬运价格参考+靠谱公司挑选标准(全区域通用)【最新版】 - 禧燕搬家
  • 2026年北京通州区保暖服饰源头工厂靠谱推荐:马员外服饰全产业链实力解析 - 子柔传媒
  • 机器人叠衣服为何成技术标杆?拆解感知、规划与控制全栈挑战
  • CSDN 付费专栏连载:雷达脉冲压缩与匹配滤波完整原理、工程实现、国产雷达应用全解
  • 【LeetCode】13.罗马数字转整数
  • 永乐网站建设怎么做?从零开始打造高转化企业官网的实战避坑指南
  • 2026深圳别墅/豪宅搬家哪家好?专业拆装打包无损搬运,附高端服务商类型对比+全区域收费标准+挑选标准 - 禧燕搬家
  • CUDA Bank Conflict
  • 2026大连甘井子代理记账哪家靠谱?【大连正实财务】拒绝99元低价陷阱,资深会计实测靠谱代账的4项核心指标 - 企业信息资讯
  • 建设电商网站所需硬件全解析:从服务器选型到网络架构的深度避坑指南
  • 补—数据链路层
  • Android 7系统无障碍服务(三)无障碍服务的注册与绑定
  • 13 - 《英伟达启示录》深度理解测试
  • 【C++】模板进阶:非类型模板参数与模板的特化
  • 国自然创新性不够?教你如何利用Gemini 3.5实现有价值的创新
  • 隐私匿名树洞真人横评 暖音回声稳坐高安全倾诉首选 - nuanyin
  • 高空外墙清洗机器人有哪些:【凌度智能】全场景覆盖 - 秋山寄远
  • 搭建本地数字员工,OpenClaw Windows 端完整实践记录(含安装包)
  • 答辩前知网AI率超标怎么办?比话三天送检紧急方案!
  • 鸿蒙系统录音转文字App有哪些?老牌软件与效率新秀实测对比
  • 昆明网站建设推荐q479185700上墙
  • S7-1500 PLC间数据通信:四种主流方案对比与实战配置详解
  • 2026年长春单招班推荐:高职单招备考选校全攻略 - 爱说大实话121
  • Ubuntu 18.04到22.04 LTS系统升级全攻略:从评估到故障排查
  • 2026深圳大件特殊物品搬运价格参考与靠谱服务商推荐:钢琴/红木家具/保险柜收费标准+正规搬家公司名单+避坑全攻略【最新版】 - 禧燕搬家
  • 2026年北京朝阳区保暖服饰源头工厂靠谱推荐:马员外服饰全产业链实力解析 - 子柔传媒