作为一名开发者,我们总会有一些灵光一闪的创意。比如,有一天我突然想到:
“我想做一个个人记账系统,能记录每日开销、统计图表清晰明了,还能在超预算时发出提醒。”
然而从这个想法落地为真实可用的系统,背后往往意味着:前端页面搭建、后端接口开发、数据库结构设计、图表数据可视化、状态管理……就算你会全栈,也得花上好几天精力。
直到我遇见了 CodeBuddy(https://copilot.tencent.com/) —— 腾讯云推出的一款全栈 AI 编程助手。 它不仅仅能帮你“写代码”,更能陪你“写项目”。在这里,“我要做一个系统”不再是一句空话,而是一个真正可执行的自然语言指令。
CodeBuddy 被称为“中国版 Cursor”,本质上是一个面向开发者全流程的 AI 编程伙伴,它专注于 “真实项目场景” 的落地,不只是写函数、改 Bug,更能帮助开发者:
本篇文章将以我与 CodeBuddy 的实际协作过程为主线,记录整个「个人收支管理系统」从设想到实现的全过程。 我不只是使用 CodeBuddy 写几段代码,而是用“我要做 XX 功能”的对话式方式驱动开发,让它变成我真正的“智能拍档”。
项目使用技术栈为:FastAPI + SQLite(后端) + Vue 3 + Chart.js(前端),完整实现以下功能模块:
而这些模块,都是在我一句句描述“我要实现什么功能”的过程中,由 CodeBuddy 协助我快速生成、联调与优化完成的。
从后端接口设计,到前端组件开发,再到统计逻辑的封装优化,本篇将带你深入体验 CodeBuddy 如何成为开发者最懂的搭档——把开发从“写代码”变成“说人话”。
如果你也曾想自己搞个小系统却不知从何下手,或者你想了解 AI 是如何参与真实开发协作的,这篇文章将给你带来一份有趣、实用又高效的参考。
接下来,我们从最初的系统构想与后端接口设计开始。
当我下定决心要实现这个“个人开销管家”系统时,我并没有像以往一样打开 VS Code 开始手写接口,而是直接向 CodeBuddy 发起了我第一次请求。
CodeBuddy,我要开发一个用于管理个人日常收支的系统,后端使用 Python 和 SQLite,前端使用 Vue。请先帮我搭建一个后端,要求支持:
这就是我典型的 Craft Prompt:目标清晰,功能明确,不纠结细节。
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 展示出一份真正可用的“个人财务仪表盘”。
后端完成之后,我终于可以开始前端部分了。这个阶段我依旧采用了「对 CodeBuddy 发出自然语言需求 → 逐步优化细节」的方式来开发。它不只是帮我写组件,还能根据我提供的页面结构和交互意图主动生成 Vue 文件结构、状态管理逻辑和图表渲染代码。
我说: 我打算做两个页面:
页面使用 Vue 3 + Composition API + Chart.js,请帮我生成组件结构和基础代码。
frontend/
├── src/
│ ├── api/ # API 请求
│ ├── components/ # 通用组件
│ ├── views/ # 页面组件
│ ├── router/ # 路由配置
│ ├── composables/ # 组合式函数
│ ├── utils/ # 工具函数
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
└── index.html # HTML 模板
我非常满意这一结构,几乎不需要调整,直接就是我心中理想的目录层级。
TransactionForm.vue
我说: 请帮我生成一个支持双向绑定的收支表单组件,字段包括:
提交时 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 生成一个组件,包含两个图表:
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')}`
}
})
前端部分对我而言是最省力的部分。借助 CodeBuddy:
整个 Vue 项目的开发几乎是我不断描述页面行为,而它来不断实现和完善细节的过程,效率提升了不止十倍。
回顾整个项目过程,我最大的感受是:
CodeBuddy 真正把 AI 变成了“项目搭档”,而不是“代码工具”。
它不仅帮我写出成百上千行的代码,更重要的是,它能理解我想实现的功能,快速反应并协助我完成从后端接口到前端展示的完整闭环。
对我来说,它不是一个自动化写代码的机器,而是一个能参与讨论、协同实现、根据语义理解需求的“开发合作者”。
过去我们一个人做一个系统,需要查文档、搭架构、踩无数坑,而现在只需要一句“我想做个 XX 系统”,CodeBuddy 就能帮我把这个愿望逐步落地。
当然,它不是万能的。你依然需要了解基本的编程知识,知道想要实现什么,理解生成代码的结构和逻辑。但有了它,开发不再是“体力活”,而是真正回归“创意和表达”本身。
“我不是为了练习写 for 循环才写项目的,我是为了把脑海里的点子变成现实。”
如果你也有一个迟迟未动手的小项目,也曾幻想拥有一个 7×24 小时都不嫌你烦的开发搭档,那不妨试试 CodeBuddy。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有