Plan Mode 实战:为现有 Vue3 项目接入 CloudBase 持久化能力

上次 Plan Mode 实战,我们是直接生成了一个全新的"合同管理"模块。新模块由于关联的内容较少,难度确实会低一点。

《"狗都不用"的 Cursor Auto 模式,竟靠 Plan Mode 真香回归? - 掘金》

我们日常面对更多的任务,应该都是基于已有代码的修改。

今天,我们就在一个已有代码的工程中,尝试一下 Plan Mode 的实际效果如何。

背景介绍

应用介绍

这次测试的场景是一个新项目:集萤,名字来源于"囊萤映雪"的典故,寓意学习、坚持。

主要用于记录日常的碎片化内容,比如灵感、待办、备忘等等。

功能简介

1、主页 :碎片内容维护界面,支持筛选,快速添加功能后续会直接接入 AI,实现聊天式录入,自动解析创建。

2、周视图:主要用于从一周的角度总览各种事项,方便计划或者总结时使用。

3、四象限:基于四象限方法辅助管理待办事项。

4、合集:为碎片内容设置不同合集,方便区分各种类型事项。

本次任务

目前项目已经基本实现了初版的界面效果(Vue3实现),今天的任务则是在不改动现有前端界面的前提下,为核心页面接入数据持久化能力。

由于该应用规划为轻量、易用,因此,后端决定采用云数据库的模式,考虑到网络问题,最终选择了腾讯云的 CloudBase,开发测试阶段免费哦。

实操记录

下面我们开始实际操作,开发环境是 Cursor,模型采用的 Auto 模式。

准备工作

CloudBase 使用需要:

  1. 注册一个腾讯云账号并登录。
  2. 创建一个"云开发"环境,选择免费的即可,此处的环境id会作为后续 sdk 访问的标识。
  3. 开通"云开发平台"中的"数据库"功能。

此处为了查询、筛选高效,我选择了关系型数据库 MySQL。

然后添加需要的两个数据模型 (可以理解为数据库中的表格):contents(碎片内容)、collections(合集)。

初版生成

上面配置好之后,我们开始初版生成,采用 Plan 模式。

指令

sql 复制代码
现在应用界面已基本实现,仔细了解当前代码。
接下来需要实现cloudbase云数据库(MySQL 数据库)存储业务数据。
数据库访问优先采用非sql模式。

这版提示词其实是第二次尝试,第一次提示词中没有显式指明 CloudBase、MySQL数据库、非sql模式等名词,导致生成结果不太好。

于是简单了解了 CloudBase 相关概念后,改进了提示词。

过程

步骤1:可以看到,和之前的尝试一致,先是确认需求细节。

步骤2:然后根据选择结果,生成文档。这里将前面步骤创建的数据模型导出为 json 传递到上下文中,提高代码生成准确率。

步骤3:审阅文档发现,只识别出来一个应用界面进行对接,另外3个界面并没有识别出来,好在 Cursor Plan 模式支持直接修改文档。

修改完成后,点击"Build"开始生成。

结果

整个生成过程未发生过大的偏移,计划中的 todo 都完成了,包括我们手动修改的内容。

优化改进

虽然初版生成整体效果很不错,也没有语法错误,但依然存在一些小问题。

问题1 :CloudBase 的接口访问需要授权后才能调用,当前版本未设计用户体系,需要实现"匿名登录"。

解决指令:

rust 复制代码
<plan文档.md>
you can't request without auth

问题2:由于碎片内容表名是 ·contents·(内容),但四象限界面命名采用的碎片,未能有效理解,导致这块接口未对接。

解决指令:

css 复制代码
<plan文档.md>
@Quadrant.vue 今日碎片显示的就是contents数据,四象限内也是显示contents数据(根据优先级进行划分,优先级中直接存储1、2、3、4,分别对应四象限的重要且紧急、重要但不紧急等)

最终结果

通过 AI 辅助修复,很快就修复了相关问题。

结语

今天主要有两点感触:

  1. Cursor Plan 模式确实挺好用的,并且产品的完成度很高,不会出现那种 Plan 不行也无法自行调整的情况。
  2. 云数据库 (包括云函数)的模式在小应用开发中真的很有优势,不需要搭建后端服务,不需要写sql,仅仅进行必要的表设计即可提供 API 能力,十分简便。

如果你也正好感兴趣,可以根据以上内容自行尝试,也欢迎留言交流!

相关推荐
lugiax1 小时前
拿了奥数满分的 AI,为什么偏偏是个“生活小白”?
ai编程
用户842558130871 小时前
界面说「已保存」,接口说「每天只能发 5 篇」:一次发布失败的完整取证
ai编程
用户539418729072 小时前
别只在 prompt 里让 AI 别碰文件:我给仓库装了四道提交闸门,越界直接拒绝提交
ai编程·cursor
ZzT2 小时前
Claude Code 团队的代码评审:合并量翻倍,回滚率降了 40%
ai编程·claude
HjhIron2 小时前
从朴素RAG到Agentic RAG(二):基于LangGraph的混合检索、重排与闭环设计
ai编程
坊钰2 小时前
【LangGraph框架入门级】12. 人机交互:interrupt 中断与 Command 恢复
开发语言·数据库·python·人机交互·ai编程·langgraph
Solara2 小时前
一个标志位挂了 18 天不落地:它等的重启,2 天 14 小时后就完成了
人工智能·程序员·ai编程
SkyWalking中文站2 小时前
从模型输入到文件变更:追踪 AgentCore 上的 LangGraph Agent
langchain·aigc·ai编程
金銀銅鐵3 小时前
[Java] 用 GUI 展示 ArrayList 扩容的过程
java·后端·ai编程
NC 王炸3 小时前
AI 做的便签,换个浏览器就没了?加一个导出按钮,把数据带走
javascript·ai编程·数据备份·localstorage·txt导出