【中国版 Cursor】从一句“我要做个记账系统”开始,我和 CodeBuddy 一起完成了一个全栈项目-繁依Fanyi

我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy – AI 时代的智能编程伙伴

✨ 引言:从灵感到实现,CodeBuddy 让我一个人也能完成一个项目

作为一名开发者,我们总会有一些灵光一闪的创意。比如,有一天我突然想到:

“我想做一个个人记账系统,能记录每日开销、统计图表清晰明了,还能在超预算时发出提醒。”

然而从这个想法落地为真实可用的系统,背后往往意味着:前端页面搭建、后端接口开发、数据库结构设计、图表数据可视化、状态管理……就算你会全栈,也得花上好几天精力。

直到我遇见了 CodeBuddy(https://copilot.tencent.com/) —— 腾讯云推出的一款全栈 AI 编程助手。
它不仅仅能帮你“写代码”,更能陪你“写项目”。在这里,“我要做一个系统”不再是一句空话,而是一个真正可执行的自然语言指令。

在这里插入图片描述


🚀 CodeBuddy 是什么?

CodeBuddy 被称为“中国版 Cursor”,本质上是一个面向开发者全流程的 AI 编程伙伴,它专注于 “真实项目场景” 的落地,不只是写函数、改 Bug,更能帮助开发者:

  • 🧠 Craft Prompt 系统:只需用中文描述功能需求,AI 即可生成数据库结构、接口逻辑、后端服务等完整代码;
  • 🧩 前后端联动能力:配合 Figma 自动生成 Vue 页面,API 接口同步适配,支持 Chart.js 等可视化方案;
  • 🧾 极强中文理解力:无需中英混合 Prompt,用自然语言沟通即可准确完成复杂业务流程;
  • 🔄 理解老旧项目代码:可进行“祖传代码”分析与智能重构,真正释放生产力;
  • 🌐 生态优势显著:与微信小程序、CloudStudio 云开发平台无缝集成,直接部署一体化上线。

✍️ 本文内容简介:用自然语言开发一款「个人开销管家」

本篇文章将以我与 CodeBuddy 的实际协作过程为主线,记录整个「个人收支管理系统」从设想到实现的全过程。
我不只是使用 CodeBuddy 写几段代码,而是用“我要做 XX 功能”的对话式方式驱动开发,让它变成我真正的“智能拍档”。

项目使用技术栈为:FastAPI + SQLite(后端) + Vue 3 + Chart.js(前端),完整实现以下功能模块:

  • 🔐 登录与注册功能(用户认证)
  • 💰 收支记录录入 + 列表分页展示
  • 📊 月度统计图表(柱状图 + 饼图)
  • 📌 分类预算设置 + 超支提醒(Python 脚本示例)

而这些模块,都是在我一句句描述“我要实现什么功能”的过程中,由 CodeBuddy 协助我快速生成、联调与优化完成的。

从后端接口设计,到前端组件开发,再到统计逻辑的封装优化,本篇将带你深入体验 CodeBuddy 如何成为开发者最懂的搭档——把开发从“写代码”变成“说人话”


如果你也曾想自己搞个小系统却不知从何下手,或者你想了解 AI 是如何参与真实开发协作的,这篇文章将给你带来一份有趣、实用又高效的参考。

接下来,我们从最初的系统构想与后端接口设计开始。

太好了,那我们就顺着引言继续,进入下一部分:「项目构想与后端开发流程」,也就是你与 CodeBuddy 的第一次对话启动阶段。


🧠 项目构想 & 后端开发:我和 CodeBuddy 是怎么开工的?

当我下定决心要实现这个“个人开销管家”系统时,我并没有像以往一样打开 VS Code 开始手写接口,而是直接向 CodeBuddy 发起了我第一次请求。

🗨️ 我说:

CodeBuddy,我要开发一个用于管理个人日常收支的系统,后端使用 Python 和 SQLite,前端使用 Vue。请先帮我搭建一个后端,要求支持:

  • 用户注册与登录(带 Token 鉴权);
  • 添加与查询收支记录;
  • 按月和分类统计收支;
  • 支持通过脚本检测是否超出预算。

这就是我典型的 Craft Prompt:目标清晰,功能明确,不纠结细节


🤖 CodeBuddy 的回应

CodeBuddy 很快返回了一个完整后端项目的结构草图,并建议使用 FastAPI 框架来搭建 REST API 服务,同时自动帮我设计了以下数据库结构:

-- 用户表
CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  username TEXT UNIQUE NOT NULL,
  password TEXT NOT NULL
);

