如何零基础制作一款AI辅助的记账小程序利用Cursor实现数据可视化展示

首页

热心网友

转载

2026-04-21

如何从零开始，打造一款AI帮你记账的小程序：用Cursor让数据“说话”

如何零基础制作一款ai辅助的记账小程序利用cursor实现数据可视化展示

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

你是不是总觉得记账麻烦，记完了一堆数字却又看不出个所以然？想自己动手做个智能记账工具，又完全不懂编程？别担心，今天我们就来试试一个“捷径”。用上集成了AI编程助手的Cursor，你会发现，即使零基础，也能一步步搭出一个能自动分类、还能把流水变成清晰图表的小程序。下面，我就来分享这个具体怎么实现。

一、环境准备与项目初始化

万事开头难，但这一步恰恰是最简单的。说白了，就是把我们需要的“工具箱”摆好，让Cursor这位AI助手能顺利开工。这里基本不用写代码，跟着做就行。

1、首先，去cursor.sh官网把最新的Cursor IDE下载下来安装好。安装的时候，记得勾选那个“Add to PATH”选项，这能省去后面配置环境的很多麻烦。

2、打开Cursor，到设置里（Settings → Cursor）把内置AI功能打开，然后登录你的GitHub账号，关联一下Copilot权限。有了AI加持，后面我们就能“动口不动手”了。

3、咱们新建一个文件夹，名字就叫“ai-accounting-app”。右键这个文件夹，选择“Open with Cursor”。接着，在Cursor侧边栏的终端里，输入npm init -y并回车，一个Node.js项目的骨架就搭好了。

4、最后，我们把后面画图表和做服务要用的“材料”装上：运行npm install chart.js react-chartjs-2 express cors。别看现在可能不明白每个包是干嘛的，先装上，后面我会告诉你它们如何各司其职。

二、构建简易记账数据结构与本地存储

程序总得有个地方存数据吧？考虑到咱们是入门，就不搞复杂的数据库了。用一个JSON文件来模拟，既直观又好理解，数据怎么存怎么取一目了然。

1、在项目根目录下，新建一个“data/”文件夹，然后在里面创建一个“transactions.json”文件。打开它，先往里写一个空数组[]。这就像是我们准备了一个空账本，等着往里记。

2、接下来是关键一步：创建“src/utils/storage.js”文件。这里我们要写两个核心函数，负责读写这个“账本”。思路很简单：用fs.readFileSync读取现有记录，用fs.writeFileSync把新条目追加进去。每条记录都包含id（唯一标识）、amount（金额）、category（分类）、date（日期）和note（备注）这几个字段。

3、对了，记得在storage.js里加一个generateId()小函数，用当前的时间戳毫秒数来生成ID。这样做基本能保证每条记录的ID都是独一无二的，避免冲突，这是我的经验之谈。

4、光有架子不行，得放点测试数据看看效果。创建一个“sample-data.js”脚本，调用刚才写的写入函数，插入几条假数据进去，比如 { “amount”: 85.5, “category”: “餐饮”, “date”: “2024-06-12” }。跑一下脚本，看看“账本”里是不是真有内容了，这能帮你快速建立信心。

三、接入AI辅助记账逻辑（基于Cursor指令驱动）

重头戏来了！咱们要请出AI的核心能力。这里主要聚焦两个任务：一是从你随口一说的备忘里，自动提取金额和分类；二是根据一段时间的数据，生成一份人话版的消费总结。

1、在Cursor编辑器里新建“src/ai/transaction-parser.js”。把光标放到空白处，然后直接像跟同事说话一样输入提示词：“写一个函数parseTransactionNote，接收一个字符串比如‘晚饭外卖花了42元’，返回一个像 { amount: 42, category: ‘餐饮’, note: ‘晚饭外卖’ } 这样的对象。金额用正则表达式把数字提取出来就行，分类的话，咱们先弄个关键词映射表来处理。”

Tago AI

AI生成带货视频，专为电商卖货而生

下载

