记录一次完整的AI辅助开发经历，以及踩过的那些坑

最近花了两天时间，用AI工具从零搭建了一个记账小程序。整个过程有惊喜也有挑战，今天把经验整理出来，顺便把源码分享给大家。

为什么要做这个项目

说实话，市面上的记账软件已经很多了。但我一直想尝试用AI来协助开发一个完整的项目，看看到底能做到什么程度。选择记账小程序是因为：

• 功能边界清晰，不会无限扩展

• 涉及前后端、数据库，技术栈相对完整

• 日常使用频率高，能真实验证体验

技术选型

在和AI讨论后，我们确定了这样的技术栈：

后端部分

• Spring Boot

  稳定可靠，AI对它的理解也最准确

• MyBatis-Plus

  简化数据库操作

• MySQL

  数据存储

前端部分

• uni-app

  一套代码多端运行

• Vue 3

  组合式API写起来舒服

• TypeScript

  类型约束减少bug

这些技术都比较主流，AI给出的代码质量相对有保障。

开发过程实录

1. 数据库设计

先让AI帮我理清楚需要哪些表。最终确定了三个核心表：

• 用户表（user）

  存储账号信息

• 分类表（category）

  收入/支出的分类管理

• 账单表（bill）

  每笔交易记录

这里有个小细节，我特意让AI在账单表中加入了备注字段和图片附件字段，方便后续查账时回忆具体情况。

2. 后端接口开发

这部分AI表现得很稳。我只需要描述清楚需求，比如"实现一个分页查询账单的接口，支持按日期范围、分类、收支类型筛选"，它就能给出完整的Controller、Service、Mapper代码。

踩坑记录：最开始生成的日期查询逻辑有bug，查询结束日期时没有包含当天的数据。后来让AI修复时，它很快定位到了问题并调整了SQL查询条件。

3. 前端页面实现

前端开发是和AI配合最顺畅的部分。我会先描述页面的大致布局和功能，AI给出初版代码后，我再根据实际效果微调样式。

比如账单列表页，我的需求是：

• 顶部显示月度收支统计

• 按日期分组显示账单

• 支持下拉刷新和上拉加载

• 点击可以查看详情和编辑

AI很快就搭出了框架，后续主要是调整颜色搭配和间距。有个细节是，AI默认给的颜色太单调，我让它调整成收入绿色、支出橙色的配色，整体看起来舒服多了。

4. 数据统计功能

这是我最看重的功能。除了基本的收支记录，还做了：

• 趋势图表

  按日/周/月展示收支趋势

• 分类统计

  看看钱都花在哪些地方

• 时间对比

  和上月、上周的数据对比

图表用的是echarts，AI生成的配置项基本可用，我只调整了柱状图的宽度和间距，让一屏能看到更多数据。

小技巧：在描述图表需求时，尽量说清楚具体的视觉效果，比如"柱子要细一点"、"图例放中间"，AI理解起来更准确。

实际效果怎么样

整体来说超出预期。核心功能都实现了：

• ✅ 账单的增删改查

• ✅ 支持图片附件上传

• ✅ 分类管理（可自定义）

• ✅ 多维度统计分析

• ✅ 用户账号系统

性能方面也还行，数据量在几千条以内都很流畅。页面加载速度快，交互响应及时。

AI开发的一些感受

优势明显

• 速度快

  基础代码几分钟就能生成，省去大量重复劳动

• 规范性好

  AI生成的代码结构清晰，注释完整

• 学习成本低

  即使对某个技术不熟，AI也能给出可用的方案

也有局限

• 细节需要把控

  样式调整、边界条件处理还是需要人工介入

• 理解偏差

  有时候需求描述不够精确，AI会理解错方向

• 调试能力有限

  遇到复杂bug，还是得自己分析定位

源码分享

项目已经上传到GitHub，代码开源供大家学习参考：

项目结构： 

├── backend/ # Spring Boot 后端 

├── frontend/ # uni-app 前端 

└── README.md # 部署文档

主要特性：

• 前后端分离架构

• RESTful API设计

• 完整的用户认证体系

• 响应式页面布局

• 数据可视化统计

代码注释比较完整，部署文档也写得很清楚，照着步骤来基本不会出问题。

写在最后

这次尝试让我对AI辅助编程有了更深的认识。它不是万能的，但确实能大幅提升开发效率。特别是在做一些边界清晰的项目时，AI的价值更加明显。

如果你也想尝试用AI开发项目，我的建议是：

1. 选一个功能明确、规模适中的项目练手

2. 和AI对话时要具体，把需求说清楚

3. 代码生成后要自己测试验证

4. 遇到问题别急着放弃，多试几种表达方式

希望这篇分享对你有帮助。如果你在使用过程中遇到问题，或者有什么建议，欢迎交流。

关注微信公众号，回复”记账小程序“

体验地址：https://trade.qiangesoft.cn/