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

032854

我正在参加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 给出了如下关键部分：