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模式。

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

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

过程

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

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

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

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

结果

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

优化改进

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

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

解决指令:

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 能力,十分简便。

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

相关推荐
腾讯云云开发7 小时前
CloudBase + AI 游戏开发新范式,3小时极速开发
ai编程·游戏开发·小程序·云开发
302wanger7 小时前
Claude平替-iFlow初体验
ai编程
用户4099322502127 小时前
想抓PostgreSQL里的慢SQL?pg_stat_statements基础黑匣子和pg_stat_monitor时间窗,谁能帮你更准揪出性能小偷?
后端·ai编程·trae
xurime10 小时前
Excelize 开源基础库发布 2.10.0 版本更新
golang·开源·github·excel·ai编程·go语言
今天有个Bug10 小时前
claude-sonnet-4-5,IDE中集成,白嫖Claude Code代理,AnyRouter公益站
ai编程·claude code·ide集成·claude 4.5
CoderJia程序员甲20 小时前
GitHub 热榜项目 - 日榜(2025-10-11)
ai·开源·github·ai编程·github热榜
狠活科技20 小时前
免登录!免安装ClI,Claude Code官方插件接入API使用教程
人工智能·vscode·ai编程
下位子1 天前
『AI 编程』用 Codex 开发识字小帮手应用
android·openai·ai编程
Cc00108521 天前
【AI学习笔记】用AI生成spring boot + redis
spring boot·笔记·学习·ai编程