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

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

相关推荐
大强同学2 小时前
对比 VS Code:Zed 编辑器编码体验全面解析
人工智能·windows·编辑器·ai编程
小村儿3 小时前
连载04-最重要的Skill---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
北冥有羽Victoria5 小时前
OpenCLI 操作网页 从0到1完整实操指南
vscode·爬虫·python·github·api·ai编程·opencli
Thomas.Sir5 小时前
GitHub Copilot从入门到精通【从基础补全到智能代理,解锁AI编程全技能】
github·copilot·ai编程
加瓦点灯5 小时前
Vibe Coding 最佳实践:人控架构,AI执行
ai编程
财经资讯数据_灵砚智能6 小时前
基于全球经济类多源新闻的NLP情感分析与数据可视化(日间)2026年4月9日
人工智能·python·信息可视化·自然语言处理·ai编程
恋猫de小郭7 小时前
手机直接运行 Codex/OpenCode/Claude Code ,实时管理你的 AI Coding
前端·openai·ai编程
JaydenAI7 小时前
[FastMCP设计、原理与应用-02]以命令行和客户端与MCP服务器交互
ai编程·ai agent·mcp·fastmcp
财经资讯数据_灵砚智能8 小时前
基于全球经济类多源新闻的NLP情感分析与数据可视化(夜间-次晨)2026年4月8日
大数据·人工智能·信息可视化·自然语言处理·ai编程
程序员鱼皮8 小时前
AI 最需要的 15 个开源项目,装完直接起飞!
ai·程序员·开源·编程·ai编程