2、输入完成后，按下Ctrl+K（Windows）或Cmd+K（Mac），让AI生成代码。等它写好后，我们手动完善一下那个关键词映射表，比如 { ‘外卖’: ‘餐饮’, ‘地铁’: ‘交通’, ‘充电’: ‘日用品’, ‘工资’: ‘收入’ }。这个表以后你可以随时扩展，非常灵活。

3、再新建一个“src/ai/trend-summary.js”文件。这回的提示词可以是：“写一个函数generateSummary，接收一个transactions数组，统计最近7天里各个品类的支出占比，然后返回一段中文字符串，格式像‘餐饮占38%，交通占22%’这样。”

4、AI生成代码后，咱们得检查一下核心逻辑：它有没有用reduce来累加金额？百分比有没有用toFixed(0)来取整？日期过滤条件是不是new Date(item.date) > sevenDaysAgo？根据我的经验，AI有时候会漏掉细节，我们手动补全一下，函数就完美了。

四、搭建前端记账界面与图表渲染

现在，我们需要一个看得见、摸得着的界面了。这里我们用React来搭页面，用Chart.js来画图，并且全部通过Cursor“描述”出来。

1、在项目根目录下，打开终端执行 npx create-react-app client --template typescript。这会创建一个叫“client”的子应用。然后进入client目录，再安装一次专门给前端用的图表库：npm install chart.js react-chartjs-2。

2、打开“client/src/App.tsx”，在Cursor里输入：“生成一个React函数组件AccountDashboard，要包含金额输入框、分类下拉菜单、备注文本域和一个提交按钮。点击按钮后，能调用父组件传过来的onAddTransaction函数，把表单值传过去。” 看，一个基础的记账表单界面就这么诞生了。

3、图表部分更有意思。在“client/src/components/ChartDisplay.tsx”里，让Cursor生成一个折线图组件：告诉它横轴是日期，纵轴是累计支出，数据源从 fetch(‘/api/transactions’) 这个接口获取。记得提醒它把获取数据的逻辑放在useEffect里。

4、我们还需要一个环形图来看消费比例。输入提示词：“创建一个PieChart组件，接收两个数组：categories（分类名）和values（对应的值）。用Chart.js的pie类型来渲染，把图例位置设在右边，颜色就用 [‘#36A2EB’, ‘#FF6384’, ‘#FFCE56’] 这个经典搭配。” 这样一来，数据可视化的部分就齐活了。

五、连接前后端并启用本地调试服务

前后端就像两个岛，我们需要搭一座桥把它们连起来。用Express搭建一个极简的API服务，这是目前最轻量的方式。

1、在项目根目录创建“server.js”。直接用Cursor生成一个基础的Express服务：让它监听3001端口，设置app.use(cors())来解决前端请求的跨域问题，再用app.use(express.json())来解析JSON格式的请求数据。

2、添加一个GET类型的路由 /api/transactions。它的任务很简单：读取我们之前那个“data/transactions.json”文件，然后用res.json()把全部记录返回给前端。这就相当于前端来查账了。

3、再添加一个POST路由 /api/parse-note。这个路由会接收像 { note: “午饭花了50” } 这样的请求，然后调用我们之前写好的那个“src/ai/transaction-parser.js”里的parseTransactionNote函数，把AI解析好的结构化结果返回去。

4、最后，把前端的逻辑串起来。在“client/src/App.tsx”的提交事件里，我们调整一下：先阻止默认提交行为，然后带着用户输入的备注，去请求 /api/parse-note 让AI解析；拿到解析结果（比如金额和AI建议的分类）后，再结合用户自己可能调整的分类，最终通过POST请求保存到 /api/transactions 接口，完成一次完整的智能记账。

把这些步骤走完，一个虽然简单但五脏俱全、且具备AI辅助和可视化能力的记账小程序原型就真的跑起来了。整个过程，你会发现，很多代码工作其实是在和Cursor“对话”中完成的。希望这个实践能为你打开一扇新的大门。

来源:https://www.php.cn/faq/2168618.html

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：跨境知道-外贸人资源平台,跨境电商服务平台下一篇：梨视频-资讯短视频平台