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

❀本篇博客为博主原创文章，未经博主允许不得转载。❀

本文链接：https://blog.csdn.net/qq_21484461/article/details/147923854

我正在参加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 很快就返回了一个可独立运行的脚本，逻辑清晰、异常处理完善。

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

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

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

剩下的建表、封装接口、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 给出了如下关键部分：

<template>
  <form @submit.prevent="submit">
    <input v-model="amount" type="number" required />
    <select v-model="type">
      <option value="income">收入</option>
      <option value="expense">支出</option>
    </select>
    <select v-model="category">
      <option v-for="c in categories" :key="c" :value="c">{{ c }}</option>
    </select>
    <input v-model="date" type="date" />
    <textarea v-model="note" placeholder="备注..." />
    <button type="submit">保存</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

const amount = ref(0)
const type = ref('expense')
const category = ref('')
const date = ref(new Date().toISOString().split('T')[0])
const note = ref('')
const categories = ['餐饮', '交通', '娱乐', '购物', '其他']

const submit = async () => {
  await axios.post('/api/txns', {
    amount: amount.value,
    type: type.value,
    category: category.value,
    date: date.value,
    note: note.value,
  })
  alert('已保存')
}
</script>

✔️ 这个表单生成得非常完整，我稍作美化样式就可以直接使用，甚至连默认日期都已经处理好了。

② 图表组件 `Charts.vue`

我说：

请用 Chart.js 生成一个组件，包含两个图表：

柱状图：近 6 月收入 vs 支出；
饼图：当前月份各分类支出占比。

CodeBuddy 给出的图表逻辑非常智能，自动封装成两个 <canvas> 渲染，并写好 watchEffect 监听数据变化：

<template>
  <canvas id="barChart"></canvas>
  <canvas id="pieChart"></canvas>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Chart from 'chart.js/auto'
import axios from 'axios'

const barChart = ref(null)
const pieChart = ref(null)

onMounted(async () => {
  const res = await axios.get('/api/txns/stats?month=2025-05')
  const { incomeTotal, expenseTotal, categoryTotals } = res.data

  new Chart(barChart.value, {
    type: 'bar',
    data: {
      labels: ['收入', '支出'],
      datasets: [{
        data: [incomeTotal, expenseTotal],
        backgroundColor: ['#4caf50', '#f44336']
      }]
    }
  })

  new Chart(pieChart.value, {
    type: 'pie',
    data: {
      labels: Object.keys(categoryTotals),
      datasets: [{
        data: Object.values(categoryTotals),
        backgroundColor: ['#2196f3', '#ff9800', '#9c27b0', '#009688']
      }]
    }
  })
})
</script>

📈 我无需手写数据处理逻辑，只需传入后端接口返回值，图表即可直接渲染。

在这里插入图片描述

🧪 接口联调与状态管理

我最后补充了一个 useTransactionStore.js 作为统一状态源，在其中封装了获取记录、添加记录、获取统计的方法。

CodeBuddy 建议使用 Pinia，并帮我自动添加了 Authorization 头用于 Token 登录：

const api = axios.create({
  baseURL: '/api',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`
  }
})

✅ 小结：从设计图到运行 Vue 项目，只花了10分钟

前端部分对我而言是最省力的部分。借助 CodeBuddy：

我不需要反复查文档；
不需要手动搭建目录；
图表逻辑直接生成；
状态管理一键接入；
接口联调自动补全。

整个 Vue 项目的开发几乎是我不断描述页面行为，而它来不断实现和完善细节的过程，效率提升了不止十倍。

✅ 写在最后：从“写代码”到“说需求”，开发进入全新阶段

回顾整个项目过程，我最大的感受是：

CodeBuddy 真正把 AI 变成了“项目搭档”，而不是“代码工具”。

它不仅帮我写出成百上千行的代码，更重要的是，它能理解我想实现的功能，快速反应并协助我完成从后端接口到前端展示的完整闭环。

对我来说，它不是一个自动化写代码的机器，而是一个能参与讨论、协同实现、根据语义理解需求的“开发合作者”。

过去我们一个人做一个系统，需要查文档、搭架构、踩无数坑，而现在只需要一句“我想做个 XX 系统”，CodeBuddy 就能帮我把这个愿望逐步落地。

当然，它不是万能的。你依然需要了解基本的编程知识，知道想要实现什么，理解生成代码的结构和逻辑。但有了它，开发不再是“体力活”，而是真正回归“创意和表达”本身。

“我不是为了练习写 for 循环才写项目的，我是为了把脑海里的点子变成现实。”

如果你也有一个迟迟未动手的小项目，也曾幻想拥有一个 7×24 小时都不嫌你烦的开发搭档，那不妨试试 CodeBuddy。

把你的需求说出来，也许下一个落地的创意，就是你发出的第一句话。

✨ 创意永不缺席，关键是有人陪你一起把它实现。

如果你觉得这篇文章有帮助，欢迎点赞、收藏或转发给同样想自己搞项目的朋友们 🙌

更多开发实录、AI 工具体验、全栈案例分享，欢迎关注我，我们下篇博客见！

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

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

🚀 CodeBuddy 是什么？

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

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

🗨️ 我说：

🤖 CodeBuddy 的回应

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

🧾 预算提醒脚本

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

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

🎨 Step 1：我先告诉 CodeBuddy 页面构想

🤖 CodeBuddy 生成的结构如下：

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

① 表单组件 TransactionForm.vue

② 图表组件 Charts.vue

🧪 接口联调与状态管理

✅ 小结：从设计图到运行 Vue 项目，只花了10分钟

✅ 写在最后：从“写代码”到“说需求”，开发进入全新阶段

① 表单组件 `TransactionForm.vue`

② 图表组件 `Charts.vue`