-- 收支记录表
CREATE TABLE transactions (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  user_id INTEGER,
  amount REAL NOT NULL,
  type TEXT CHECK(type IN ('income', 'expense')) NOT NULL,
  category TEXT NOT NULL,
  date TEXT NOT NULL,
  note TEXT,
  FOREIGN KEY(user_id) REFERENCES users(id)
);

同时它还创建了基础的 FastAPI 接口文件结构:

backend/
├── requirements.txt    # 项目依赖
├── app/
│   ├── __init__.py    # 初始化文件
│   ├── models.py      # 数据库模型
│   ├── auth.py        # 认证相关
│   ├── api.py         # API路由
│   └── utils.py       # 工具函数
├── config.py          # 配置文件
└── main.py           # 主程序入口

CodeBuddy 还能自动生成 JWT 登录逻辑、密码加密、Token 解析装饰器等细节,而且接口都自带异常处理和校验逻辑,甚至编写了相关脚本,让你简化python环境的配置,这比我自己一行一行写快太多了。

在这里插入图片描述


🔁 第二轮沟通:我提出优化需求

虽然 CodeBuddy 自动生成的接口已经非常完善,但我还是希望它能帮我做些细节优化:

✅ 我说:请添加一个 GET /api/txns/stats?month=YYYY-MM 的接口,统计:

  • 月总收入、月总支出;
  • 每个分类的支出总额。

CodeBuddy 立刻帮我写出了如下 SQL 查询(使用 SQLite strftime 解析月份):

SELECT
  type,
  category,
  SUM(amount) as total
FROM transactions
WHERE strftime('%Y-%m', date) = :month
GROUP BY type, category;

接口返回格式也非常合理,既支持图表展示,也方便前端调用。


🧾 预算提醒脚本

最后我还让它帮我写一个 Python 脚本,自动读取当月数据并对比设定的分类预算,超支时提示用户:

budgets = {"餐饮": 1000, "娱乐": 500, "交通": 300}

CodeBuddy 很快就返回了一个可独立运行的脚本,逻辑清晰、异常处理完善。


小结:后端构建几乎只靠说话完成

整个后端开发过程中,我几乎只用了三句话:

  1. 我需要一个收支管理系统;
  2. 我要支持用户登录;
  3. 请添加统计和预算接口。

剩下的建表、封装接口、Token 登录、SQL 编写、接口校验,全都是 CodeBuddy 帮我生成的。

它不是简单地写代码,而是像个项目合伙人一样理解上下文并执行需求,这才是我使用它时最震撼的地方。


接下来,我将把这个后端系统部署到 CloudStudio,并进入前端部分开发,用 Vue 和 Chart.js 展示出一份真正可用的“个人财务仪表盘”。


前端开发:用 Vue 和 Chart.js 打造财务仪表盘

后端完成之后,我终于可以开始前端部分了。这个阶段我依旧采用了「对 CodeBuddy 发出自然语言需求 → 逐步优化细节」的方式来开发。它不只是帮我写组件,还能根据我提供的页面结构和交互意图主动生成 Vue 文件结构、状态管理逻辑和图表渲染代码。


Step 1:我先告诉 CodeBuddy 页面构想

我说:

我打算做两个页面:

  • 一个是 收支记录页(transactions),包括:

    • 表单输入一笔新的收支;
    • 分页展示历史记录;
  • 一个是 统计看板页(dashboard),包括:

    • 一个柱状图,展示近 6 个月的收入/支出对比;
    • 一个饼图,展示本月支出按分类占比;

页面使用 Vue 3 + Composition API + Chart.js,请帮我生成组件结构和基础代码。


CodeBuddy 生成的结构如下:

frontend/
├── src/
│   ├── api/          # API 请求
│   ├── components/   # 通用组件
│   ├── views/        # 页面组件
│   ├── router/       # 路由配置
│   ├── composables/  # 组合式函数
│   ├── utils/        # 工具函数
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
└── index.html        # HTML 模板

我非常满意这一结构,几乎不需要调整,直接就是我心中理想的目录层级。

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述


Step 2:我开始逐个组件对话生成

① 表单组件 TransactionForm.vue

我说:

请帮我生成一个支持双向绑定的收支表单组件,字段包括:

  • 金额(number)
  • 类型(下拉选择:收入/支出)
  • 分类(动态选择,支持“餐饮、交通、娱乐…”)
  • 日期(默认今天)
  • 备注(可选)

提交时 POST 到 /api/txns 接口。

CodeBuddy 给出了如下关键部分: